magneto365.ui 2.74.1-beta.2 → 2.74.1-beta.4

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

@@ -28,4 +28,8 @@ export interface IFilterCard extends IFilter, ISearchRenderTypeProps {
      * key to know if a filter has changed
      */
     showFilters: boolean;
+    /**
+     * To render horizontal filter
+     */
+    horizontal?: boolean;
 }

package/dist/cjs/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/cjs/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/cjs/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/cjs/types/components/UI/template/HorizontalFilter/index.d.ts

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

package/dist/cjs/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/cjs/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/cjs/types/components/UI/template/index.d.ts

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

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/types/constants/icons.constants.d.ts

@@ -191,3 +191,11 @@ 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';
+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/cjs/types/utils/icons/iconMapping.utils.d.ts

@@ -0,0 +1 @@
+export declare const getFieldIcon: (field: string, providedIcon?: string | undefined) => string;