magneto365.ui 2.75.11-alpha-2 → 2.75.12

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/types/components/UI/organism/FilterCard/FilterCard.interface.d.ts

@@ -16,4 +16,20 @@ 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;
+    /**
+     * To render horizontal filter
+     */
+    horizontal?: boolean;
 }

package/dist/esm/types/components/UI/page/JobsPage/JobsPage.interface.d.ts

@@ -79,6 +79,10 @@ export interface IJobsPage {
      * This property sets the create account card data
      */
     createAccountCTAProps?: ICreateAccountCTA;
+    /**
+     *  This property sets the job card type filter, which can be either 'row' or 'side'.
+     */
+    typeFilters?: 'row' | 'side';
 }
 export interface IVacancies extends IJobCard {
     offerVacancyData?: string;

package/dist/esm/types/components/UI/template/HorizontalFilter/HorizontalFilter.component.d.ts

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

package/dist/esm/types/components/UI/template/HorizontalFilter/HorizontalFilter.interface.d.ts

@@ -0,0 +1,35 @@
+import { IFilter, ISearchRenderTypeProps } from '@components/UI/template/SideFilter';
+export interface IHorizontalFilter extends ISearchRenderTypeProps {
+    /**
+     * This is the title of the filters
+     */
+    title: string;
+    /**
+     * This is a vector with the total filters
+     */
+    filters: IFilter[];
+    /**
+     * This is the total filters applied
+     */
+    totalAppliedFilters: number;
+    /**
+     * This is the text that shows the clean button
+     */
+    buttonText: string;
+    /**
+     * This is the flag when the filters promise is pending
+     */
+    loading: boolean;
+    /**
+     * If this flag is true the buttonFilter isn't visible
+     */
+    isFiltersOpen: boolean;
+    /**
+     * This function selected or un-applied the option
+     */
+    setIsApplied: (filter: any) => Promise<void>;
+    /**
+     * This is the function to clean all the filters
+     */
+    clearFilters: () => Promise<void>;
+}

package/dist/esm/types/components/UI/template/HorizontalFilter/index.d.ts

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

package/dist/esm/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/esm/types/components/UI/template/SideFilter/SideFilter.interface.d.ts

@@ -84,6 +84,7 @@ export interface IFilter {
     renderChild?: string;
     child?: IFilter;
     filtersApplied?: Array<string | number>;
+    icon?: string;
 }
 export interface IFieldsAlias {
     id?: string;

package/dist/esm/types/components/UI/template/SortBar/SortBar.interface.d.ts

@@ -57,4 +57,8 @@ export interface ISortBar {
     emptyVacant?: boolean;
     infoMessageQuotas?: string;
     widthInfoMessage?: string;
+    /**
+     *  To render conditional content in the sort bar
+     */
+    horizontal?: boolean;
 }

package/dist/esm/types/components/UI/template/index.d.ts

@@ -10,4 +10,5 @@ export * from './MegaMenu';
 export * from './SideFilter';
 export * from './SortBar';
 export * from './VacantPositionsTemplate';
+export * from './HorizontalFilter';
 export * from './TestsFormHandler';

package/dist/esm/types/components/hooks/filters/useFilterCard.d.ts

@@ -0,0 +1,85 @@
+/// <reference types="react" />
+import { IFilterValue, ISetIsApplied } from '@components/UI/template';
+import { ERenderType } from '@constants/stories';
+import { Position } from './usePositionCalculation';
+declare type UseFilterCardProps = {
+    /**
+     * array of filter values to be displayed in the card
+     */
+    values: IFilterValue[];
+    /**
+     * type of rendering for the filter card
+     */
+    renderType?: ERenderType;
+    /**
+     * function to set the applied filter value
+     */
+    setIsApplied?: (optionData: ISetIsApplied) => void;
+    /**
+     * index of the filter card
+     */
+    index: number;
+    /**
+     * function to set the current open filter index
+     */
+    setCurrentOpenFilter: (index: number) => void;
+    /**
+     * whether to show the filters or not
+     */
+    showFilters: boolean;
+    /**
+     * whether the filter card is displayed horizontally
+     */
+    horizontal?: boolean;
+    /**
+     * field name for the filter
+     */
+    field?: string;
+};
+interface UseFilterCardReturn {
+    /**
+     * state and computed values for the filter card
+     */
+    state: {
+        options: IFilterValue[];
+        showItems: boolean;
+        showMobileDrawer: boolean;
+        showTooltip: boolean;
+        buttonRef: React.RefObject<HTMLButtonElement>;
+    };
+    /**
+     * computed properties for the filter card
+     */
+    computed: {
+        isMobile: boolean;
+        hasSearch: boolean;
+        hasTotal: boolean;
+        appliedOption: IFilterValue | undefined;
+        appliedValue: IFilterValue | undefined;
+        hasntOptions: boolean;
+        isInteractiveSection: boolean;
+    };
+    /**
+     * positions for popover and tooltip
+     */
+    positions: {
+        popoverPosition: Position;
+        tooltipPosition: Position;
+    };
+    /**
+     * handlers for various interactions in the filter card
+     */
+    handlers: {
+        handleSearch: (event: React.ChangeEvent<HTMLInputElement>) => void;
+        handleShowItems: () => void;
+        handleCloseMobileDrawer: () => void;
+        handleOptionSelected: (optionData: ISetIsApplied) => void;
+        handleRemove: (e: React.MouseEvent) => void;
+        handleMouseEnter: () => void;
+        handleMouseLeave: () => void;
+        handleTouchStart: () => void;
+        handleTouchEnd: () => void;
+    };
+}
+export declare const useFilterCard: ({ values, renderType, setIsApplied, index, setCurrentOpenFilter, showFilters, horizontal, field }: UseFilterCardProps) => UseFilterCardReturn;
+export {};

package/dist/esm/types/components/hooks/filters/useFilterEventListeners.d.ts

@@ -0,0 +1,49 @@
+/// <reference types="react" />
+declare type UseFilterEventListenersProps = {
+    /**
+     * the filter is displayed horizontally
+     */
+    horizontal?: boolean;
+    /**
+     * the filter items are currently shown
+     */
+    showItems: boolean;
+    /**
+     * the tooltip is currently shown
+     */
+    showTooltip: boolean;
+    /**
+     * the device is mobile
+     */
+    isMobile: boolean;
+    /**
+     * the index of the filter
+     */
+    index: number;
+    /**
+     * reference to the button element
+     */
+    buttonRef: React.RefObject<HTMLButtonElement>;
+    /**
+     * function to set the current open filter index
+     */
+    setCurrentOpenFilter: (index: number) => void;
+    /**
+     * function to set the visibility of filter items
+     */
+    setShowItems: (value: boolean) => void;
+    /**
+     * function to set the visibility of the tooltip
+     */
+    setShowTooltip: (value: boolean) => void;
+    /**
+     * function to set the drag scrolling state
+     */
+    setIsDragScrolling: (value: boolean) => void;
+    /**
+     * function to calculate the positions of elements
+     */
+    calculatePositions: (element: HTMLButtonElement | null) => void;
+};
+export declare const useFilterEventListeners: ({ horizontal, showItems, showTooltip, isMobile, index, buttonRef, setCurrentOpenFilter, setShowItems, setShowTooltip, setIsDragScrolling, calculatePositions }: UseFilterEventListenersProps) => void;
+export {};

package/dist/esm/types/components/hooks/filters/useFilterRendering.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { IFilterValue, ISetIsApplied } from '@components/UI/template';
+declare type UseFilterRenderingProps = {
+    /**
+     * array of filter values to be rendered
+     */
+    options: IFilterValue[];
+    /**
+     * currently applied option
+     */
+    appliedOption: IFilterValue | undefined;
+    /**
+     * flag indicating if there are no options
+     */
+    hasntOptions: boolean;
+    /**
+     * flag indicating if there are any options
+     */
+    hasTotal: boolean;
+    /**
+     *  flag indicating if the options should be rendered horizontally
+     */
+    horizontal?: boolean;
+    /**
+     * function to handle option selection
+     */
+    handleOptionSelected: (optionData: ISetIsApplied) => void;
+    /**
+     * additional properties for the filter rendering
+     */
+    props: {
+        field: string;
+        multiple: boolean;
+        loading: boolean;
+        type?: string;
+        [key: string]: unknown;
+    };
+};
+export declare const useFilterRendering: ({ options, appliedOption, hasntOptions, hasTotal, handleOptionSelected, props }: UseFilterRenderingProps) => {
+    optionsToRender: React.FunctionComponentElement<import("@components/UI/molecules/FilterMenuItem").IFilterMenuItem>[];
+    horizontalOptionsToRender: React.FunctionComponentElement<import("@components/UI/molecules/FilterMenuItem").IFilterMenuItem>[];
+};
+export {};

package/dist/esm/types/components/hooks/filters/usePositionCalculation.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+export interface Position {
+    /**
+     * vertical position
+     */
+    top: number;
+    /**
+     * horizontal position
+     */
+    left: number;
+}
+declare type UsePositionCalculationProps = {
+    /**
+     * reference to the button element
+     */
+    buttonRef: React.RefObject<HTMLButtonElement>;
+    /**
+     * width of the popover
+     */
+    popoverWidth?: number;
+    /**
+     * width of the tooltip
+     */
+    tooltipWidth?: number;
+};
+export declare const usePositionCalculation: ({ buttonRef, popoverWidth, tooltipWidth }: UsePositionCalculationProps) => {
+    popoverPosition: Position;
+    tooltipPosition: Position;
+    calculatePositions: (buttonElement?: HTMLButtonElement | null | undefined) => void;
+};
+export {};

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

@@ -195,3 +195,14 @@ export { default as YoutubeSolid } from '../assets/YoutubeSolid.svg';
 export { default as InfoRed } from '../assets/info-circle-red.svg';
 export { default as AdvertisementOutline } from '../assets/advertisement.svg';
 export { default as AdvertisementBold } from '../assets/advertisementBold.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';
+export { default as FiltersContract } from '../assets/filters-contract.svg';
+export { default as FiltersDate } from '../assets/filters-date.svg';
+export { default as FiltersExperience } from '../assets/filters-experience.svg';
+export { default as FiltersInternship } from '../assets/filters-internship.svg';
+export { default as FiltersModality } from '../assets/filters-modality.svg';
+export { default as FiltersOthers } from '../assets/filters-others.svg';
+export { default as FiltersSalary } from '../assets/filters-salary.svg';
+export { default as FiltersSectors } from '../assets/filters-sectors.svg';

package/dist/esm/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;