@ludo.ninja/components 2.3.69 → 2.3.71

package/build/components/base/PageHead/index.js

@@ -7,7 +7,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const head_1 = __importDefault(require("next/head"));
 const PageHead = ({ title, description, url, children, isoTimestamp, displayTimestamp, checksum }) => {
     const image = 'https://static.ludo.com/og/social-preview.jpg';
-    const defaultTags = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("title", { children: title }), (0, jsx_runtime_1.jsx)("meta", { name: "description", content: description }), (0, jsx_runtime_1.jsx)("meta", { property: "og:title", content: title }), (0, jsx_runtime_1.jsx)("meta", { property: "og:description", content: description }), (0, jsx_runtime_1.jsx)("meta", { property: "og:image", content: image }), (0, jsx_runtime_1.jsx)("meta", { property: "og:type", content: "website" }), (0, jsx_runtime_1.jsx)("meta", { property: "og:url", content: url }), (0, jsx_runtime_1.jsx)("meta", { property: "og:image:width", content: "1280" }), (0, jsx_runtime_1.jsx)("meta", { property: "og:image:height", content: "720" }), (0, jsx_runtime_1.jsx)("meta", { property: "og:site_name", content: "Ludo" }), (0, jsx_runtime_1.jsx)("meta", { property: "og:locale", content: "en_US" }), (0, jsx_runtime_1.jsx)("meta", { name: "twitter:card", content: "summary_large_image" }), (0, jsx_runtime_1.jsx)("meta", { name: "twitter:title", content: title }), (0, jsx_runtime_1.jsx)("meta", { name: "twitter:description", content: description }), (0, jsx_runtime_1.jsx)("meta", { name: "twitter:image", content: image }), (0, jsx_runtime_1.jsx)("meta", { name: "twitter:url", content: url })] }));
+    const defaultTags = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("title", { children: title }, "title"), (0, jsx_runtime_1.jsx)("meta", { name: "description", content: description }, "description"), (0, jsx_runtime_1.jsx)("meta", { property: "og:title", content: title }, "og:title"), (0, jsx_runtime_1.jsx)("meta", { property: "og:description", content: description }, "og:description"), (0, jsx_runtime_1.jsx)("meta", { property: "og:image", content: image }, "og:image"), (0, jsx_runtime_1.jsx)("meta", { property: "og:type", content: "website" }, "og:type"), (0, jsx_runtime_1.jsx)("meta", { property: "og:url", content: url }, "og:url"), (0, jsx_runtime_1.jsx)("meta", { property: "og:image:width", content: "1280" }, "og:image:width"), (0, jsx_runtime_1.jsx)("meta", { property: "og:image:height", content: "720" }, "og:image:height"), (0, jsx_runtime_1.jsx)("meta", { property: "og:site_name", content: "Ludo" }, "og:site_name"), (0, jsx_runtime_1.jsx)("meta", { property: "og:locale", content: "en_US" }, "og:locale"), (0, jsx_runtime_1.jsx)("meta", { name: "twitter:card", content: "summary_large_image" }, "twitter:card"), (0, jsx_runtime_1.jsx)("meta", { name: "twitter:title", content: title }, "twitter:title"), (0, jsx_runtime_1.jsx)("meta", { name: "twitter:description", content: description }, "twitter:description"), (0, jsx_runtime_1.jsx)("meta", { name: "twitter:image", content: image }, "twitter:image"), (0, jsx_runtime_1.jsx)("meta", { name: "twitter:url", content: url }, "twitter:url")] }));
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(head_1.default, { children: [defaultTags, children] }), (0, jsx_runtime_1.jsxs)("div", { id: "page-updated", className: "page-timestamp", style: {
                     position: 'absolute',
                     left: '-9999px',

package/build/components/submitNewProjectForm/blockchainSelect/index.d.ts

@@ -6,6 +6,7 @@ interface Props {
     onChangeHandler: (fieldName: keyof ICreationFilterInput & keyof ICollectionFilterInput, fieldValue: string) => Promise<void>;
     name: string;
     isError: boolean;
+    menuPortalTarget?: HTMLElement;
 }
 declare const BlockChainSelect: React.FC<Props>;
 export default BlockChainSelect;

package/build/components/submitNewProjectForm/blockchainSelect/index.js

@@ -9,6 +9,7 @@ const ScreenWidth_1 = require("../../../styles/ScreenWidth");
 const DesktopSelect_1 = __importDefault(require("../../../system/Forms/Selects/DesktopSelect"));
 const core_1 = require("@ludo.ninja/core");
 const data_1 = require("@ludo.ninja/core/build/blockchains/data");
+const vars_1 = require("@ludo.ninja/ui/build/fonts/vars");
 const colors_1 = require("@ludo.ninja/ui/build/styles/colors");
 const typography_1 = require("@ludo.ninja/ui/build/styles/typography");
 const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
@@ -28,9 +29,10 @@ const StyledSelect = (0, styled_components_1.default)(DesktopSelect_1.default) `
     .react-select__option {
       padding: 0;
       font-weight: 400;
-        &.react-select__option--is-focused{
-            background: ${colors_1.BackgroundColorLight};
-        }
+
+      &.react-select__option--is-focused {
+        background: ${colors_1.BackgroundColorLight};
+      }
     }
   }
 
@@ -122,8 +124,55 @@ const Option = (props) => {
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_select_1.components.Option, { ...props, children: (0, jsx_runtime_1.jsxs)(OptionWrapper, { children: [(0, jsx_runtime_1.jsx)(StyledImg, { width: 20, height: 20, src: props.data.icon, alt: props.label }), props.label] }) }) }));
 };
 const SingleValue = ({ children, ...props }) => ((0, jsx_runtime_1.jsx)(react_select_1.components.SingleValue, { ...props, children: (0, jsx_runtime_1.jsxs)(SingleValueWrapper, { children: [(0, jsx_runtime_1.jsx)(StyledImg, { width: 20, height: 20, src: props.data.icon, alt: props.data.label }), children] }) }));
-const BlockChainSelect = ({ isLoading, isError, onChangeHandler, defaultOptionValue, name }) => {
+const BlockChainSelect = ({ menuPortalTarget, isLoading, isError, onChangeHandler, defaultOptionValue, name, }) => {
     const getStaticENVDomain = (0, env_1.useEnvStore)((state) => state.getStaticDomain);
-    return ((0, jsx_runtime_1.jsx)(StyledSelect, { isError: isError, options: getBlockchainOptions(getStaticENVDomain()), isLoading: isLoading, isSearchable: true, onChangeHandler: onChangeHandler, name: name, customComponents: { Option, SingleValue }, defaultOptionValue: defaultOptionValue, placeholder: "Blockchain" }));
+    return ((0, jsx_runtime_1.jsx)(StyledSelect, { isError: isError, options: getBlockchainOptions(getStaticENVDomain()), isLoading: isLoading, isSearchable: true, onChangeHandler: onChangeHandler, name: name, customComponents: { Option, SingleValue }, ...(menuPortalTarget
+            ? {
+                styles: {
+                    menuPortal: (base) => ({
+                        ...base,
+                        zIndex: 999999,
+                        fontFamily: vars_1.dmsansFontVarCss.css,
+                        ".react-select__menu": {
+                            boxShadow: " 0 8px 16px 0 rgba(33, 21, 95, 0.1)",
+                            fontSize: "15px",
+                            fontWeight: "400",
+                            lineHeight: "22px",
+                            color: colors_1.TextGrayColor,
+                            margin: "4px 0",
+                            [ScreenWidth_1.mediaQuery.minWidthFourK]: {
+                                fontSize: `${(0, _4k_1.getAdaptiveValue)({ currentSize: 15, windowWidth: window.innerWidth })}px`,
+                                lineHeight: `${(0, _4k_1.getAdaptiveValue)({ currentSize: 22, windowWidth: window.innerWidth })}px`,
+                                margin: `${(0, _4k_1.getAdaptiveValue)({ currentSize: 4, windowWidth: window.innerWidth })}px 0`,
+                            },
+                        },
+                        ".react-select__menu-list": {
+                            padding: "8px",
+                            [ScreenWidth_1.mediaQuery.minWidthFourK]: {
+                                padding: `${(0, _4k_1.getAdaptiveValue)({ currentSize: 8, windowWidth: window.innerWidth })}px`,
+                            },
+                            ".react-select__option": {
+                                padding: "0",
+                                fontWeight: "400",
+                                "&.react-select__option--is-focused": {
+                                    background: colors_1.BackgroundColorLight,
+                                },
+                            },
+                            ".react-select__option--is-selected": {
+                                backgroundColor: "transparent",
+                                color: colors_1.BlackColor,
+                            },
+                            ".react-select__option--is-focused": {
+                                backgroundColor: "transparent",
+                                color: colors_1.BlackColor,
+                                transition: "font-weight 0.3s ease-in-out",
+                                cursor: "pointer",
+                            },
+                        },
+                    }),
+                },
+                menuPortalTarget: menuPortalTarget,
+            }
+            : {}), defaultOptionValue: defaultOptionValue, placeholder: "Blockchain" }));
 };
 exports.default = BlockChainSelect;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ludo.ninja/components",
-  "version": "2.3.69",
+  "version": "2.3.71",
   "private": false,
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -23,7 +23,7 @@
     "publish": "npm publish --access public -workspace @ludo.ninja/components"
   },
   "dependencies": {
-    "@ludo.ninja/api": "^3.0.91",
+    "@ludo.ninja/api": "^3.2.6",
     "@react-three/drei": "^9.68.3",
     "@react-three/fiber": "^8.13.0",
     "chart.js": "^4.4.3",