magneto365.ui 2.74.0 → 2.75.0

package/dist/cjs/types/components/UI/atoms/InlineDetails/InlineDetails.component.d.ts

@@ -0,0 +1,3 @@
+import { IInlineDetails } from './InlineDetails.interface';
+export declare function InlineDetails({ details, className }: Readonly<IInlineDetails>): JSX.Element;
+export default InlineDetails;

package/dist/cjs/types/components/UI/atoms/InlineDetails/InlineDetails.interface.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Interface for the InLineDetails component
+ */
+export interface IInlineDetails {
+    /**
+     * Array of strings that will be displayed in a single line, separated by " | "
+     */
+    details: string[];
+    /**
+     * Optional className to apply custom styles to the wrapper element
+     */
+    className?: string;
+}

package/dist/cjs/types/components/UI/atoms/InlineDetails/index.d.ts

@@ -0,0 +1,2 @@
+export * from './InlineDetails.interface';
+export { default as InlineDetails } from './InlineDetails.component';

package/dist/cjs/types/components/UI/atoms/index.d.ts

@@ -42,3 +42,4 @@ export * from './Text';
 export * from './ToggleButton';
 export * from './Typography';
 export * from './UserMenuButtonAnalyst';
+export * from './InlineDetails';

package/dist/cjs/types/components/UI/molecules/Drawer/Drawer.interface.d.ts

@@ -46,6 +46,11 @@ export interface IDrawer {
      * this property sets custom styles into background drawer
      */
     backGroundClassName?: string;
+    /**
+     * An optional custom container where the Drawer Portal will be rendered.
+     * If not provided, it will use the body.
+     */
+    customContainer?: IDrawerPortal['customContainer'];
 }
 /**
  * This interface represents a Portal for the Drawer component.
@@ -56,4 +61,9 @@ export interface IDrawerPortal {
      * It can be a single JSX element, an array of JSX elements, or `false` to indicate no content.
      */
     children: false | JSX.Element | JSX.Element[];
+    /**
+     * An optional custom container where the Drawer Portal will be rendered.
+     * If not provided, it will use the body.
+     */
+    customContainer?: HTMLElement | ShadowRoot;
 }

package/dist/cjs/types/components/UI/molecules/PortalTooltip/PortalTooltip.component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IPortalTooltipProps } from './PortalTooltip.interface';
+export declare const PortalTooltip: React.FC<IPortalTooltipProps>;

package/dist/cjs/types/components/UI/molecules/PortalTooltip/PortalTooltip.interface.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+import { TPosition } from '../Tooltip/Tooltip.interface';
+export interface IPortalTooltipProps {
+    /**
+     * this property set the tooltip title
+     */
+    title: string;
+    /**
+     * this property set the tooltip position
+     * @default 'bottom'
+     */
+    position?: TPosition;
+    /**
+     * the tooltip component must wrap a component. This needs to be able to hold a ref
+     */
+    children: React.ReactElement;
+    /**
+     * this property set the tooltip visibility
+     * @default true
+     */
+    visible?: boolean;
+    /**
+     * this property set the tooltip width
+     * @default 'fit-content'
+     */
+    width?: string;
+    /**
+     * this property sets delay in milliseconds before the tooltip appears
+     */
+    enterDelay?: number;
+    /**
+     * this property sets delay in milliseconds before the tooltip disappears
+     */
+    leaveDelay?: number;
+    /**
+     * this property sets the offset in pixels for the tooltip position relative to the target element
+     * @default 8
+     */
+    offset?: number;
+    /**
+     * this property set the tooltip arrow visibility
+     * @default true
+     */
+    hasArrow?: boolean;
+}

package/dist/cjs/types/components/UI/molecules/PortalTooltip/hooks/usePortalTooltip.hook.d.ts

@@ -0,0 +1,7 @@
+declare const usePortalTooltip: (visible: boolean, enterDelay?: number | undefined, leaveDelay?: number | undefined) => {
+    open: boolean;
+    tooltipContainer: HTMLElement | ShadowRoot;
+    showTooltip: () => void;
+    hideTooltip: () => void;
+};
+export default usePortalTooltip;

package/dist/cjs/types/components/UI/molecules/PortalTooltip/hooks/usePortalTooltipPosition.hook.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+declare const usePortalTooltipPosition: (open: boolean, offset: number, position: string) => {
+    coords: {
+        top: number;
+        left: number;
+    };
+    triggerRef: import("react").RefObject<HTMLDivElement>;
+    tooltipRef: import("react").RefObject<HTMLDivElement>;
+};
+export default usePortalTooltipPosition;

package/dist/cjs/types/components/UI/molecules/PortalTooltip/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PortalTooltip.interface';
+export { PortalTooltip } from './PortalTooltip.component';

package/dist/cjs/types/components/UI/molecules/ScrollableTab/ScrollableTab.component.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IScrollableTab } from './ScrollableTab.interface';
+/**
+ * Molecule UI for ScrollableTab
+ */
+export declare const ScrollableTab: React.FC<IScrollableTab>;

package/dist/cjs/types/components/UI/molecules/ScrollableTab/ScrollableTab.interface.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export interface IScrollableTab {
+    children: React.ReactNode | React.ReactNode[];
+    /**
+     * Optional prop to set the scroll amount when clicking the arrows
+     * @default 100
+     */
+    scrollAmount?: number;
+    /**
+     * Optional prop to add custom className
+     */
+    className?: string;
+}

package/dist/cjs/types/components/UI/molecules/ScrollableTab/hooks/useScrollableTab.hook.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare const useScrollableTab: () => {
+    showLeftArrow: boolean;
+    showRightArrow: boolean;
+    containerRef: React.RefObject<HTMLDivElement>;
+    handleScrollByAmount: (amount: number) => void | undefined;
+};
+export default useScrollableTab;

package/dist/cjs/types/components/UI/molecules/ScrollableTab/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ScrollableTab.interface';
+export { ScrollableTab } from './ScrollableTab.component';

package/dist/cjs/types/components/UI/molecules/TabItem/TabItem.component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ITabItem } from './TabItem.interface';
+export declare const TabItem: React.FC<ITabItem>;

package/dist/cjs/types/components/UI/molecules/TabItem/TabItem.interface.d.ts

@@ -0,0 +1,24 @@
+export interface ITabItem {
+    /**
+     * Tab item text
+     */
+    text: string;
+    /**
+     * Tab item action
+     */
+    onClick?: () => void;
+    /**
+     * Tab item styles
+     */
+    className?: string;
+    /**
+     * Tab item disabled state
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Tab item selected state
+     * @default false
+     */
+    isSelected?: boolean;
+}

package/dist/cjs/types/components/UI/molecules/TabItem/TabItem.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { TabItem } from './TabItem.component';
+declare const meta: Meta<typeof TabItem>;
+declare type Story = StoryObj<typeof TabItem>;
+export declare const Default: Story;
+export declare const Disabled: Story;
+export declare const Selected: Story;
+export default meta;

package/dist/cjs/types/components/UI/molecules/TabItem/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TabItem.interface';
+export { TabItem } from './TabItem.component';

package/dist/cjs/types/components/UI/molecules/Tooltip/Tooltip.interface.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type TPosition = 'top' | 'bottom' | 'left' | 'right';
+export declare type TPosition = 'top' | 'bottom' | 'left' | 'right';
 export interface ITooltipProps {
     /**
      * this property set the tooltip title
@@ -22,4 +22,3 @@ export interface ITooltipProps {
      */
     visible?: boolean;
 }
-export {};

package/dist/cjs/types/components/UI/molecules/index.d.ts

@@ -81,5 +81,8 @@ export * from './Tooltip';
 export * from './UserMenu';
 export * from './UserMenuAnalyst';
 export * from './UserMenuWrapperAnalyst';
+export * from './ScrollableTab';
+export * from './TabItem';
+export * from './PortalTooltip';
 export * from './ImageCard';
 export * from './CompanyCard';

package/dist/cjs/types/components/UI/organism/HeaderAnalyst/HeaderAnalyst.interface.d.ts

@@ -1,5 +1,6 @@
 import { IBreadcrumbs, IUserMenuWrapperAnalystProps } from '@components/UI/molecules';
-import { ILogoComponent, ILinkProps } from '@components/UI/atoms';
+import { ILogoComponent } from '@components/UI/atoms';
+import React from 'react';
 export interface IHeaderAnalyst {
     /**
      * Breadcrumbs props
@@ -30,9 +31,9 @@ export interface IHeaderAnalyst {
      */
     userMenuProps: IUserMenuWrapperAnalystProps;
     /**
-     * User notification link props
+     * Component to display a custom notification bell
      */
-    userNotificationProps?: ILinkProps;
+    notificationBell?: React.ReactNode;
 }
 export interface ILogoAnalyst extends ILogoComponent {
     /**

package/dist/cjs/types/constants/stories/InlineDetails.contants.d.ts

@@ -0,0 +1,2 @@
+import { IInlineDetails } from '@components/UI/atoms/InlineDetails';
+export declare const inlineDetailsProps: IInlineDetails;

package/dist/cjs/types/constants/stories/analyst.constants.d.ts

@@ -1,10 +1,8 @@
 import { IBreadcrumbs, IUserAnalyst, IUserMenuWrapperAnalystProps } from '@components/UI/molecules';
 import { IHeaderAnalyst, INavMenuAnalystProps, IModalAnalystProps } from '@components/UI/organism';
-import { ILinkProps } from '@components/UI/atoms';
 import { IAnalystTemplateProps } from '@components/UI/template';
 export declare const BreadCrumbAnalystProps: IBreadcrumbs;
 export declare const UserAnalystProps: IUserAnalyst;
-export declare const UserNotificationProps: ILinkProps;
 export declare const UserMenuAnalystProps: IUserMenuWrapperAnalystProps;
 export declare const HeaderAnalystProps: IHeaderAnalyst;
 export declare const NavMenuAnalystProps: INavMenuAnalystProps;