@itcase/ui 1.8.101 → 1.8.102

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

@@ -1,5 +1,53 @@
 import React from 'react';
-import type { ModalConfig } from './Modal.interface';
+import type { ModalConfig, ModalRef } from './Modal.interface';
 declare const modalConfig: ModalConfig;
-declare const Modal: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;
+declare const Modal: React.ForwardRefExoticComponent<{
+    borderColor?: import("@itcase/types").BorderColorProps;
+    borderType?: import("@itcase/types").BorderTypeProps;
+    borderWidth?: import("@itcase/types").BorderWidthProps;
+    closeIconAppearance?: import("@itcase/types").CompositeAppearanceIconKeys;
+    closeIconAppearanceSize?: import("@itcase/types").CompositeAppearanceIconKeys;
+    closeIconFillSize?: import("@itcase/types").IconFillSizeProps;
+    closeIconImage?: string;
+    closeIconShape?: import("@itcase/types").ShapeProps;
+    closeIconSize?: import("@itcase/types").IconSizeProps;
+    elevation?: import("@itcase/types").ElevationProps;
+    fill?: import("@itcase/types").FillProps;
+    itemFill?: import("@itcase/types").ItemFillProps;
+    overlayFill?: import("../Overlay/Overlay.interface").OverlayProps["fill"];
+    overlayOpacity?: import("../Overlay/Overlay.interface").OverlayProps["opacity"];
+    shape?: import("@itcase/types").ShapeProps;
+    shapeStrength?: import("@itcase/types").ShapeStrengthProps;
+    size?: import("@itcase/types").SizeProps;
+    textColor?: import("@itcase/types").TextColorProps;
+    textSize?: import("@itcase/types").TextSizeProps;
+    titleTextColor?: import("@itcase/types").TextColorProps;
+    titleTextColorHover?: import("@itcase/types").TextColorHoverProps;
+    titleTextSize?: import("@itcase/types").TitleSizeProps;
+    titleTextTruncate?: boolean;
+    titleTextWeight?: import("@itcase/types").TextWeightProps;
+    titleTextWidth?: import("@itcase/types").TextWeightProps;
+    titleTextWrap?: import("@itcase/types").TextWrapProps;
+} & import("../../hooks/useStyles/styleAttributes.interface").StyleAttributes & {
+    id?: string;
+    appearance?: import("@itcase/types").CompositeAppearanceKey;
+    children?: React.ReactNode;
+    className?: string;
+    contentClassName?: string;
+    dataTestId?: string;
+    dataTour?: string;
+    isCloseOnBlur?: boolean;
+    isOverlay?: boolean;
+    isScrollOnOpen?: boolean;
+    isSetFocusOnOpen?: boolean;
+    isSkeleton?: boolean;
+    modalQuerySelector?: string;
+    onClickOverlay: import("../Overlay/Overlay.interface").OverlayProps["onClick"];
+    onCloseModal?: () => void;
+    onOpenModal?: () => void;
+    scroll?: boolean;
+    stickyHeader?: boolean;
+    style?: React.CSSProperties;
+    title?: string;
+} & React.RefAttributes<ModalRef>>;
 export { Modal, modalConfig };

package/dist/types/components/Modal/Modal.interface.d.ts

@@ -1,51 +1,69 @@
-import type { FocusEvent, MouseEvent, MouseEventHandler, ReactNode } from 'react';
-import { AppearanceKeysDefault, BorderColorProps, ElevationProps, FillGradientProps, FillProps, ShapeProps } from '@itcase/types';
-import type { StyleAttributes } from 'src/hooks/useStyles/styleAttributes.interface';
-export interface ModalThemeColor {
-    [key: number | string | symbol]: any;
+import { CSSProperties, MouseEventHandler, ReactNode } from 'react';
+import { AppearanceKeysDefault, AppearanceShapeKey, AppearanceSizeKey, AppearanceStyleKey, BorderColorProps, BorderTypeProps, BorderWidthProps, CompositeAppearanceIconKeys, CompositeAppearanceKey, ElevationProps, FillProps, IconFillSizeProps, IconSizeProps, ItemFillProps, ShapeProps, ShapeStrengthProps, SizeProps, TextColorHoverProps, TextColorProps, TextSizeProps, TextWeightProps, TextWrapProps, TitleSizeProps } from '@itcase/types';
+import { StyleAttributes } from 'src/hooks/useStyles/styleAttributes.interface';
+import { OverlayProps } from '../Overlay/Overlay.interface';
+type ModalAppearanceProps = {
     borderColor?: BorderColorProps;
+    borderType?: BorderTypeProps;
+    borderWidth?: BorderWidthProps;
+    closeIconAppearance?: CompositeAppearanceIconKeys;
+    closeIconAppearanceSize?: CompositeAppearanceIconKeys;
+    closeIconFillSize?: IconFillSizeProps;
+    closeIconImage?: string;
+    closeIconShape?: ShapeProps;
+    closeIconSize?: IconSizeProps;
     elevation?: ElevationProps;
     fill?: FillProps;
-    overlayFill?: FillProps;
-    overlayFillGradient?: FillGradientProps;
-    overlayOpacity?: string;
+    itemFill?: ItemFillProps;
+    overlayFill?: OverlayProps['fill'];
+    overlayOpacity?: OverlayProps['opacity'];
     shape?: ShapeProps;
-    isOverlay?: boolean;
-}
-type AppearanceKeys = AppearanceKeysDefault & {};
-export type ModalAppearance = {
-    [key in AppearanceKeys]?: ModalThemeColor;
+    shapeStrength?: ShapeStrengthProps;
+    size?: SizeProps;
+    textColor?: TextColorProps;
+    textSize?: TextSizeProps;
+    titleTextColor?: TextColorProps;
+    titleTextColorHover?: TextColorHoverProps;
+    titleTextSize?: TitleSizeProps;
+    titleTextTruncate?: boolean;
+    titleTextWeight?: TextWeightProps;
+    titleTextWidth?: TextWeightProps;
+    titleTextWrap?: TextWrapProps;
 };
-export interface ModalConfig {
-    [key: number | string | symbol]: any;
-    appearance: ModalAppearance | undefined;
-    setAppearance: (newComponent: ModalAppearance) => void;
-}
-interface ModalLoaderProps {
-}
-interface ModalRef {
-    closeModal: MouseEventHandler<HTMLDivElement>;
-    modalElement: Element | HTMLDivElement | null;
-    openModal: () => void;
-    isOpen: boolean;
-}
-interface ModalProps extends ModalThemeColor, StyleAttributes {
+type ModalProps = ModalAppearanceProps & StyleAttributes & {
     id?: string;
-    [key: number | string | symbol]: any;
-    appearance?: AppearanceKeys;
+    appearance?: CompositeAppearanceKey;
     children?: ReactNode;
     className?: string;
-    closeButton?: ReactNode;
     contentClassName?: string;
-    debug?: boolean;
-    modalQuerySelector?: string;
-    overlayClassName?: string;
+    dataTestId?: string;
+    dataTour?: string;
     isCloseOnBlur?: boolean;
-    isOpen: boolean;
+    isOverlay?: boolean;
     isScrollOnOpen?: boolean;
     isSetFocusOnOpen?: boolean;
-    onClickOverlay?: () => void;
-    onCloseModal?: (event?: FocusEvent<HTMLDivElement> | MouseEvent<HTMLDivElement>) => void;
+    isSkeleton?: boolean;
+    modalQuerySelector?: string;
+    onClickOverlay: OverlayProps['onClick'];
+    onCloseModal?: () => void;
     onOpenModal?: () => void;
-}
-export type { ModalLoaderProps, ModalRef, ModalProps };
+    scroll?: boolean;
+    stickyHeader?: boolean;
+    style?: CSSProperties;
+    title?: string;
+};
+type ModalRef = {
+    closeModal: MouseEventHandler<HTMLDivElement>;
+    isOpen: boolean;
+    modalElement: Element | HTMLDivElement | null;
+    openModal: () => void;
+};
+type ModalAppearanceKey = AppearanceKeysDefault | AppearanceShapeKey | AppearanceSizeKey | AppearanceStyleKey;
+type ModalAppearance = {
+    [key in ModalAppearanceKey]?: ModalAppearanceProps;
+};
+type ModalConfig = {
+    appearance: ModalAppearance;
+    setAppearance: (appearanceConfig: ModalAppearance) => void;
+};
+export type { ModalAppearance, ModalConfig, ModalProps, ModalRef };

package/dist/types/components/Modal/appearance/modalShape.d.ts

@@ -1,25 +1,3 @@
-declare const modalAppearanceShape: {
-    circular: {
-        shape: string;
-    };
-    rounded: {
-        shape: string;
-    };
-    roundedS: {
-        shape: string;
-        shapeStrength: string;
-    };
-    roundedM: {
-        shape: string;
-        shapeStrength: string;
-    };
-    roundedL: {
-        shape: string;
-        shapeStrength: string;
-    };
-    roundedXL: {
-        shape: string;
-        shapeStrength: string;
-    };
-};
+import { ModalAppearance } from '../Modal.interface';
+declare const modalAppearanceShape: ModalAppearance;
 export { modalAppearanceShape };

package/dist/types/components/Modal/appearance/modalSize.d.ts

@@ -1,27 +1,3 @@
-declare const modalAppearanceSize: {
-    sizeXL: {
-        size: string;
-        titleTextSize: string;
-        closeIconAppearanceSize: string;
-        closeIconImage: string;
-    };
-    sizeL: {
-        size: string;
-        titleTextSize: string;
-        closeIconAppearanceSize: string;
-        closeIconImage: string;
-    };
-    sizeM: {
-        size: string;
-        titleTextSize: string;
-        closeIconAppearanceSize: string;
-        closeIconImage: string;
-    };
-    sizeS: {
-        size: string;
-        titleTextSize: string;
-        closeIconAppearanceSize: string;
-        closeIconImage: string;
-    };
-};
+import { ModalAppearance } from '../Modal.interface';
+declare const modalAppearanceSize: ModalAppearance;
 export { modalAppearanceSize };

package/dist/types/components/Modal/appearance/modalStyle.d.ts

@@ -1,14 +1,3 @@
-declare const modalAppearanceStyle: {
-    solid: {
-        borderColor: string;
-    };
-    outlined: {
-        fill: string;
-    };
-    full: {};
-    ghost: {
-        fill: string;
-        borderColor: string;
-    };
-};
+import { ModalAppearance } from '../Modal.interface';
+declare const modalAppearanceStyle: ModalAppearance;
 export { modalAppearanceStyle };

package/dist/types/components/Modal/appearance/modalSurface.d.ts

@@ -1,8 +1,3 @@
-declare const modalAppearanceSurface: {
-    surfacePrimary: {
-        fill: string;
-        borderColor: string;
-        closeIconAppearance: string;
-    };
-};
+import { ModalAppearance } from '../Modal.interface';
+declare const modalAppearanceSurface: ModalAppearance;
 export { modalAppearanceSurface };

package/dist/types/components/Overlay/Overlay.interface.d.ts

@@ -1,4 +1,5 @@
-import { AppearanceKeysDefault, FillGradientProps, FillProps } from '@itcase/types';
+import { MouseEventHandler } from 'react';
+import { AppearanceKeysDefault, OpacityProps, OverlayFillProps } from '@itcase/types';
 import type { StyleAttributes } from 'src/hooks/useStyles/styleAttributes.interface';
 export interface OverlayThemeColor {
 }
@@ -15,11 +16,10 @@ interface OverlayProps extends OverlayThemeColor, StyleAttributes {
     [key: number | string | symbol]: any;
     appearance?: AppearanceKeys;
     className?: string;
-    fill?: FillProps;
-    fillGradient?: FillGradientProps;
-    opacity?: string;
+    fill?: OverlayFillProps;
+    opacity?: OpacityProps;
     type?: string;
     isOverlay?: boolean;
-    onClick?: () => void;
+    onClick?: MouseEventHandler<HTMLDivElement>;
 }
 export type { OverlayProps };

package/dist/types/components/Title/Title.interface.d.ts

@@ -45,7 +45,7 @@ export interface TitleProps extends TitleThemeColor, StyleAttributes {
     tag?: ElementType;
     text?: string;
     textAlign?: TextAlignProps;
-    textTruncate?: string;
+    textTruncate?: boolean;
     type?: string;
     onClick?: () => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.8.101",
+  "version": "1.8.102",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -141,7 +141,7 @@
     "@commitlint/config-conventional": "^19.8.1",
     "@itcase/config": "^1.0.55",
     "@itcase/lint": "^1.1.37",
-    "@itcase/types": "^1.0.27",
+    "@itcase/types": "^1.0.30",
     "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.6",
@@ -171,7 +171,7 @@
     "lint-staged": "^16.1.5",
     "prettier": "^3.6.2",
     "react-docgen-typescript": "^2.4.0",
-    "rollup": "^4.46.4",
+    "rollup": "^4.47.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.2.3",
     "rollup-plugin-peer-deps-external": "^2.2.4",