Merge pull request #377 from nginformatica/feat/calendar-popover

Feat/calendar popover

Author: KarineBrandelli

package.json

@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.35.14",
+    "version": "0.35.15",
     "description": "React UI based on the @mui/material toolkit for the web",
     "main": "dist/index.js",
     "author": "NG",
@@ -41,12 +41,12 @@
         "react-number-format": "5.4.4"
     },
     "devDependencies": {
-        "@babel/cli": "7.27.0",
-        "@babel/core": "7.26.10",
-        "@babel/plugin-transform-runtime": "7.26.10",
-        "@babel/preset-env": "7.26.9",
-        "@babel/preset-react": "7.26.3",
-        "@babel/preset-typescript": "7.27.0",
+        "@babel/cli": "7.27.2",
+        "@babel/core": "7.27.1",
+        "@babel/plugin-transform-runtime": "7.27.1",
+        "@babel/preset-env": "7.27.2",
+        "@babel/preset-react": "7.27.1",
+        "@babel/preset-typescript": "7.27.1",
         "@faker-js/faker": "9.7.0",
         "@storybook/addon-essentials": "8.6.12",
         "@storybook/addon-webpack5-compiler-babel": "3.0.6",
@@ -59,20 +59,20 @@
         "@testing-library/react": "16.3.0",
         "@testing-library/user-event": "14.6.1",
         "@types/jest": "29.5.14",
-        "@types/node": "22.15.3",
+        "@types/node": "22.15.15",
         "@types/ramda": "0.30.2",
         "@types/react": "18.3.12",
-        "@typescript-eslint/eslint-plugin": "8.31.1",
-        "@typescript-eslint/parser": "8.31.1",
+        "@typescript-eslint/eslint-plugin": "8.32.0",
+        "@typescript-eslint/parser": "8.32.0",
         "babel-loader": "10.0.0",
         "babel-plugin-import": "1.13.8",
         "babel-plugin-module-resolver": "5.0.2",
         "date-fns": "4.1.0",
-        "eslint": "9.25.1",
-        "eslint-config-prettier": "10.1.2",
+        "eslint": "9.26.0",
+        "eslint-config-prettier": "10.1.3",
         "eslint-import-resolver-typescript": "4.3.4",
         "eslint-plugin-import": "2.31.0",
-        "eslint-plugin-prettier": "5.2.6",
+        "eslint-plugin-prettier": "5.4.0",
         "eslint-plugin-react": "7.37.5",
         "eslint-plugin-react-hooks": "5.2.0",
         "fs-extra": "11.3.0",
@@ -87,9 +87,9 @@
         "ts-jest": "29.3.2",
         "ts-loader": "9.5.2",
         "typescript": "5.8.3",
-        "typescript-eslint": "8.31.1",
+        "typescript-eslint": "8.32.0",
         "uuid": "11.1.0",
-        "webpack": "5.99.7"
+        "webpack": "5.99.8"
     },
     "peerDependencies": {
         "date-fns": "^4.0.0",

src/core/inputs/date-time/index.tsx

@@ -33,13 +33,33 @@ import { theme } from '@/theme'
 
 const { neutral, primary } = theme.colors
 
+export type Placement =
+    | 'auto'
+    | 'auto-start'
+    | 'auto-end'
+    | 'top'
+    | 'bottom'
+    | 'right'
+    | 'left'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'right-start'
+    | 'right-end'
+    | 'left-start'
+    | 'left-end'
+
 export interface IProps {
     type?: 'date' | 'time' | 'datetime'
     error?: boolean
     required?: boolean
     disabled?: boolean
     placeholder?: string
     fullWidth?: boolean
+    placementDate?: Placement
+    placementTime?: Placement
+    placementDateTime?: Placement
 }
 
 export type TDateTime = DatePickerProps<Date> &
@@ -198,6 +218,9 @@ const DateTime = ({
     placeholder,
     fullWidth,
     type = 'date',
+    placementDate,
+    placementTime,
+    placementDateTime,
     ...otherProps
 }: TDateTime) => {
     const commonProps = {
@@ -252,7 +275,7 @@ const DateTime = ({
                             hidden: false,
                             toolbarFormat: 'eee, dd MMM'
                         },
-                        popper: { placement: 'bottom-end' },
+                        popper: { placement: placementDate || 'bottom-end' },
                         layout: {
                             sx: {
                                 '.MuiDateCalendar-root': {
@@ -288,7 +311,7 @@ const DateTime = ({
                             inputProps: { role: 'date-picker' }
                         },
                         toolbar: { hidden: false },
-                        popper: { placement: 'bottom-end' },
+                        popper: { placement: placementTime || 'bottom-end' },
                         layout: {
                             sx: {
                                 '.MuiTimeClock-root': {
@@ -348,7 +371,7 @@ const DateTime = ({
                         fullWidth: fullWidth ?? true,
                         inputProps: { role: 'date-picker' }
                     },
-                    popper: { placement: 'bottom-end' }
+                    popper: { placement: placementDateTime || 'bottom-end' }
                 }}
             />
         )