@devtron-labs/devtron-fe-common-lib 0.0.62-beta-2 → 0.0.62-beta-3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.62-beta-2",
+    "version": "0.0.62-beta-3",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {

package/src/Assets/Icon/ic-check-all.svg

@@ -0,0 +1,5 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2" y="2" width="11.2" height="11.2" rx="2" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.4667 5.86621V11.4662C15.4667 13.6754 13.6758 15.4662 11.4667 15.4662H5.8667" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.35 5.84961L6.85004 9.34945L5.10004 7.59961" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/Assets/Icon/ic-check-square.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2" y="2" width="12" height="12" rx="2" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.2083 5.95801L7.12498 10.0412L5.08331 7.99967" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/Assets/Icon/ic-close.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+    <defs>
+        <path id="a" class="stroke-color" d="M18.295 5.705a.997.997 0 0 0-1.41 0L12 10.59 7.115 5.705a.997.997 0 1 0-1.41 1.41L10.59 12l-4.885 4.885a.997.997 0 1 0 1.41 1.41L12 13.41l4.885 4.885a.997.997 0 0 0 1.41-1.41L13.41 12l4.885-4.885a.997.997 0 0 0 0-1.41z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <path d=""/>
+        <use fill="#999" xlink:href="#a"/>
+    </g>
+</svg>

package/src/Common/DraggableWrapper/types.ts

@@ -8,7 +8,10 @@ export enum DraggablePositionVariant {
 
 export interface DraggableWrapperProps {
     children: ReactNode
-    zIndex?: number
+    /**
+     * Support for passing the direct value or calc functions as well
+     */
+    zIndex?: number | string
     positionVariant?: DraggablePositionVariant
     /**
      * dragSelector (class - (append with .), id, etc) will be used to identify the grabbable button that will grab the div to drag

package/src/Common/Helper.tsx

@@ -449,7 +449,13 @@ export const getUrlWithSearchParams = (url: string, params: Record<string | numb
     const searchParams = new URLSearchParams()
     Object.keys(params).forEach((key) => {
         if (params[key]) {
-            searchParams.append(key, params[key])
+            if (Array.isArray(params[key])) {
+                params[key].forEach((val) => {
+                    searchParams.append(key, val)
+                })
+            } else {
+                searchParams.set(key, params[key])
+            }
         }
     })
     const queryString = searchParams.toString()

package/src/Common/Hooks/useUrlFilters/index.ts

@@ -1,2 +1,2 @@
 export { default as useUrlFilters } from './useUrlFilters'
-export type { UseUrlFiltersProps } from './types'
+export type { UseUrlFiltersProps, UseUrlFiltersReturnType } from './types'

package/src/Common/Hooks/useUrlFilters/types.ts

@@ -1,6 +1,26 @@
-export interface UseUrlFiltersProps<T> {
+import { SortingOrder } from '../../Constants'
+
+export interface UseUrlFiltersProps<T, K> {
     /**
      * The key on which the sorting should be applied
      */
     initialSortKey?: T
+    /**
+     * Callback function for parsing the search params
+     */
+    parseSearchParams?: (searchParams: URLSearchParams) => K
+}
+
+export type UseUrlFiltersReturnType<T, K = unknown> = K & {
+    pageSize: number
+    changePage: (pageNumber: number) => void
+    changePageSize: (pageSize: number) => void
+    searchKey: string
+    handleSearch: (searchKey: string) => void
+    offset: number
+    sortBy: T
+    sortOrder: SortingOrder
+    handleSorting: (sortBy: T) => void
+    clearFilters: () => void
+    updateSearchParams: (paramsToSerialize: K) => void
 }

package/src/Common/Hooks/useUrlFilters/useUrlFilters.ts

@@ -2,7 +2,7 @@ import { useMemo } from 'react'
 import { useHistory, useLocation } from 'react-router-dom'
 import { DEFAULT_BASE_PAGE_SIZE, SortingOrder } from '../../Constants'
 import { DEFAULT_PAGE_NUMBER, URL_FILTER_KEYS } from './constants'
-import { UseUrlFiltersProps } from './types'
+import { UseUrlFiltersProps, UseUrlFiltersReturnType } from './types'
 
 const { PAGE_SIZE, PAGE_NUMBER, SEARCH_KEY, SORT_BY, SORT_ORDER } = URL_FILTER_KEYS
 
@@ -23,12 +23,15 @@ const { PAGE_SIZE, PAGE_NUMBER, SEARCH_KEY, SORT_BY, SORT_ORDER } = URL_FILTER_K
  * ```
  *
  */
-const useUrlFilters = <T = string>({ initialSortKey }: UseUrlFiltersProps<T> = {}) => {
+const useUrlFilters = <T = string, K = unknown>({
+    initialSortKey,
+    parseSearchParams,
+}: UseUrlFiltersProps<T, K> = {}): UseUrlFiltersReturnType<T, K> => {
     const location = useLocation()
     const history = useHistory()
     const searchParams = new URLSearchParams(location.search)
 
-    const { pageSize, pageNumber, searchKey, sortBy, sortOrder } = useMemo(() => {
+    const { pageSize, pageNumber, searchKey, sortBy, sortOrder, parsedParams } = useMemo(() => {
         const _pageSize = searchParams.get(PAGE_SIZE)
         const _pageNumber = searchParams.get(PAGE_NUMBER)
         const _searchKey = searchParams.get(SEARCH_KEY)
@@ -39,6 +42,8 @@ const useUrlFilters = <T = string>({ initialSortKey }: UseUrlFiltersProps<T> = {
         // Fallback to ascending order
         const sortByOrder = Object.values(SortingOrder).includes(_sortOrder) ? _sortOrder : SortingOrder.ASC
 
+        const _parsedParams = parseSearchParams ? parseSearchParams(searchParams) : ({} as K)
+
         return {
             pageSize: Number(_pageSize) || DEFAULT_BASE_PAGE_SIZE,
             pageNumber: Number(_pageNumber) || DEFAULT_PAGE_NUMBER,
@@ -46,6 +51,7 @@ const useUrlFilters = <T = string>({ initialSortKey }: UseUrlFiltersProps<T> = {
             sortBy: sortByKey,
             // sort order should only be applied if the key is available
             sortOrder: (sortByKey ? sortByOrder : '') as SortingOrder,
+            parsedParams: _parsedParams,
         }
     }, [searchParams])
 
@@ -98,10 +104,24 @@ const useUrlFilters = <T = string>({ initialSortKey }: UseUrlFiltersProps<T> = {
     }
 
     const clearFilters = () => {
-        Object.values(URL_FILTER_KEYS).forEach((key) => {
-            searchParams.delete(key)
+        history.replace({ search: '' })
+    }
+
+    const updateSearchParams = (paramsToSerialize: K) => {
+        Object.keys(paramsToSerialize).forEach((key) => {
+            if (paramsToSerialize[key]) {
+                if (Array.isArray(paramsToSerialize[key])) {
+                    searchParams.delete(key)
+                    paramsToSerialize[key].forEach((val) => {
+                        searchParams.append(key, val)
+                    })
+                } else {
+                    searchParams.set(key, paramsToSerialize[key])
+                }
+            }
         })
-        history.replace({ search: searchParams.toString() })
+        // Not replacing the params as it is being done by _resetPageNumber
+        _resetPageNumber()
     }
 
     return {
@@ -115,6 +135,8 @@ const useUrlFilters = <T = string>({ initialSortKey }: UseUrlFiltersProps<T> = {
         sortOrder,
         handleSorting,
         clearFilters,
+        ...parsedParams,
+        updateSearchParams,
     }
 }
 

package/src/Common/Types.ts

@@ -51,11 +51,13 @@ export interface Teams {
 export enum CHECKBOX_VALUE {
     CHECKED = 'CHECKED',
     INTERMEDIATE = 'INTERMEDIATE',
+    BULK_CHECKED = 'BULK_CHECKED',
 }
 export interface CheckboxProps {
     onChange: (event) => void
     isChecked: boolean
-    value: 'CHECKED' | 'INTERMEDIATE'
+    // FIXME: Need to replace this CHECKBOX_VALUE enum, and replace string instances in dashboard
+    value: 'CHECKED' | 'INTERMEDIATE' | 'BULK_CHECKED'
     disabled?: boolean
     tabIndex?: number
     rootClassName?: string
@@ -373,7 +375,6 @@ export interface CommonNodeAttr {
     }
     appReleaseTagNames?: string[]
     tagsEditable?: boolean
-    isGitOpsRepoNotConfigured?: boolean
     deploymentAppCreated?: boolean
     isLast?: boolean
     downstreamEnvironments?: DownstreamNodesEnvironmentsType[]

package/src/Pages/GlobalConfigurations/Authorization/constants.ts

@@ -12,5 +12,5 @@ export enum UserStatusDto {
 export enum UserStatus {
     active = 'active',
     inactive = 'inactive',
-    temporary = 'temporary',
+    temporary = 'temporaryAccess',
 }

package/src/Shared/Components/BulkSelection/BulkSelection.tsx

@@ -0,0 +1,77 @@
+import BulkSelectionDropdownItems from './BulkSelectionDropdownItems'
+import { CHECKBOX_VALUE, Checkbox, PopupMenu, noop } from '../../../Common'
+import { useBulkSelection } from './BulkSelectionProvider'
+import { BulkSelectionDropdownItemsType, BulkSelectionEvents, BulkSelectionProps } from './types'
+import { BULK_DROPDOWN_TEST_ID, BulkSelectionOptionsLabels } from './constants'
+import { ReactComponent as ICChevronDown } from '../../../Assets/Icon/ic-chevron-down.svg'
+import { ReactComponent as ICCheckSquare } from '../../../Assets/Icon/ic-check-square.svg'
+import { ReactComponent as ICCheckAll } from '../../../Assets/Icon/ic-check-all.svg'
+import { ReactComponent as ICClose } from '../../../Assets/Icon/ic-close.svg'
+
+const BulkSelection = <T,>({ showPagination }: BulkSelectionProps) => {
+    const { handleBulkSelection, isChecked, checkboxValue, getSelectedIdentifiersCount } = useBulkSelection<T>()
+    const areOptionsSelected = getSelectedIdentifiersCount() > 0
+    const BulkSelectionItems: BulkSelectionDropdownItemsType[] = [
+        {
+            locator: BulkSelectionEvents.SELECT_ALL_ON_PAGE,
+            label: BulkSelectionOptionsLabels[BulkSelectionEvents.SELECT_ALL_ON_PAGE],
+            isSelected: isChecked && checkboxValue === CHECKBOX_VALUE.CHECKED,
+            icon: ICCheckSquare,
+        },
+        ...(showPagination
+            ? [
+                  {
+                      locator: BulkSelectionEvents.SELECT_ALL_ACROSS_PAGES,
+                      label: BulkSelectionOptionsLabels[BulkSelectionEvents.SELECT_ALL_ACROSS_PAGES],
+                      isSelected: isChecked && checkboxValue === CHECKBOX_VALUE.BULK_CHECKED,
+                      icon: ICCheckAll,
+                  },
+              ]
+            : []),
+        ...(areOptionsSelected
+            ? [
+                  {
+                      locator: BulkSelectionEvents.CLEAR_ALL_SELECTIONS,
+                      label: BulkSelectionOptionsLabels[BulkSelectionEvents.CLEAR_ALL_SELECTIONS],
+                      isSelected: false,
+                      icon: ICClose,
+                  },
+              ]
+            : []),
+    ]
+
+    return (
+        <PopupMenu autoClose>
+            <PopupMenu.Button
+                isKebab
+                rootClassName="h-20 flexbox p-0 dc__no-background dc__no-border dc__outline-none-imp"
+                dataTestId={BULK_DROPDOWN_TEST_ID}
+            >
+                <Checkbox
+                    isChecked={isChecked}
+                    onChange={noop}
+                    rootClassName="icon-dim-20 m-0"
+                    value={checkboxValue}
+                    // Ideally should be disabled but was giving issue with cursor
+                />
+
+                <ICChevronDown className="icon-dim-20 fcn-6 dc__no-shrink" />
+            </PopupMenu.Button>
+
+            <PopupMenu.Body rootClassName="dc__top-22 w-150 dc__right-0 pt-4 pb-4 pl-0 pr-0 bcn-0 flex column dc__content-start dc__align-start dc__position-abs bcn-0 dc__border dc__border-radius-4-imp">
+                {BulkSelectionItems.map((item) => (
+                    <BulkSelectionDropdownItems<T>
+                        key={item.locator}
+                        locator={item.locator}
+                        label={item.label}
+                        isSelected={item.isSelected}
+                        icon={item.icon}
+                        handleBulkSelection={handleBulkSelection}
+                    />
+                ))}
+            </PopupMenu.Body>
+        </PopupMenu>
+    )
+}
+
+export default BulkSelection

package/src/Shared/Components/BulkSelection/BulkSelectionDropdownItems.tsx

@@ -0,0 +1,31 @@
+import { BulkSelectionDropdownItemsProps } from './types'
+
+const BulkSelectionDropdownItems = <T,>({
+    locator,
+    label,
+    isSelected,
+    handleBulkSelection,
+    icon: Icon,
+}: BulkSelectionDropdownItemsProps<T>) => {
+    const handleSelect = () => {
+        handleBulkSelection({
+            action: locator,
+        })
+    }
+
+    return (
+        <button
+            data-testid={`bulk-action-${locator}`}
+            onClick={handleSelect}
+            className={`dc__no-border dc__outline-none-imp w-100 flexbox h-32 dc__align-items-center pt-6 pr-8 pb-6 pl-8 dc__gap-8 ${
+                isSelected ? 'cb-5 bcb-2 fs-13 fw-6 lh-20' : 'dc__no-background cn-9 fs-13 fw-4 lh-20 dc__hover-n50'
+            }`}
+            type="button"
+        >
+            <Icon className="icon-dim-16" />
+            {label}
+        </button>
+    )
+}
+
+export default BulkSelectionDropdownItems

package/src/Shared/Components/BulkSelection/BulkSelectionProvider.tsx

@@ -0,0 +1,171 @@
+import { createContext, useContext, useMemo, useState } from 'react'
+import { BULK_SELECTION_CONTEXT_ERROR, SELECT_ALL_ACROSS_PAGES_LOCATOR, getInvalidActionMessage } from './constants'
+import {
+    BulkSelectionEvents,
+    GetBulkSelectionCheckboxValuesType,
+    HandleBulkSelectionType,
+    SelectAllDialogStatus,
+    UseBulkSelectionProps,
+    UseBulkSelectionReturnType,
+} from './types'
+import { CHECKBOX_VALUE, noop } from '../../../Common'
+
+// giving type any here since not exporting this context, rather using it through useBulkSelection hook which is typed
+const BulkSelectionContext = createContext<UseBulkSelectionReturnType<any>>({
+    selectedIdentifiers: {},
+    handleBulkSelection: noop,
+    isChecked: false,
+    checkboxValue: CHECKBOX_VALUE.CHECKED,
+    isBulkSelectionApplied: false,
+    getSelectedIdentifiersCount: noop,
+})
+
+export const useBulkSelection = <T,>() => {
+    const context = useContext<UseBulkSelectionReturnType<T>>(BulkSelectionContext)
+    if (!context) {
+        throw new Error(BULK_SELECTION_CONTEXT_ERROR)
+    }
+    return context
+}
+
+export const BulkSelectionProvider = <T,>({
+    children,
+    identifiers,
+    getSelectAllDialogStatus,
+}: UseBulkSelectionProps<T>) => {
+    const [selectedIdentifiers, setSelectedIdentifiers] = useState<T>({} as T)
+
+    const isBulkSelectionApplied = selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR]
+
+    const getSelectedIdentifiersCount = () => Object.keys(selectedIdentifiers).length
+
+    const setIdentifiersAfterClear = (newIdentifiers: T, selectedIds: (number | string)[]) => {
+        const _newIdentifiers = JSON.parse(JSON.stringify(newIdentifiers))
+        selectedIds.forEach((id) => {
+            delete _newIdentifiers[id]
+        })
+        setSelectedIdentifiers(_newIdentifiers)
+    }
+
+    const setIdentifiersAfterPageSelection = (baseObject: T) => {
+        const _selectedIdentifiers = JSON.parse(JSON.stringify(selectedIdentifiers))
+        // removing bulk selection across pages if present
+        if (isBulkSelectionApplied) {
+            delete _selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR]
+        }
+
+        setSelectedIdentifiers({
+            ..._selectedIdentifiers,
+            ...baseObject,
+        })
+    }
+
+    const handleBulkSelection = ({ action, data }: HandleBulkSelectionType<T>) => {
+        const selectedIds = data?.identifierIds ?? []
+        const identifierObject = data?.identifierObject ?? {}
+
+        switch (action) {
+            case BulkSelectionEvents.CLEAR_ALL_SELECTIONS:
+                setSelectedIdentifiers({} as T)
+                break
+
+            case BulkSelectionEvents.CLEAR_IDENTIFIERS_AFTER_ACROSS_SELECTION: {
+                setIdentifiersAfterClear(identifiers, selectedIds)
+                break
+            }
+
+            case BulkSelectionEvents.CLEAR_IDENTIFIERS: {
+                setIdentifiersAfterClear(selectedIdentifiers, selectedIds)
+                break
+            }
+
+            case BulkSelectionEvents.SELECT_ALL_ACROSS_PAGES: {
+                if (isBulkSelectionApplied) {
+                    return
+                }
+                const selectedIdentifiersLength = getSelectedIdentifiersCount()
+                // This is for showing a modal dialog if applicable to confirm if bulk selection is to be applied
+                // Do note that the 'getSelectAllDialogStatus' should be called after the length check explicitly
+                // otherwise the modal will open each time
+                if (selectedIdentifiersLength > 0 && getSelectAllDialogStatus() === SelectAllDialogStatus.OPEN) {
+                    return
+                }
+
+                setSelectedIdentifiers({
+                    [SELECT_ALL_ACROSS_PAGES_LOCATOR]: true,
+                } as unknown as T)
+                break
+            }
+
+            case BulkSelectionEvents.CLEAR_SELECTIONS_AND_SELECT_ALL_ACROSS_PAGES:
+                setSelectedIdentifiers({
+                    [SELECT_ALL_ACROSS_PAGES_LOCATOR]: true,
+                } as unknown as T)
+                break
+
+            case BulkSelectionEvents.SELECT_ALL_ON_PAGE: {
+                setIdentifiersAfterPageSelection(identifiers)
+                break
+            }
+
+            case BulkSelectionEvents.SELECT_IDENTIFIER: {
+                setIdentifiersAfterPageSelection(identifierObject as T)
+                break
+            }
+
+            default:
+                throw new Error(getInvalidActionMessage(action))
+        }
+    }
+
+    const getBulkSelectionCheckboxValues = (): GetBulkSelectionCheckboxValuesType => {
+        const selectedIdentifiersArray = Object.keys(selectedIdentifiers)
+        if (selectedIdentifiersArray.length === 0) {
+            return {
+                isChecked: false,
+                checkboxValue: CHECKBOX_VALUE.CHECKED,
+            }
+        }
+
+        // if selectedIdentifiers contains select all across pages locator then it means all are selected
+        if (isBulkSelectionApplied) {
+            return {
+                isChecked: true,
+                checkboxValue: CHECKBOX_VALUE.BULK_CHECKED,
+            }
+        }
+
+        // if all the identifiers are selected then CHECKED else intermediate
+        const areAllPresentIdentifiersSelected = Object.keys(identifiers).every(
+            (identifierId) => selectedIdentifiers[identifierId],
+        )
+
+        if (areAllPresentIdentifiersSelected) {
+            return {
+                isChecked: true,
+                checkboxValue: CHECKBOX_VALUE.CHECKED,
+            }
+        }
+
+        return {
+            isChecked: true,
+            checkboxValue: CHECKBOX_VALUE.INTERMEDIATE,
+        }
+    }
+
+    const { isChecked, checkboxValue } = getBulkSelectionCheckboxValues()
+
+    const value = useMemo(
+        () => ({
+            selectedIdentifiers,
+            handleBulkSelection,
+            isChecked,
+            checkboxValue,
+            isBulkSelectionApplied,
+            getSelectedIdentifiersCount,
+        }),
+        [selectedIdentifiers, handleBulkSelection, isChecked, checkboxValue, getSelectedIdentifiersCount],
+    )
+
+    return <BulkSelectionContext.Provider value={value}>{children}</BulkSelectionContext.Provider>
+}

package/src/Shared/Components/BulkSelection/constants.tsx

@@ -0,0 +1,13 @@
+import { BulkSelectionEvents } from './types'
+
+export const BULK_DROPDOWN_TEST_ID = 'bulk-selection-pop-up-menu' as const
+export const BulkSelectionOptionsLabels = {
+    [BulkSelectionEvents.SELECT_ALL_ON_PAGE]: 'All on this page',
+    [BulkSelectionEvents.SELECT_ALL_ACROSS_PAGES]: 'All across pages',
+    [BulkSelectionEvents.CLEAR_ALL_SELECTIONS]: 'Clear selection',
+} as const
+
+// Considering application can not be named as *
+export const SELECT_ALL_ACROSS_PAGES_LOCATOR = '*' as const
+export const getInvalidActionMessage = (action: string) => `Invalid action ${action} passed to useBulkSelection`
+export const BULK_SELECTION_CONTEXT_ERROR = 'useBulkSelection must be used within BulkSelectionContext'

package/src/Shared/Components/BulkSelection/index.ts

@@ -0,0 +1,4 @@
+export { default as BulkSelection } from './BulkSelection'
+export * from './BulkSelectionProvider'
+export * from './types'
+export * from './constants'

package/src/Shared/Components/BulkSelection/types.tsx

@@ -0,0 +1,67 @@
+import { CHECKBOX_VALUE } from '../../../Common'
+
+export enum BulkSelectionEvents {
+    CLEAR_ALL_SELECTIONS = 'CLEAR_ALL_SELECTIONS',
+    CLEAR_IDENTIFIERS = 'CLEAR_IDENTIFIERS',
+    SELECT_ALL_ACROSS_PAGES = 'SELECT_ALL_ACROSS_PAGES',
+    SELECT_ALL_ON_PAGE = 'SELECT_ALL_ON_PAGE',
+    SELECT_IDENTIFIER = 'SELECT_IDENTIFIER',
+    CLEAR_IDENTIFIERS_AFTER_ACROSS_SELECTION = 'CLEAR_IDENTIFIERS_AFTER_ACROSS_SELECTION',
+    CLEAR_SELECTIONS_AND_SELECT_ALL_ACROSS_PAGES = 'CLEAR_SELECTIONS_AND_SELECT_ALL_ACROSS_PAGES',
+}
+
+export interface HandleBulkSelectionType<T> {
+    action: BulkSelectionEvents
+    data?: {
+        identifierIds?: (number | string)[]
+        identifierObject?: T
+    }
+}
+
+export interface GetBulkSelectionCheckboxValuesType {
+    isChecked: boolean
+    checkboxValue: CHECKBOX_VALUE
+}
+
+export interface UseBulkSelectionReturnType<T> extends GetBulkSelectionCheckboxValuesType {
+    selectedIdentifiers: T
+    handleBulkSelection: ({ action, data }: HandleBulkSelectionType<T>) => void
+    isBulkSelectionApplied: boolean
+    getSelectedIdentifiersCount: () => number
+}
+
+export interface BulkSelectionProps {
+    showPagination: boolean
+}
+
+export interface BulkSelectionDropdownItemsType {
+    locator: BulkSelectionEvents
+    label: string
+    isSelected: boolean
+    icon: React.FunctionComponent<React.SVGProps<SVGSVGElement>>
+}
+
+export interface BulkSelectionDropdownItemsProps<T>
+    extends BulkSelectionDropdownItemsType,
+        Pick<UseBulkSelectionReturnType<T>, 'handleBulkSelection'> {}
+
+export enum SelectAllDialogStatus {
+    OPEN = 'OPEN',
+    CLOSED = 'CLOSED',
+}
+
+// This type is intended to be used with UseBulkSelectionProps, e.g, UseBulkSelectionProps<BulkSelectionIdentifiersType<boolean>>
+export type BulkSelectionIdentifiersType<T> = Record<string | number, T>
+
+export interface UseBulkSelectionProps<T> {
+    /**
+     * Response from API, assuming structure to be array of objects with key and values
+     * This will the given ids on current page
+     */
+    identifiers: T
+    /**
+     * Act as buffer between select all across pages and select all on page state
+     */
+    getSelectAllDialogStatus: () => SelectAllDialogStatus
+    children?: React.ReactNode
+}

package/src/Shared/Components/index.ts

@@ -0,0 +1 @@
+export * from './BulkSelection'

package/src/Shared/index.ts

@@ -0,0 +1 @@
+export * from './Components'

package/src/index.ts

@@ -1,2 +1,3 @@
 export * from './Common'
 export * from './Pages'
+export * from './Shared'