@ledgerhq/react-ui 0.7.1 → 0.7.2

package/components/form/DropdownGeneric/index.d.ts

@@ -26,11 +26,17 @@ export declare type Props = {
      */
     children: React.ReactNode;
     /**
-     * Horizontal position of the dropdown relative to the dropdown button.
+     * Vertical alignment of the dropdown relative to the dropdown button.
      * Will automatically adjust to the document to avoid overflowing.
      * Defaults to "bottom".
      */
     placement?: Placement;
+    /**
+     * Controls whether the dropdown will flip its side to keep it in view
+     * in case there isn't enough space available. See https://floating-ui.com/docs/flip
+     * Defaults to false.
+     */
+    flipDisabled?: boolean;
 };
-declare const DropdownGeneric: ({ label, closeOnClickOutside, closeOnClickInside, disabled, placement, children, }: Props) => JSX.Element;
+declare const DropdownGeneric: ({ label, closeOnClickOutside, closeOnClickInside, disabled, placement, flipDisabled, children, }: Props) => JSX.Element;
 export default DropdownGeneric;

package/components/form/DropdownGeneric/index.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import { useFloating, getScrollParents, shift, flip } from "@floating-ui/react-dom";
+import { useFloating, getScrollParents, shift, size, flip } from "@floating-ui/react-dom";
 import styled from "styled-components";
 import { Icons } from "../../../";
 import Flex from "../../layout/Flex";
@@ -15,13 +15,13 @@ const ButtonContainer = styled(Box).attrs({
   > :last-child {
     /* targeting the dropdown icon */
     ${(p) => p.opened && "transform: rotate(180deg);"}
-    margin: 0px ${(p) => p.theme.space[3]}px;
+    margin-left: ${(p) => p.theme.space[3]}px;
   }
 `;
 const DropdownContainer = styled(Flex).attrs(({ theme }) => {
     const isLight = theme.colors.type === "light";
     return {
-        display: "flex",
+        zIndex: 1,
         flexDirection: "column",
         padding: 3,
         border: `1px solid ${theme.colors.neutral[isLight ? "c20" : "c30"]}`,
@@ -30,11 +30,14 @@ const DropdownContainer = styled(Flex).attrs(({ theme }) => {
         color: theme.colors.neutral.c80,
     };
 }) `
+  overflow-y: auto;
   box-shadow: 0px 6px 12px rgba(0, 0, 0, ${(p) => (p.theme.colors.type === "light" ? 0.04 : 0.08)});
 `;
 export const placements = ["bottom-start", "bottom", "bottom-end"];
-const DropdownGeneric = ({ label, closeOnClickOutside = true, closeOnClickInside = false, disabled = false, placement = "bottom", children, }) => {
+const DropdownGeneric = ({ label, closeOnClickOutside = true, closeOnClickInside = false, disabled = false, placement = "bottom", flipDisabled = false, children, }) => {
     const divRef = useRef(null);
+    const [maxHeight, setMaxHeight] = useState();
+    const [maxWidth, setMaxWidth] = useState();
     const [opened, setOpened] = useState(false);
     const handleClickButton = useCallback(() => {
         if (!disabled)
@@ -46,7 +49,17 @@ const DropdownGeneric = ({ label, closeOnClickOutside = true, closeOnClickInside
     }, [setOpened, closeOnClickInside]);
     const { x, y, reference, floating, strategy, update, refs } = useFloating({
         placement: placements.includes(placement) ? placement : "bottom",
-        middleware: [shift(), flip()],
+        middleware: [
+            shift(),
+            ...(flipDisabled ? [] : [flip()]),
+            size({
+                padding: 6,
+                apply({ height, width }) {
+                    setMaxHeight(height);
+                    setMaxWidth(width);
+                },
+            }),
+        ],
     });
     const handleResizeOrScroll = useCallback(() => {
         if (opened && !disabled)
@@ -70,7 +83,7 @@ const DropdownGeneric = ({ label, closeOnClickOutside = true, closeOnClickInside
                 parent.removeEventListener("resize", handleResizeOrScroll);
             });
         };
-    }, [opened, disabled, refs.reference, refs.floating, handleResizeOrScroll]);
+    }, [flipDisabled, refs.reference, refs.floating, handleResizeOrScroll]);
     useEffect(() => {
         function handleClickOutside(event) {
             if (closeOnClickOutside &&
@@ -86,10 +99,17 @@ const DropdownGeneric = ({ label, closeOnClickOutside = true, closeOnClickInside
         };
     }, [closeOnClickOutside, opened, setOpened, divRef]);
     const color = disabled ? "neutral.c50" : "neutral.c100";
-    return (React.createElement("div", { ref: divRef },
+    return (React.createElement(Box, { ref: divRef },
         React.createElement(ButtonContainer, { ref: reference, onClick: handleClickButton, disabled: disabled, opened: opened && !disabled },
             React.createElement(Text, { variant: "paragraph", fontWeight: "medium", color: color }, label),
             React.createElement(Icons.DropdownMedium, { size: 20, color: color })),
-        opened && !disabled && (React.createElement(DropdownContainer, { ref: floating, style: { overflow: "visible", position: strategy, top: y !== null && y !== void 0 ? y : "", left: x !== null && x !== void 0 ? x : "" }, onClick: handleClickInside }, children))));
+        opened && !disabled && (React.createElement(DropdownContainer, { ref: floating, style: {
+                position: strategy,
+                top: y !== null && y !== void 0 ? y : "",
+                left: x !== null && x !== void 0 ? x : "",
+                maxHeight: maxHeight ? `${maxHeight}px` : "",
+                maxWidth: maxWidth ? "" : "",
+                // maxWidth: maxWidth ? `${maxWidth}px` : "", /* TODO: fix this */
+            }, onClick: handleClickInside }, children))));
 };
 export default DropdownGeneric;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ledgerhq/react-ui",
   "description": "Ledger Live - Desktop UI",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "author": "Ledger Live Team <team-live@ledger.fr>",
   "repository": "https://github.com/LedgerHQ/ui",
   "license": "MIT",