magneto365.ui 2.74.0 → 2.74.1-beta.2

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/Popover/Popover.interface.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 declare type PositionY = 'top' | 'bottom';
 declare type PositionX = 'left' | 'center' | 'right';
 export interface IPopover {
@@ -30,5 +31,6 @@ export interface IPopover {
      */
     staticContent?: boolean;
     className?: string;
+    style?: React.CSSProperties;
 }
 export {};

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/Input/Input.interface.d.ts

@@ -57,4 +57,8 @@ export interface IInput extends React.InputHTMLAttributes<HTMLInputElement> {
      * this property sets the max counter value
      */
     maxCounterValue?: number;
+    /**
+     * Main Styles
+     */
+    mainClassName?: string;
 }

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface IMegaMenuEmpty {
     /**
      * Empty Title
@@ -10,5 +11,18 @@ export interface IMegaMenuEmpty {
     /**
      * Image Data
      */
-    imageData: string;
+    imageData?: string;
+    /**
+     * Image heigth
+     */
+    imageHeight?: number;
+    /**
+     * CustomStyles
+     */
+    customStyle?: {
+        content?: React.CSSProperties;
+        title?: React.CSSProperties;
+        subtitle?: React.CSSProperties;
+        image?: React.CSSProperties;
+    };
 }

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IMegaMenuSearchBar } from './MegaMenuSearchBar.interface';
+declare const MegaMenuSearchBar: React.FC<IMegaMenuSearchBar>;
+export default MegaMenuSearchBar;

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

@@ -0,0 +1,62 @@
+/// <reference types="react" />
+export interface IMegaMenuSearchBar {
+    location: ISearchBar;
+    occupation: ISearchBar;
+}
+export interface ISearchBar {
+    /**
+     * Sets the value for the input in the searchbar
+     */
+    termValue: any;
+    /**
+     * Placeholder text for the searchbar
+     */
+    placeholder: string;
+    /**
+     * Handler for the input value
+     */
+    onSearch: (searchValue: string) => void;
+    /**
+     * Icon in search input
+     */
+    icon?: string;
+    /**
+     * Action Icon
+     */
+    actionIcon?: string;
+    /**
+     * options
+     */
+    options: ISearchOptions[];
+    /**
+     * sectionTitle
+     */
+    sectionTitle?: ISectionTitle;
+    /**
+     * class name
+     */
+    className?: string;
+    /**
+     *
+     */
+    onSelectOption?: (option: ISearchOptions) => void;
+    /**
+     *
+     */
+    noContent?: {
+        title: string;
+        subtitle: string;
+    };
+}
+export interface ISectionTitle {
+    title: string;
+    url: string;
+    onClick: (event: React.MouseEvent) => void;
+    icon?: string;
+}
+export interface ISearchOptions {
+    title: string;
+    subtitle?: string;
+    url: string;
+    field?: string;
+}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ISearchBar } from './MegaMenuSearchBar.interface';
+declare const SearchBar: React.FC<ISearchBar>;
+export default SearchBar;

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

@@ -19,4 +19,8 @@ export interface IMobileSearchbar {
      * Sets the value for the input in the searchbar
      */
     termValue?: any;
+    /**
+     * placeholder
+     */
+    placeholder?: string;
 }

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/SimilarCard/SimilarCard.component.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ISimilarCard } from './SimilarCard.interface';
 export declare const SimilarCard: React.FC<ISimilarCard> & {
-    Text: React.FC<import("../../atoms/Text/Text.interface").IText>;
+    Text: React.FC<ISimilarCard.Text>;
     Logo: React.FC<ISimilarCard.Logo>;
     Icon: React.FC<ISimilarCard.Icon>;
 };

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import { ICustomText } from '@components/UI/atoms/Text/Text.interface';
 export interface ISimilarCard {
     /**
      * this property sets the url title
@@ -101,11 +100,29 @@ export declare namespace ISimilarCard {
         /**
          * If the text must show more than one line, use customText instead text
          * */
-        customText?: ICustomText[];
+        customText?: CustomText[];
         /**
          * this property sets custom styles
          */
         className?: string;
+        /**
+         * This property allows you to set the tag for the first text.
+         */
+        headingType?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    }
+    interface CustomText {
+        /**
+         * This is the value to the custom text
+         * */
+        value: string | React.ReactNode;
+        /**
+         * This is the custom font weight to text
+         * */
+        fontWeight: 'normal' | 'bold' | 'lighter';
+        /**
+         * This is the custom line break to text
+         * */
+        lineBreak?: boolean;
     }
     interface Icon {
         /**

package/dist/cjs/types/components/UI/molecules/SimilarCard/children/SimilarCardText/SimilarCardText.component.d.ts

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

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/FilterCard/FilterCard.interface.d.ts

@@ -16,4 +16,16 @@ export interface IFilterCard extends IFilter, ISearchRenderTypeProps {
      * This is the switch title and indicate if has switch
      */
     switchText?: string;
+    /**
+     * Identification Key for each filter card
+     */
+    index: number;
+    /**
+     *Function to bnotify an open filter
+     */
+    setCurrentOpenFilter: (index: number) => void;
+    /**
+     * key to know if a filter has changed
+     */
+    showFilters: boolean;
 }

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/components/UI/template/MegaMenu/MegaMenuContext.interface.d.ts

@@ -3,6 +3,8 @@ import { ISearchbar } from '@components/UI/molecules';
 import { IPopoverRef } from '@components/UI/molecules/MegaMenuPopover/MegaMenuPopover.interface';
 import { IlistMenuUserProps } from '@components/UI/organism';
 import React, { ReactNode } from 'react';
+import { ISelectOptions } from '@components/UI/organism/Select2/Select2.interface';
+import { IMegaMenuSearchBar } from '@components/UI/molecules/MegaMenuSearchBar/MegaMenuSearchBar.interface';
 export interface IMegaMenuLink {
     label: string;
     url: string;
@@ -27,7 +29,9 @@ export interface IMegaMenuMainHeader {
         signUpText: string;
         onClickSignUp: (event: Event) => Promise<void>;
     };
-    searchBarProps?: ISearchbar;
+    selectCountry?: ISelectOptions<unknown>;
+    searchBarProps?: IMegaMenuSearchBar;
+    mobileSearchBarProps: ISearchbar;
     homeUrl?: string;
     homeText?: string;
 }

package/dist/cjs/types/constants/icons.constants.d.ts

@@ -188,3 +188,6 @@ export { default as WhatsAppDark } from '../assets/Whatsapp.svg';
 export { default as X } from '../assets/X.svg';
 export { default as Youtube } from '../assets/Youtube.svg';
 export { default as YoutubeSolid } from '../assets/YoutubeSolid.svg';
+export { default as FilterIcon } from '../assets/filter-search.svg';
+export { default as SortIcon } from '../assets/SortIcon.svg';
+export { default as CurrentLocation } from '../assets/current-location.svg';

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;

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

@@ -1,6 +1,7 @@
 import { IBreadcrumb, IMainButton, IconProps } from '@components/UI/atoms';
-import { IHeaderTabs, IListMenuIcons, IMenuItems, IMobileSearchbar, ISearchbar } from '@components/UI/molecules';
+import { IHeaderTabs, IListMenuIcons, IMenuItems, ISearchbar } from '@components/UI/molecules';
 import { IBrands } from '@components/UI/molecules/BrandsContainer/BrandsContainer.interface';
+import { IMegaMenuSearchBar } from '@components/UI/molecules/MegaMenuSearchBar/MegaMenuSearchBar.interface';
 export declare const ourBrandsText = "Nuestras Marcas";
 export declare const brands: IBrands[];
 export declare const breadcrumbProps: IBreadcrumb;
@@ -81,8 +82,8 @@ export declare const DrawerRightTabStyles: {
 export declare const JobsTabsProps: IHeaderTabs;
 export declare const ProcessTabsProps: IHeaderTabs;
 export declare const CurriculumTabProps: IHeaderTabs;
-export declare const SearchbarProps: ISearchbar;
-export declare const MobileSearchbarProps: IMobileSearchbar;
+export declare const SearchbarProps: IMegaMenuSearchBar;
+export declare const MobileSearchbarProps: ISearchbar;
 export declare const iconPropsBreadCrumb: IconProps;
 export declare const searchMobileProps: IMainButton;
 export declare const closeSearchMobileProps: IMainButton;

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

@@ -0,0 +1,17 @@
+export declare const SELECT2_PROPS: {
+    className: string;
+    onChange: (value: string) => void;
+    placeholder: string;
+    isMultiple: boolean;
+    haveTags: boolean;
+    limitSelections: number;
+    currentFields: {
+        id: string;
+        name: string;
+    }[];
+    icon: any;
+    selectList: {
+        id: string;
+        name: string;
+    }[];
+};