@movable/ui 1.16.0 → 1.17.0-alpha.1

package/lib/index.d.ts

@@ -1,4 +1,597 @@
-export * from './components';
-export * from './layouts';
-export { inkDialog, InkDialogPageObject, inkSelect } from './page-objects';
-export { default as MovableUITheme } from './theme';
+import { BoxProps } from '@mui/material';
+import { ButtonProps } from '@mui/material';
+import { ChipProps } from '@mui/material';
+import { default as default_2 } from 'react';
+import { DialogProps } from '@mui/material/Dialog';
+import { DrawerProps } from '@mui/material/Drawer';
+import { FieldPath } from 'react-hook-form';
+import { FieldValues } from 'react-hook-form';
+import { GridProps } from '@mui/material/Grid';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { LinkProps } from '@mui/material';
+import { MenuItemProps } from '@mui/material';
+import { MenuProps } from '@mui/material';
+import { OverridableComponent } from '@mui/material/OverridableComponent';
+import { PaperProps } from '@mui/material/Paper';
+import { PropsWithChildren } from 'react';
+import { ReactNode } from 'react';
+import { Ref } from 'react';
+import { SelectProps } from '@mui/material';
+import { SvgIconTypeMap } from '@mui/material';
+import { SwitchProps } from '@mui/material';
+import { SxProps } from '@mui/material';
+import { Theme } from '@mui/material';
+import { ToggleButtonGroupProps } from '@mui/material';
+import { ToggleButtonProps } from '@mui/material';
+import { UseControllerProps } from 'react-hook-form';
+
+declare type ActionPropType = Omit<ButtonProps, 'variant'> & {
+    label: string;
+    variant?: 'primary' | 'warning' | 'destructive';
+    loading?: boolean;
+};
+
+declare type ActionsPropType = {
+    primary?: ActionPropType;
+    secondary?: ActionPropType;
+    cancel?: ActionPropType;
+};
+
+declare type ActionType = {
+    title: string;
+    onClick: () => void;
+};
+
+declare type BreadcrumbProps = {
+    breadcrumbs: HeaderLink[];
+};
+
+declare type ButtonPropsType = ButtonProps & {
+    label: ReactNode;
+};
+
+export declare function DemoComponent({ stringToDisplay }: DemoComponentProps): JSX_2.Element;
+
+declare type DemoComponentProps = {
+    stringToDisplay: string;
+};
+
+export declare function DetailsLayout({ Header, children, ...rest }: LayoutDetailsProps): JSX_2.Element;
+
+declare type DropdownActionType = {
+    label: ReactNode;
+    menuOptions: MenuOptionType[];
+    menuProps?: Partial<MenuProps>;
+    internalUseOnlyItems?: ReactNode[];
+};
+
+declare type HeaderLink = {
+    label: string;
+    path?: string;
+    onClick?: () => void;
+    LinkProps?: {
+        to: string;
+    } & LinkProps;
+};
+
+export declare function HeaderMetadata({ metadata }: MetaDataProps): JSX_2.Element;
+
+declare type HeaderMetadataType = {
+    icon: string | JSX.Element;
+    label: string;
+    value: string | JSX.Element;
+};
+
+export declare function HeaderSubtitle({ subtitle }: HeaderSubtitleType): JSX_2.Element;
+
+declare type HeaderSubtitleType = {
+    subtitle: string;
+};
+
+declare type IFilterDrawer = DrawerProps & {
+    isOpen: boolean;
+    handleDrawerClose: () => void;
+    drawerWidth?: number;
+    leftOffset?: string;
+    filterContent: JSX.Element;
+    bottomFilter?: JSX.Element;
+    headerLabel?: string;
+    isComponentLevelDrawer?: boolean;
+    mainProps?: BoxProps;
+};
+
+export declare function InkChip({ maxWidth, chipProps, size, }: InkChipPropType): JSX_2.Element;
+
+export declare function InkChipGroup({ chipList, numTagsToDisplay, size, maxChipWidth, }: InkChipGroupProps): JSX_2.Element;
+
+declare type InkChipGroupProps = {
+    chipList: ChipProps[];
+    numTagsToDisplay?: number;
+    size?: 'small' | 'medium';
+    maxChipWidth?: number;
+};
+
+declare type InkChipPropType = {
+    maxWidth?: number;
+    chipProps: ChipProps;
+    size?: 'small' | 'medium';
+};
+
+export declare function InkDialog({ Title, Content, Actions, onClose, hideCloseButton, ActionsProp, ...props }: InkDialogProps): JSX_2.Element;
+
+export declare const inkDialog: InkDialogPageObject;
+
+export declare class InkDialogPageObject {
+    BASE_ATTRIBUTE: string;
+    get element(): Cypress.Chainable<JQuery<HTMLElement>>;
+    get paper(): Cypress.Chainable<JQuery<HTMLElement>>;
+    get primaryAction(): Cypress.Chainable<JQuery<HTMLElement>>;
+    get secondaryAction(): Cypress.Chainable<JQuery<HTMLElement>>;
+    get cancelAction(): Cypress.Chainable<JQuery<HTMLElement>>;
+    get dialogTrigger(): Cypress.Chainable<JQuery<HTMLElement>>;
+    get closeTrigger(): Cypress.Chainable<JQuery<HTMLElement>>;
+    get title(): Cypress.Chainable<JQuery<HTMLElement>>;
+    isOpen(): void;
+    isClosed(): void;
+    openDialog(): void;
+    closeDialog(): void;
+    hasPrimaryAction(label: string): void;
+    hasSecondaryAction(label: string): void;
+    hasCancelAction(label: string): void;
+    hasTitle(title: string): void;
+}
+
+declare type InkDialogProps = DialogProps & {
+    Title?: string | JSX.Element;
+    Content?: JSX.Element;
+    Actions?: JSX.Element;
+    hideCloseButton?: boolean;
+    onClose: (e?: default_2.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    ActionsProp?: ActionsPropType;
+};
+
+export declare function InkEmptyState({ title, description, action, variant, icon, sx, }: InkEmptyStateProps): JSX_2.Element;
+
+declare type InkEmptyStateProps = {
+    title?: string;
+    description?: string;
+    action?: ActionType;
+    variant: VariantType;
+    icon?: JSX.Element | OverridableComponent<SvgIconTypeMap<object, 'svg'>>;
+    sx?: SxProps<Theme>;
+};
+
+export declare function InkPageHeader({ Breadcrumbs, Subtitle, Metadata, Chips, ButtonGroup, Tabs, sx, }: InkPageHeaderProps): JSX_2.Element;
+
+declare type InkPageHeaderProps = {
+    Breadcrumbs?: JSX.Element;
+    Subtitle?: JSX.Element;
+    Metadata?: JSX.Element;
+    ButtonGroup?: JSX.Element;
+    Chips?: JSX.Element;
+    Tabs?: JSX.Element;
+    sx?: SxProps<Theme>;
+};
+
+export declare function InkPaper({ Header, Description, Icon, CTA, children, ...props }: InkPaperProps): JSX_2.Element;
+
+declare type InkPaperProps = PaperProps & {
+    Header: string | JSX.Element;
+    Description?: string;
+    Icon?: JSX.Element;
+    CTA?: JSX.Element;
+};
+
+export declare function InkPersistentFilterDrawer({ isOpen, handleDrawerClose, children, drawerWidth, leftOffset, //primary nav width when closed and when open
+    filterContent, bottomFilter, headerLabel, sx, isComponentLevelDrawer, mainProps, }: PropsWithChildren<IFilterDrawer>): JSX_2.Element;
+
+export declare const InkRadioTiles: ({ name, options, value, ref, direction, cardSx, fullWidth, disabled, onChange, onBlur, }: InkRadioTilesProps) => JSX_2.Element;
+
+declare type InkRadioTilesProps = {
+    name: string;
+    options: Option_2[];
+    onChange: (e: default_2.ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: () => void;
+    value: string | number;
+    ref?: Ref<HTMLDivElement>;
+    direction?: 'row' | 'column';
+    cardSx?: SxProps<Theme>;
+    fullWidth?: boolean;
+    disabled?: boolean;
+};
+
+export declare function InkSelect<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ id, label, menuOptions, name, control, inputProps, rules, helperText, sx, variant, required, placeholder, children, ...rest }: InkSelectProps<TFieldValues, TName> & SelectProps<string>): JSX_2.Element;
+
+export declare class inkSelect {
+    baseAttribute: string;
+    name: string;
+    static create(name: string): inkSelect;
+    constructor(name: string);
+    get element(): Cypress.Chainable<JQuery<HTMLElement>>;
+    get menuElement(): Cypress.Chainable<JQuery<HTMLElement>>;
+    get label(): Cypress.Chainable<JQuery<HTMLElement>>;
+    get select(): Cypress.Chainable<JQuery<HTMLElement>>;
+    get input(): Cypress.Chainable<JQuery<HTMLElement>>;
+    get options(): Cypress.Chainable<JQuery<HTMLElement>>;
+    option(value: string): Cypress.Chainable<JQuery<HTMLElement>>;
+    get helperText(): Cypress.Chainable<JQuery<HTMLElement>>;
+    hasHelperText(value: string): Cypress.Chainable<JQuery<HTMLElement>>;
+    hasLabel(value: string): Cypress.Chainable<JQuery<HTMLElement>>;
+    hasDisplayValue(value: string): Cypress.Chainable<JQuery<HTMLElement>>;
+    hasValue(value: string): Cypress.Chainable<JQuery<HTMLElement>>;
+    hasOption(label: string, value: string, index?: number): void;
+    closeMenu(): void;
+    openMenu(): void;
+}
+
+declare type InkSelectProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = {
+    id: string;
+    label?: string;
+    menuOptions?: MenuOption[];
+    variant?: 'filled' | 'outlined';
+    placeholder?: string;
+    helperText?: string;
+    required?: boolean;
+    sx?: SxProps<Theme>;
+} & UseControllerProps<TFieldValues, TName> & SelectProps<string>;
+
+export declare function InkSwitch({ id, label, labelPlacement, sx, ...rest }: InkSwitchProps): JSX_2.Element;
+
+declare type InkSwitchProps = {
+    id: string;
+    label?: string;
+    labelPlacement?: 'start' | 'end' | 'top' | 'bottom';
+} & SwitchProps;
+
+export declare function InkToggleIcon({ value, size, ariaLabel, icon, ...rest }: InkToggleIconProps): JSX_2.Element;
+
+export declare function InkToggleIconGroup({ id, toggleButtons, ariaLabel, size, single, value, onChange, sx, ...rest }: InkToggleIconGroupProps): JSX_2.Element;
+
+declare type InkToggleIconGroupProps = ToggleButtonGroupProps & {
+    id: string;
+    toggleButtons: {
+        value: string | number;
+        icon: JSX.Element;
+        disabled?: boolean;
+    }[];
+    ariaLabel?: string;
+    size?: 'x-small' | 'small' | 'medium' | 'large';
+    single?: boolean;
+};
+
+declare type InkToggleIconProps = ToggleButtonProps & {
+    ariaLabel?: string;
+    size?: 'x-small' | 'small' | 'medium' | 'large';
+    icon: JSX.Element;
+    value: string | number;
+};
+
+export declare function InkToggleText({ value, label, size, ariaLabel, ...rest }: InkToggleTextProps): JSX_2.Element;
+
+export declare function InkToggleTextGroup({ id, toggleButtons, ariaLabel, value, size, single, sx, onChange, ...rest }: InkToggleTextGroupProps): JSX_2.Element;
+
+declare type InkToggleTextGroupProps = ToggleButtonGroupProps & {
+    id: string;
+    toggleButtons: {
+        value: string | number;
+        label?: string;
+        disabled?: boolean;
+    }[];
+    ariaLabel?: string;
+    size?: 'x-small' | 'small' | 'medium' | 'large';
+    single?: boolean;
+};
+
+declare type InkToggleTextProps = ToggleButtonProps & {
+    ariaLabel?: string;
+    size?: 'x-small' | 'small' | 'medium' | 'large';
+    label?: string;
+    value: string | number;
+};
+
+export declare function InkWorkflowHeader({ label, Stepper, ButtonGroup, }: InkWorkflowHeaderProps): JSX_2.Element;
+
+declare type InkWorkflowHeaderProps = {
+    label: string;
+    Stepper?: JSX.Element;
+    ButtonGroup: JSX.Element;
+};
+
+declare type LayoutDetailsProps = GridProps & {
+    Header: JSX.Element;
+    children: React.ReactNode;
+};
+
+export declare function LinkBreadcrumbs({ breadcrumbs }: BreadcrumbProps): JSX_2.Element;
+
+declare type MenuOption = MenuItemProps & {
+    label: string;
+    group?: string;
+};
+
+declare type MenuOptionType = {
+    label: ReactNode;
+    onClick: () => void;
+    menuItemProps?: Partial<MenuItemProps>;
+};
+
+declare type MetaDataProps = {
+    metadata: HeaderMetadataType[];
+};
+
+export declare const MovableUITheme: Theme;
+
+declare interface Option_2 {
+    value: string;
+    icon?: JSX.Element;
+    title: string;
+    description?: string;
+    subDescription?: string;
+}
+
+export declare function PageHeaderActionButtons({ primaryAction, secondaryAction, dropdownAction, }: PageHeaderActionButtonsProps): JSX_2.Element;
+
+declare type PageHeaderActionButtonsProps = {
+    primaryAction?: ButtonPropsType;
+    secondaryAction?: ButtonPropsType;
+    dropdownAction?: DropdownActionType;
+};
+
+declare type VariantType = 'page' | 'paper' | 'search' | 'data';
+
+export { }
+
+declare module '@mui/material/styles' {
+    interface Palette {
+        ai: Palette['primary'];
+    }
+    interface PaletteOptions {
+        ai?: PaletteOptions['primary'];
+    }
+    interface PaletteColor {
+        hover?: string;
+        selected?: string;
+        focus?: string;
+        focusVisible?: string;
+        outlinedBorder?: string;
+    }
+    interface Palette {
+        focusVisible: string;
+        blue50: string;
+        blue100: string;
+        blue200: string;
+        blue300: string;
+        blue400: string;
+        blue500: string;
+        blue600: string;
+        blue700: string;
+        blue800: string;
+        blue900: string;
+        blueA100: string;
+        blueA200: string;
+        blueA400: string;
+        blueA700: string;
+        blue1000: string;
+        green50: string;
+        green100: string;
+        green200: string;
+        green300: string;
+        green400: string;
+        green500: string;
+        green600: string;
+        green700: string;
+        green800: string;
+        green900: string;
+        green1000: string;
+        greenA100: string;
+        greenA200: string;
+        greenA400: string;
+        greenA700: string;
+        greenA900: string;
+        lightBlue50: string;
+        lightBlue100: string;
+        lightBlue200: string;
+        lightBlue300: string;
+        lightBlue400: string;
+        lightBlue500: string;
+        lightBlue600: string;
+        lightBlue700: string;
+        lightBlue800: string;
+        lightBlue900: string;
+        lightBlue1000: string;
+        lightBlueA100: string;
+        lightBlueA200: string;
+        lightBlueA400: string;
+        lightBlueA700: string;
+        lightGreen50: string;
+        lightGreen100: string;
+        lightGreen200: string;
+        lightGreen300: string;
+        lightGreen400: string;
+        lightGreen500: string;
+        lightGreen600: string;
+        lightGreen700: string;
+        lightGreen800: string;
+        lightGreen900: string;
+        neutral00: string;
+        neutral50: string;
+        neutral100: string;
+        neutral200: string;
+        neutral300: string;
+        neutral400: string;
+        neutral500: string;
+        neutral600: string;
+        neutral700: string;
+        neutral800: string;
+        neutral900: string;
+        neutralA100: string;
+        neutralA200: string;
+        neutralA400: string;
+        neutralA700: string;
+        orange50: string;
+        orange100: string;
+        orange200: string;
+        orange300: string;
+        orange400: string;
+        orange500: string;
+        orange600: string;
+        orange700: string;
+        orange800: string;
+        orange900: string;
+        orange1000: string;
+        orangeA100: string;
+        orangeA200: string;
+        orangeA400: string;
+        orangeA700: string;
+        purple50: string;
+        purple100: string;
+        purple200: string;
+        purple300: string;
+        purple400: string;
+        purple500: string;
+        purple600: string;
+        purple700: string;
+        purple800: string;
+        purple900: string;
+        purple1000: string;
+        purpleA100: string;
+        purpleA200: string;
+        purpleA400: string;
+        purpleA700: string;
+        yellow50: string;
+        yellow100: string;
+        yellow200: string;
+        yellow300: string;
+        yellow400: string;
+        yellow500: string;
+        yellow600: string;
+        yellow700: string;
+        yellow800: string;
+        yellow900: string;
+        yellow1000: string;
+        yellowA100: string;
+        yellowA200: string;
+        yellowA400: string;
+        yellowA700: string;
+        red50: string;
+        red100: string;
+        red200: string;
+        red300: string;
+        red400: string;
+        red500: string;
+        red600: string;
+        red700: string;
+        red800: string;
+        red900: string;
+        red1000: string;
+        redA100: string;
+        redA200: string;
+        redA400: string;
+        redA700: string;
+        cyan50: string;
+        cyan100: string;
+        cyan200: string;
+        cyan300: string;
+        cyan400: string;
+        cyan500: string;
+        cyan600: string;
+        cyan700: string;
+        cyan800: string;
+        cyan900: string;
+        cyan1000: string;
+        cyanA100: string;
+        cyanA200: string;
+        cyanA400: string;
+        cyanA700: string;
+        deepPurple50: string;
+        deepPurple100: string;
+        deepPurple200: string;
+        deepPurple300: string;
+        deepPurple400: string;
+        deepPurple500: string;
+        deepPurple600: string;
+        deepPurple700: string;
+        deepPurple800: string;
+        deepPurple900: string;
+        deepPurple1000: string;
+        deepPurpleA100: string;
+        deepPurpleA200: string;
+        deepPurpleA400: string;
+        deepPurpleA700: string;
+    }
+    interface PalletteOptions {
+        focusVisible: string;
+        neutral50: string;
+        neutral100: string;
+        neutral200: string;
+        neutral300: string;
+        neutral400: string;
+        neutral500: string;
+        neutral600: string;
+        neutral700: string;
+        neutral800: string;
+        neutral900: string;
+        neutralA100: string;
+        neutralA200: string;
+        neutralA400: string;
+        neutralA700: string;
+        blue50: string;
+        blue100: string;
+        blue200: string;
+        blue300: string;
+        blue400: string;
+        blue500: string;
+    }
+}
+
+
+declare module '@mui/material/Button' {
+    interface ButtonPropsColorOverrides {
+        ai: true;
+    }
+    interface ButtonPropsVariantOverrides {
+        card: true;
+    }
+}
+
+
+declare module '@mui/material/ToggleButton' {
+    interface ToggleButtonPropsSizeOverrides {
+        'x-small': true;
+    }
+}
+
+
+declare module '@mui/material/ToggleButtonGroup' {
+    interface ToggleButtonGroupPropsSizeOverrides {
+        'x-small': true;
+    }
+}
+
+
+declare module '@mui/material/Icon' {
+    interface IconPropsSizeOverrides {
+        'x-small': true;
+    }
+}
+
+
+declare module '@mui/material/Alert' {
+    interface AlertPropsVariantOverrides {
+        snackbar: true;
+        standard: true;
+        filled: false;
+        outlined: false;
+    }
+}
+
+
+declare module '@mui/material/Chip' {
+    interface ChipPropsVariantOverrides {
+        contrastFilled: true;
+    }
+    interface ChipPropsColorOverrides {
+        ai: true;
+        inProgress: true;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@movable/ui",
-  "version": "1.16.0",
+  "version": "1.17.0-alpha.1",
   "description": "Movable Ink's shared MUI components and MUI theme for our vite applications",
   "module": "lib/index.mjs",
   "types": "lib/index.d.ts",
@@ -45,9 +45,9 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@movable/prettier-config": "^2.0.0",
-    "@mui/x-data-grid-premium": "^6.19.5",
     "@mui/icons-material": "^5.16.7",
     "@mui/material": "^5.16.7",
+    "@mui/x-data-grid-premium": "^6.19.5",
     "@percy/cli": "^1.28.2",
     "@percy/cypress": "^3.1.2",
     "@percy/storybook": "^6.0.0",
@@ -89,14 +89,15 @@
     "release-it": "^16.1.3",
     "storybook": "^8.1.0",
     "typescript": "^5.6.2",
-    "vite": "^5.4.3"
+    "vite": "^5.4.3",
+    "vite-plugin-dts": "^4.3.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/x-data-grid-premium": "^6.19.5",
     "@mui/icons-material": "^5.16.7",
     "@mui/material": "^5.16.7",
+    "@mui/x-data-grid-premium": "^6.19.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package/lib/components/Chip/InkChip.d.ts

@@ -1,8 +0,0 @@
-import { ChipProps } from '@mui/material';
-type InkChipPropType = {
-    maxWidth?: number;
-    chipProps: ChipProps;
-    size?: 'small' | 'medium';
-};
-export declare function InkChip({ maxWidth, chipProps, size, }: InkChipPropType): import("react/jsx-runtime").JSX.Element;
-export {};

package/lib/components/Chip/index.d.ts

@@ -1 +0,0 @@
-export { InkChip } from './InkChip';

package/lib/components/ChipGroup/InkChipGroup.d.ts

@@ -1,9 +0,0 @@
-import { ChipProps } from '@mui/material';
-type InkChipGroupProps = {
-    chipList: ChipProps[];
-    numTagsToDisplay?: number;
-    size?: 'small' | 'medium';
-    maxChipWidth?: number;
-};
-export declare function InkChipGroup({ chipList, numTagsToDisplay, size, maxChipWidth, }: InkChipGroupProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/lib/components/ChipGroup/index.d.ts

@@ -1 +0,0 @@
-export { InkChipGroup } from './InkChipGroup';

package/lib/components/DemoComponent.d.ts

@@ -1,5 +0,0 @@
-type DemoComponentProps = {
-    stringToDisplay: string;
-};
-export declare function DemoComponent({ stringToDisplay }: DemoComponentProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/lib/components/Dialog/ActionButtonHelper.d.ts

@@ -1,4 +0,0 @@
-import { ButtonProps } from '@mui/material';
-import { ReactNode } from 'react';
-export declare const getButtonElements: (element: ReactNode) => ReactNode[];
-export declare const addContainedVariantToPrimaryButton: <T extends React.ReactNode>(element: T, primaryButton: React.ReactElement<ButtonProps> | null) => React.ReactNode;

package/lib/components/Dialog/DialogIcons.d.ts

@@ -1,5 +0,0 @@
-type DialogIconType = {
-    variant: 'primary' | 'warning' | 'destructive';
-};
-export declare function DialogIcons({ variant }: DialogIconType): import("react/jsx-runtime").JSX.Element | null;
-export {};