@carto/ps-react-ui 1.1.1 → 1.2.0

package/dist/types/components/button-warning/button-warning.component.d.ts

@@ -0,0 +1,31 @@
+import { ButtonWarningProps } from './types';
+export declare const useStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"buttonWarning">;
+/**
+ * ButtonWarning component is used to display a warning button with a custom style.
+ *
+ * @param {ButtonWarningProps} props - Material UI Button props
+ *
+ * @defaultValues
+ *
+ * | Prop | Value |
+ * | --- | --- |
+ * | `variant` | `'contained'` |
+ * | `size` | `'medium'` |
+ *
+ * @remarks
+ * The ButtonWarning component is a wrapper around the Material UI Button component. More information about the props can be found here: https://v4.mui.com/api/button/
+ *
+ * @example
+ *
+ * ```jsx
+ * <ButtonWarning
+ *  variant="contained"
+ *  size="medium"
+ *  startIcon={<Icon />}
+ *  endIcon={<Icon />}
+ *  disabled={false}
+ *  onClick={(): void => {}}
+ * >
+ * ```
+ */
+export declare function ButtonWarning({ children, variant, size, startIcon, endIcon, disabled, onClick, ...props }: ButtonWarningProps): JSX.Element;

package/dist/types/components/button-warning/icon-button-warning.d.ts

@@ -0,0 +1,31 @@
+import { IconButtonWarningProps } from './types';
+export declare const useStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"buttonWarning" | "iconButtonWarning">;
+/**
+ * IconButtonWarning component is used to display a warning button with a custom style.
+ *
+ * @param {IconButtonWarningProps} props
+ *
+ * @defaultValues
+ *
+ * | Prop | Value |
+ * | --- | --- |
+ * | `variant` | `'text'` |
+ * | `size` | `'medium'` |
+ *
+ * @remarks
+ * The ButtonWarning component is a wrapper around the Material UI Button component. More information about the props can be found here: https://v4.mui.com/api/icon-button/
+ *
+ * @example
+ *
+ * ```jsx
+ * <ButtonWarning
+ *  variant="contained"
+ *  size="medium"
+ *  startIcon={<Icon />}
+ *  endIcon={<Icon />}
+ *  disabled={false}
+ *  onClick={(): void => {}}
+ * >
+ * ```
+ */
+export declare function IconButtonWarning({ children, variant, size, disabled, onClick, ...props }: IconButtonWarningProps): JSX.Element;

package/dist/types/components/button-warning/styles.d.ts

@@ -0,0 +1,29 @@
+import { Theme } from '@material-ui/core';
+export declare const styles: ({ palette }: Theme) => {
+    buttonWarning: {
+        backgroundColor: string;
+        color: string;
+        '&:hover': {
+            backgroundColor: string;
+        };
+        '&.text': {
+            backgroundColor: string;
+            color: string;
+            '&:hover': {
+                backgroundColor: string;
+            };
+        };
+        '&.outlined': {
+            backgroundColor: string;
+            borderColor: string;
+            color: string;
+            '&:hover': {
+                borderColor: string;
+                color: string;
+            };
+        };
+        '&.Mui-disabled': {
+            opacity: number;
+        };
+    };
+};

package/dist/types/components/button-warning/types.d.ts

@@ -0,0 +1,16 @@
+import type { ButtonProps } from '@material-ui/core';
+interface ButtonWarningBase extends ButtonProps {
+    variant?: 'text' | 'outlined' | 'contained';
+    children: JSX.Element;
+    disabled?: boolean;
+    onClick?: () => void;
+}
+export interface IconButtonWarningProps extends ButtonWarningBase {
+    size?: 'medium' | 'small';
+}
+export interface ButtonWarningProps extends ButtonWarningBase {
+    size?: 'medium' | 'small' | 'large';
+    startIcon?: JSX.Element;
+    endIcon?: JSX.Element;
+}
+export {};

package/dist/types/components/grouped-chips/grouped-chips.component.d.ts

@@ -0,0 +1,30 @@
+import { GroupedChipsProps } from './types';
+/**
+ * GroupedChips component is used to group chips in a single component.
+ *
+ * @param {GroupedChipsProps} props - Material UI Chip props
+ *
+ * @defaultValues
+ *
+ * | Prop | Value |
+ * | --- | --- |
+ * | `size` | `'medium'` |
+ *
+ * @remarks
+ * The Chip component is a wrapper around the Material UI Chip component. More information about the props can be found here: https://v4.mui.com/api/chip/
+ *
+ * @example
+ *
+ * ```jsx
+ *  <GroupedChips
+ *    items={[
+ *      { id: '1', label: 'Option 1' },
+ *      { id: '2', label: 'Option 2' },
+ *    ]}
+ *    label='Select'
+ *    size='small'
+ *    onDelete={onDelete}
+ *  />;
+ * ```
+ */
+export declare function GroupedChips({ label, items, size, onDelete, ChipProps, BoxProps, }: GroupedChipsProps): JSX.Element;

package/dist/types/components/grouped-chips/types.d.ts

@@ -0,0 +1,13 @@
+import type { BoxProps, ChipProps } from '@material-ui/core';
+export interface GroupedChipsOption {
+    id: string | number;
+    label: string;
+}
+export interface GroupedChipsProps {
+    label?: string;
+    items: GroupedChipsOption[];
+    size?: 'small' | 'medium';
+    onDelete: (item: GroupedChipsOption) => void;
+    ChipProps?: ChipProps;
+    BoxProps?: BoxProps;
+}

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

@@ -1,2 +1,22 @@
-export { InputFile } from './input-file/InputFile';
+export { ButtonWarning } from './button-warning/button-warning.component';
+export { IconButtonWarning } from './button-warning/icon-button-warning';
+export * from './button-warning/types';
+export { GroupedChips } from './grouped-chips/grouped-chips.component';
+export * from './grouped-chips/types';
+export { InputFile } from './input-file/input-file.component';
 export * from './input-file/types';
+export { List } from './list/list.component';
+export * from './list/types';
+export { SectionContainer } from './section-container/section-container.component';
+export * from './section-container/types';
+export { SimpleSelect } from './selects/simple-select/simple-select.component';
+export { AutocompleteSelect } from './selects/autocomplete-select/autocomplete-select.component';
+export { createOptionsFromArray } from './selects/simple-select/create-options-from-array.utils';
+export * from './selects/types';
+export { Table } from './table/table.component';
+export { TableHeader } from './table/components/table-header.component';
+export { TableBody } from './table/components/table-body.component';
+export { TableCell } from './table/components/table-cell.component';
+export * from './table/types';
+export { TabsToAnchor } from './tabs-to-anchor/tabs-to-anchor.component';
+export * from './tabs-to-anchor/types';

package/dist/types/components/input-file/{InputFile.d.ts → input-file.component.d.ts}

@@ -4,6 +4,22 @@ import { InputFileProps } from './types';
  *
  * @param {InputFileProps} props - InputFile props
  *
+ * @defaultValues
+ *
+ * | Prop | Value |
+ * | --- | --- |
+ * | `id` | `'fileupload'` |
+ * | `placeholder` | `'Upload file'` |
+ * | `buttonText` | `'Browse'` |
+ * | `multipleSummaryText` | `'files selected'` |
+ * | `accept` | `'application/JSON'` |
+ * | `multiple` | `false` |
+ * | `required` | `false` |
+ * | `disabled` | `false` |
+ * | `error` | `false` |
+ * | `variant` | `'outlined'` |
+ * | `defaultValue` | `[]` |
+ *
  * @example
  *
  * ```ts

package/dist/types/components/list/list.component.d.ts

@@ -0,0 +1,36 @@
+import { ListProps } from './types';
+/**
+ * List component with two columns and collapse mode.
+ *
+ * @param {ListProps} props - Material UI List props
+ *
+ * @defaultValues
+ *
+ * | Prop | Value |
+ * | :--- | :--- |
+ * | itemsToShow | `10` |
+ * | texts | `{ showMore: 'View all', showLess: 'Collapse list' }` |
+ * | dense | `false` |
+ *
+ * @remarks
+ * The List component is a wrapper around the Material UI List component. More information about the props can be found here: https://v4.mui.com/api/list/
+ *
+ * @example
+ *
+ * ```jsx
+ *  <List
+ *    items={[
+ *      { id: '1', label: 'Option 1', value: 1 },
+ *      { id: '2', label: 'Option 2', value: 2 },
+ *    ]}
+ *    label='List Widget'
+ *    unit='$'
+ *    itemsToShow={2}
+ *    texts={{ showMore: 'View all', showLess: 'Collapse list' }}
+ *    dense={false}
+ *    formatter={(value) => value.toFixed(2)}
+ *    onRowClick={(event, item) => console.log(item)}
+ *  />;
+ * ```
+ */
+export declare function List({ items, label, unit, itemsToShow, texts: { showMore, showLess }, formatter, onRowClick, ListProps, }: ListProps): JSX.Element;

package/dist/types/components/list/types.d.ts

@@ -0,0 +1,20 @@
+import type { MouseEvent } from 'react';
+import type { ListProps as MateriaListProps } from '@material-ui/core';
+export interface ListItem {
+    id: string | number;
+    name: string;
+    value: string | number;
+}
+export interface ListProps {
+    items: ListItem[];
+    label?: string;
+    itemsToShow?: number;
+    texts?: {
+        showMore?: string;
+        showLess?: string;
+    };
+    unit?: string;
+    formatter?: (value: string | number) => string;
+    onRowClick?: (event: MouseEvent<HTMLDivElement>, item: ListItem) => void;
+    ListProps?: MateriaListProps;
+}

package/dist/types/components/section-container/section-container.component.d.ts

@@ -0,0 +1,27 @@
+import { SectionContainerProps } from './types';
+/**
+ * `SectionContainer` component is used to group content in a section with a sticky title with an optional anchor.
+ *
+ * @param {SectionContainerProps} props - SectionContainer props
+ *
+ * @defaultValues
+ *
+ * | Prop | Value |
+ * | --- | --- |
+ * | `anchor` | `false` |
+ * | `scrollMarginTop` | `0` |
+ *
+ * @example
+ *
+ * ```ts
+ * <SectionContainer
+ *   title='Section title'
+ *   id='section-id'
+ *   anchor={true}
+ *   scrollMarginTop={0}
+ * >
+ *  <Box>Content</Box>
+ * </SectionContainer>
+ * ```
+ */
+export declare function SectionContainer({ title, id, anchor, scrollMarginTop, children, BoxProps, }: SectionContainerProps): JSX.Element;

package/dist/types/components/section-container/types.d.ts

@@ -0,0 +1,9 @@
+import type { BoxProps } from '@material-ui/core';
+export interface SectionContainerProps {
+    title: string;
+    id: string;
+    children: JSX.Element | JSX.Element[];
+    anchor?: boolean;
+    scrollMarginTop?: number;
+    BoxProps?: BoxProps;
+}

package/dist/types/components/selects/autocomplete-select/autocomplete-select-option.component.d.ts

@@ -0,0 +1,2 @@
+import { OptionProps } from '../types';
+export declare function AutocompleteSelectOption({ option, state: { selected }, }: OptionProps): JSX.Element;

package/dist/types/components/selects/autocomplete-select/autocomplete-select.component.d.ts

@@ -0,0 +1,43 @@
+import { AutocompleteSelectProps } from '../types';
+/**
+ * AutocompleteSelect component
+ *
+ * @param {AutocompleteSelectProps} props - Material UI Autocomplete props
+ *
+ * @defaultValues
+ *
+ * | Prop | Value |
+ * | --- | --- |
+ * | `grouped` | `false` |
+ * | `hasAll` | `false` |
+ * | `placeholder` | `'Select'` |
+ * | `selectAllLabel` | `'Select all'` |
+ * | `size` | `'small'` |
+ *
+ * @remarks
+ * The AutocompleteSelect component is a wrapper around the Material UI Autocomplete component. More information about the props can be found here: https://v4.mui.com/api/autocomplete
+ *
+ * @example
+ *
+ * ```jsx
+ *  <AutocompleteSelect
+ *    options={[
+ *      { value: '1', label: 'Option 1' },
+ *      { value: '2', label: 'Option 2' },
+ *    ]}
+ *    hasAll={true}
+ *    grouped={true}
+ *    label='Select'
+ *    divisionType={{
+ *      singular: 'option',
+ *      plural: 'options',
+ *    }}
+ *    placeholder='Select'
+ *    selectAllLabel='Select all'
+ *    size='small'
+ *    value={value}
+ *    onChange={onChange}
+ *  />;
+ * ```
+ */
+export declare function AutocompleteSelect({ options, grouped, hasAll, label, placeholder, selectAllLabel, size, value, onChange, ...props }: AutocompleteSelectProps): JSX.Element;

package/dist/types/components/selects/autocomplete-select/listbox-select.component.d.ts

@@ -0,0 +1,19 @@
+import React, { PropsWithChildren } from 'react';
+export declare type Props = PropsWithChildren<unknown> & {
+    hasAll: boolean;
+    grouped: boolean;
+    some: number;
+    selectAll: boolean;
+    selectAllLabel: string;
+    onChange: (state: boolean) => void;
+};
+export declare const ListboxSelect: React.ForwardRefExoticComponent<{
+    children?: React.ReactNode;
+} & {
+    hasAll: boolean;
+    grouped: boolean;
+    some: number;
+    selectAll: boolean;
+    selectAllLabel: string;
+    onChange: (state: boolean) => void;
+} & React.RefAttributes<HTMLUListElement>>;

package/dist/types/components/selects/simple-select/create-options-from-array.utils.d.ts

@@ -0,0 +1,2 @@
+import { SelectOption } from '../types';
+export declare function createOptionsFromArray(array: (number | string)[]): SelectOption[];

package/dist/types/components/selects/simple-select/simple-select.component.d.ts

@@ -0,0 +1,25 @@
+import { SimpleSelectProps } from '../types';
+/**
+ * SimpleSelect component
+ *
+ * @param {SimpleSelectProps} props - Material UI Select props
+ *
+ * @remarks
+ * The SimpleSelect component is a wrapper around the Material UI Select component. More information about the props can be found here: https://v4.mui.com/api/select/
+ *
+ * @example
+ *
+ * ```jsx
+ * <SimpleSelect
+ *  options={[
+ *   { label: 'Option 1', value: '1' },
+ *   { label: 'Option 2', value: '2' },
+ *  ]}
+ *  label='Select'
+ *  placeholder='Select an option'
+ *  value={value}
+ *  onChange={onChange}
+ * >
+ * ```
+ */
+export declare function SimpleSelect({ options, label, placeholder, value, onChange, ...props }: SimpleSelectProps): JSX.Element;

package/dist/types/components/selects/types.d.ts

@@ -0,0 +1,23 @@
+import type { ChangeEvent, ReactNode } from 'react';
+import type { SelectProps } from '@material-ui/core/Select';
+import { AutocompleteChangeDetails, AutocompleteChangeReason, AutocompleteProps, AutocompleteRenderOptionState, Value } from '@material-ui/lab';
+export interface SelectOption {
+    label: string;
+    value: string | number;
+    group?: string;
+}
+export interface SimpleSelectProps extends SelectProps {
+    options: SelectOption[];
+    placeholder?: string;
+}
+export interface OptionProps<T = SelectOption> {
+    option: T;
+    state: AutocompleteRenderOptionState;
+}
+export interface AutocompleteSelectProps<T = SelectOption, Multiple extends boolean | undefined = true, DisableClearable extends boolean | undefined = undefined, FreeSolo extends boolean | undefined = undefined> extends Omit<AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>, 'onChange'> {
+    grouped?: boolean;
+    hasAll?: boolean;
+    label?: ReactNode;
+    selectAllLabel?: string;
+    onChange: (event: ChangeEvent<unknown>, options: Value<T, Multiple, DisableClearable, FreeSolo>, reason: AutocompleteChangeReason, detail?: AutocompleteChangeDetails<T>) => void;
+}

package/dist/types/components/table/components/table-body.component.d.ts

@@ -0,0 +1,32 @@
+import { TableBodyProps, TData } from '../types';
+/**
+ * `TableBody` component is a wrapper for Material-UI TableBody component.
+ *
+ * @param {TableBodyProps} props - TableBody props
+ *
+ * @defaultValues
+ *
+ * | Prop | Value |
+ * | --- | --- |
+ * | `orderBy` | `'id'` |
+ *
+ * @remarks
+ * The TableBody component is a wrapper around the Material UI TableBody component. More information about the props can be found here: https://v4.mui.com/api/table-body/
+ *
+ *
+ * @example
+ *
+ * ```ts
+ * <TableBody
+ *   columns={COLUMNS}
+ *   order='asc'
+ *   page={0}
+ *   rows={ROWS}
+ *   rowPerPage={10}
+ *   selected={[]}
+ *   remote={false}
+ *   dense={false}
+ * />
+ * ```
+ */
+export declare function TableBody<T extends TData>({ columns, order, page, rows, rowsPerPage, selected, clickable, coloredRow, dense, orderBy, pagination, remote, selectable, sortable, onRowClick, onSelect, }: TableBodyProps<T>): JSX.Element;

package/dist/types/components/table/components/table-cell.component.d.ts

@@ -0,0 +1,31 @@
+import { TableCellProps, TData } from '../types';
+/**
+ * `TableCell` component is a wrapper for Material-UI TableCell component.
+ *
+ * @param {TableCellProps} props - TableCell props
+ *
+ * @defaultValues
+ *
+ * | Prop | Value |
+ * | --- | --- |
+ * | `disabled` | `false` |
+ * | `noBorder` | `false` |
+ * | `clickable` | `false` |
+ *
+ * @remarks
+ * The TableCell component is a wrapper around the Material UI TableCell component. More information about the props can be found here: https://v4.mui.com/api/table-cell/
+ *
+ * @example
+ *
+ * ```ts
+ * <TableCell
+ *   columns={COLUMNS}
+ *   row={ROW}
+ *   disabled={false}
+ *   noBorder={false}
+ *   clickable={true}
+ *   onClick={handleClick}
+ * />
+ * ```
+ */
+export declare function TableCell<T extends TData>({ column, row, disabled, noBorder, clickable, onClick, }: TableCellProps<T>): JSX.Element;

package/dist/types/components/table/components/table-header.component.d.ts

@@ -0,0 +1,27 @@
+import { TableHeaderProps } from '../types';
+/**
+ * `TableHeader` component is a wrapper for Material-UI TableHead component.
+ *
+ * @param {TableHeaderProps} props - TableHeader props
+ *
+ * @remarks
+ * The TableHeader component is a wrapper around the Material UI TableHead component. More information about the props can be found here: https://v4.mui.com/api/table-head/
+ *
+ *
+ * @example
+ *
+ * ```ts
+ * <TableHeader
+ *   columns={COLUMNS}
+ *   selectable={true}
+ *   sortable={true}
+ *   order='asc'
+ *   orderBy='id'
+ *   numSelected={1}
+ *   rowCount={2}
+ *   onSelectAll={() => {}}
+ *   onSort={() => {}}
+ * />
+ * ```
+ */
+export declare function TableHeader({ columns, selectable, sortable, order, orderBy, numSelected, rowCount, dense, onSelectAll, onSort, }: TableHeaderProps): JSX.Element;

package/dist/types/components/table/table.component.d.ts

@@ -0,0 +1,39 @@
+import { TableProps, TData } from './types';
+/**
+ * `Table` component is a wrapper for Material-UI Table component.
+ *
+ * @param {TableProps} props - Table props
+ *
+ * @defaultValues
+ *
+ * | Prop | Value |
+ * | --- | --- |
+ * | `clickable` | `false` |
+ * | `fixedLayout` | `false` |
+ * | `order` | `'asc'` |
+ * | `orderBy` | `'id'` |
+ * | `pagination` | `false` |
+ * | `remote` | `false` |
+ * | `rowsPerPage` | `10` |
+ * | `rowsPerPageOptions` | `[10, 20, 30]` |
+ * | `selectable` | `false` |
+ * | `sort` | `false` |
+ *
+ * @remarks
+ * The Table component is a wrapper around the Material UI Table component. More information about the props can be found here: https://v4.mui.com/api/table/
+ *
+ * @example
+ *
+ * ```ts
+ * <Table
+ *   title='Section title'
+ *   columns={COLUMNS}
+ *   rows={ROWS}
+ *   sort={false}
+ *   selectable={false}
+ *   clickable={true}
+ *   onRowClick={(row) => console.log(row)}
+ * />
+ * ```
+ */
+export declare function Table<T extends TData>({ columns, rows, clickable, colorRows, dense, fixedLayout, order, orderBy, page, pagination, remote, rowsPerPage, rowsPerPageOptions, selectable, sort, TableProps, onSelect, onOrderChange, onChangePage, onChangeRowsPerPage, onRowClick, }: TableProps<T>): JSX.Element;

package/dist/types/components/table/types.d.ts

@@ -0,0 +1,90 @@
+import { ChangeEvent } from 'react';
+import type { TableProps as MaterialTableProps } from '@material-ui/core';
+export declare type Alignment = 'left' | 'right' | 'center';
+export declare type Order = 'desc' | 'asc';
+export interface TableCellInterface {
+    id: string | number;
+    field: string;
+    headerName: string;
+    sort?: boolean;
+    width?: number | string;
+    maxWidth?: number | string;
+    minWidth?: number | string;
+    align?: Alignment;
+    colSpan?: number;
+    disabled?: boolean;
+    component?: JSX.Element;
+    disablePadding?: boolean;
+}
+export interface TableProps<T extends TData = TData> {
+    columns: TableCellInterface[];
+    rows: T[];
+    clickable?: boolean;
+    colorRows?: boolean;
+    dense?: boolean;
+    fixedLayout?: boolean;
+    order?: Order;
+    orderBy?: string;
+    page?: number;
+    pagination?: boolean;
+    remote?: boolean;
+    rowsPerPage?: number;
+    rowsPerPageOptions?: number[];
+    selectable?: boolean;
+    sort?: boolean;
+    TableProps?: MaterialTableProps;
+    onChangePage?: (data: number) => void;
+    onChangeRowsPerPage?: (data: number) => void;
+    onOrderChange?: (orderBy: string, order: Order) => void;
+    onRowClick?: (row: T) => void;
+    onSelect?: (id: TData['id'][]) => void;
+}
+export interface TableHeaderProps {
+    columns: TableCellInterface[];
+    numSelected: number;
+    rowCount: number;
+    dense?: boolean;
+    order: Order;
+    orderBy?: string;
+    selectable?: boolean;
+    sortable?: boolean;
+    onSelectAll?: (event: ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+    onSort?: (data: TableCellInterface['field']) => void;
+}
+export interface TableBodyProps<T extends TData> {
+    columns: TableCellInterface[];
+    order: Order;
+    page: number;
+    rows: T[];
+    rowsPerPage: number;
+    selected: (string | number)[];
+    clickable?: boolean;
+    coloredRow?: boolean;
+    dense?: boolean;
+    orderBy?: string;
+    pagination?: boolean;
+    remote?: boolean;
+    selectable?: boolean;
+    sortable?: boolean;
+    onRowClick?: (row: T) => void;
+    onSelect?: (id: TData['id']) => void;
+}
+export interface TableBodyCellProps<T extends TData> {
+    columns: TableCellInterface[];
+    index: number;
+    row: T;
+    clickable?: boolean;
+    onClick?: (row: T) => void;
+}
+export interface TableCellProps<T extends TData> {
+    column: TableCellInterface;
+    row: T;
+    clickable?: boolean;
+    disabled?: boolean;
+    noBorder?: boolean;
+    onClick?: (row: T) => void;
+}
+export declare type TData = {
+    id: string | number;
+    style?: React.CSSProperties;
+} & Record<string, unknown>;

package/dist/types/components/table/utils.d.ts

@@ -0,0 +1,4 @@
+import { TData } from './types';
+export declare function getComparator<T extends TData>(order: string, orderBy: string): (a: T, b: T) => number;
+export declare function stableSort<T>(data: T[], comparator: (a: T, b: T) => number): T[];
+export declare function ascendingComparator<T extends TData>(a: T, b: T, orderBy: string): number;