feat: table component

Author: Elessar1802

src/Common/Hooks/UseRegisterShortcut/types.ts

@@ -16,6 +16,7 @@
 
 import { IS_PLATFORM_MAC_OS } from '@Common/Constants'
 
+// NOTE: check this link for more info on keyboard keys: https://w3c.github.io/uievents-key/
 export const KEYBOARD_KEYS_MAP = {
     Control: 'Ctrl',
     Shift: '⇧',
@@ -25,8 +26,21 @@ export const KEYBOARD_KEYS_MAP = {
     E: 'E',
     R: 'R',
     K: 'K',
+    X: 'X',
     Escape: 'Esc',
     Enter: '↩',
+    ArrowLeft: '←',
+    ArrowRight: '→',
+    ArrowUp: '↑',
+    ArrowDown: '↓',
+    PageUp: 'PgUp',
+    PageDown: 'PgDn',
+    Home: 'Home',
+    End: 'End',
+    Backspace: '⌫',
+    Delete: '⌦',
+    Dot: '.',
+    Space: 'Space',
 } as const
 
 export type SupportedKeyboardKeysType = keyof typeof KEYBOARD_KEYS_MAP

src/Shared/Components/Table/BulkSelectionActionWidget.tsx

@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2024. Devtron Inc.
+ */
+
+import { ReactComponent as ICClose } from '@Icons/ic-close.svg'
+import { DraggableButton, DraggablePositionVariant, DraggableWrapper } from '@Common/DraggableWrapper'
+import { ComponentSizeType } from '@Shared/constants'
+import { BulkSelectionActionWidgetProps } from './types'
+import { Button, ButtonComponentType, ButtonStyleType, ButtonVariantType } from '../Button'
+
+const BulkSelectionActionWidget = ({
+    count,
+    handleClearBulkSelection,
+    parentRef,
+    BulkActionsComponent,
+}: BulkSelectionActionWidgetProps) => (
+    <DraggableWrapper
+        dragSelector=".drag-selector"
+        positionVariant={DraggablePositionVariant.PARENT_BOTTOM_CENTER}
+        zIndex="calc(var(--modal-index) - 1)"
+        parentRef={parentRef}
+    >
+        <div className="dc__separated-flexbox dc__separated-flexbox--gap-8 pt-12 pb-12 pr-12 pl-12 bulk-selection-widget br-8">
+            <div className="flexbox dc__gap-8">
+                <DraggableButton dragClassName="drag-selector" />
+
+                <div className="fs-13 lh-20 fw-6 flex dc__gap-12">
+                    <span className="flex dc__gap-2 bcb-5 cn-0 br-4 pr-6 pl-6">{count}</span>
+                    <span className="cn-9">Selected</span>
+                </div>
+            </div>
+
+            <BulkActionsComponent />
+
+            <Button
+                icon={<ICClose />}
+                dataTestId="table__action-widget--close"
+                component={ButtonComponentType.button}
+                style={ButtonStyleType.negativeGrey}
+                variant={ButtonVariantType.borderLess}
+                ariaLabel="Clear selection(s)"
+                size={ComponentSizeType.small}
+                onClick={handleClearBulkSelection}
+                showAriaLabelInTippy
+            />
+        </div>
+    </DraggableWrapper>
+)
+
+export default BulkSelectionActionWidget