@ledgerhq/react-ui 0.12.1 → 0.13.0-next.0

package/lib/cjs/components/form/Dropdown/index.js

@@ -1,66 +1,58 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
-  __markAsModule(target);
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toModule = (module2) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-__export(exports, {
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Dropdown_exports = {};
+__export(Dropdown_exports, {
   default: () => Dropdown
 });
-var import_react = __toModule(require("react"));
-var import_react_select = __toModule(require("react-select"));
-var import_styled_components = __toModule(require("styled-components"));
-var import_SelectInput = __toModule(require("../../form/SelectInput"));
-var import_Text = __toModule(require("../../asorted/Text"));
-var import__ = __toModule(require("../../../"));
-var import_ValueContainer = __toModule(require("../../form/SelectInput/ValueContainer"));
-var import_Flex = __toModule(require("../../layout/Flex"));
+module.exports = __toCommonJS(Dropdown_exports);
+var import_react = __toESM(require("react"));
+var import_react_select = require("react-select");
+var import_styled_components = require("styled-components");
+var import_SelectInput = __toESM(require("../../form/SelectInput"));
+var import_Text = __toESM(require("../../asorted/Text"));
+var import__ = require("../../../");
+var import_ValueContainer = require("../../form/SelectInput/ValueContainer");
+var import_Flex = __toESM(require("../../layout/Flex"));
 function DropdownControl(props) {
   const { selectProps, children } = props;
   const { label } = selectProps;
-  return /* @__PURE__ */ import_react.default.createElement(import_react_select.components.Control, {
-    ...props
-  }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
-    variant: "paragraph",
-    fontWeight: "medium",
-    color: "neutral.c80",
-    mr: 2
-  }, label), children);
+  return /* @__PURE__ */ import_react.default.createElement(import_react_select.components.Control, { ...props }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "paragraph", fontWeight: "medium", color: "neutral.c80", mr: 2 }, label), children);
 }
 function DropdownValueContainer(props) {
   const isOpen = props.selectProps.menuIsOpen;
-  return /* @__PURE__ */ import_react.default.createElement(import_ValueContainer.ValueContainer, {
-    ...props,
-    render: () => /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
-      alignItems: "center"
-    }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
-      variant: "paragraph",
-      fontWeight: "medium",
-      mr: 2
-    }, /* @__PURE__ */ import_react.default.createElement(import_Flex.default, null, props.children)), /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
-      alignItems: "center",
-      style: { transform: isOpen ? "rotate(180deg)" : "" }
-    }, /* @__PURE__ */ import_react.default.createElement(import__.Icons.DropdownMedium, {
-      size: 20
-    })))
-  });
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_ValueContainer.ValueContainer,
+    {
+      ...props,
+      render: () => /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { alignItems: "center" }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "paragraph", fontWeight: "medium", mr: 2 }, /* @__PURE__ */ import_react.default.createElement(import_Flex.default, null, props.children)), /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { alignItems: "center", style: { transform: isOpen ? "rotate(180deg)" : "" } }, /* @__PURE__ */ import_react.default.createElement(import__.Icons.DropdownMedium, { size: 20 })))
+    }
+  );
 }
 function DropdownIndicatorsContainer() {
   return null;
@@ -68,37 +60,40 @@ function DropdownIndicatorsContainer() {
 function Dropdown(props) {
   const theme = (0, import_styled_components.useTheme)();
   const { styles, ...rest } = props;
-  return /* @__PURE__ */ import_react.default.createElement(import_SelectInput.default, {
-    placeholder: "",
-    isSearchable: false,
-    styles: {
-      singleValue: (provided) => ({
-        ...provided,
-        color: theme.colors.neutral.c100,
-        margin: 0,
-        top: void 0,
-        position: void 0,
-        overflow: void 0,
-        maxWidth: void 0,
-        transform: void 0
-      }),
-      input: () => ({ display: "none" }),
-      menu: (provided) => ({
-        ...provided,
-        border: 0,
-        boxShadow: "none",
-        background: "none",
-        width: "auto",
-        minWidth: "200px"
-      }),
-      ...styles
-    },
-    ...rest,
-    components: {
-      Control: DropdownControl,
-      ValueContainer: DropdownValueContainer,
-      IndicatorsContainer: DropdownIndicatorsContainer
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_SelectInput.default,
+    {
+      placeholder: "",
+      isSearchable: false,
+      styles: {
+        singleValue: (provided) => ({
+          ...provided,
+          color: theme.colors.neutral.c100,
+          margin: 0,
+          top: void 0,
+          position: void 0,
+          overflow: void 0,
+          maxWidth: void 0,
+          transform: void 0
+        }),
+        input: () => ({ display: "none" }),
+        menu: (provided) => ({
+          ...provided,
+          border: 0,
+          boxShadow: "none",
+          background: "none",
+          width: "auto",
+          minWidth: "200px"
+        }),
+        ...styles
+      },
+      ...rest,
+      components: {
+        Control: DropdownControl,
+        ValueContainer: DropdownValueContainer,
+        IndicatorsContainer: DropdownIndicatorsContainer
+      }
     }
-  });
+  );
 }
 //# sourceMappingURL=index.js.map

package/lib/cjs/components/form/Dropdown/index.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../src/components/form/Dropdown/index.tsx"],
   "sourcesContent": ["import React from \"react\";\nimport { components, GroupBase, ControlProps, ValueContainerProps } from \"react-select\";\nimport { useTheme } from \"styled-components\";\nimport SelectInput, { Props as SelectInputProps } from \"../../form/SelectInput\";\nimport Text from \"../../asorted/Text\";\nimport { Icons } from \"../../../\";\nimport { ValueContainer } from \"../../form/SelectInput/ValueContainer\";\nimport FlexBox from \"../../layout/Flex\";\n\nexport type Props<O> = SelectInputProps<O, false, GroupBase<O>> & {\n  label: string;\n};\n\nfunction DropdownControl<O, M extends boolean, G extends GroupBase<O>>(\n  props: ControlProps<O, M, G>,\n) {\n  const { selectProps, children } = props;\n  const { label } = selectProps as unknown as Props<O>;\n\n  return (\n    <components.Control {...props}>\n      <Text variant=\"paragraph\" fontWeight=\"medium\" color=\"neutral.c80\" mr={2}>\n        {label}\n      </Text>\n      {children}\n    </components.Control>\n  );\n}\n\nfunction DropdownValueContainer<O>(props: ValueContainerProps<O, false>) {\n  const isOpen = props.selectProps.menuIsOpen;\n\n  return (\n    <ValueContainer\n      {...props}\n      render={() => (\n        <FlexBox alignItems=\"center\">\n          <Text variant=\"paragraph\" fontWeight=\"medium\" mr={2}>\n            <FlexBox>{props.children}</FlexBox>\n          </Text>\n          <FlexBox alignItems=\"center\" style={{ transform: isOpen ? \"rotate(180deg)\" : \"\" }}>\n            <Icons.DropdownMedium size={20} />\n          </FlexBox>\n        </FlexBox>\n      )}\n    />\n  );\n}\n\nfunction DropdownIndicatorsContainer() {\n  return null;\n}\n\nexport default function Dropdown<O>(props: Props<O>): JSX.Element {\n  const theme = useTheme();\n  const { styles, ...rest } = props;\n\n  return (\n    <SelectInput\n      placeholder=\"\"\n      isSearchable={false}\n      styles={{\n        singleValue: (provided) => ({\n          ...provided,\n          color: theme.colors.neutral.c100,\n          margin: 0,\n          top: undefined,\n          position: undefined,\n          overflow: undefined,\n          maxWidth: undefined,\n          transform: undefined,\n        }),\n        input: () => ({ display: \"none\" }),\n        menu: (provided) => ({\n          ...provided,\n          border: 0,\n          boxShadow: \"none\",\n          background: \"none\",\n          width: \"auto\",\n          minWidth: \"200px\",\n        }),\n        ...styles,\n      }}\n      {...rest}\n      components={{\n        Control: DropdownControl,\n        ValueContainer: DropdownValueContainer,\n        IndicatorsContainer: DropdownIndicatorsContainer,\n      }}\n    />\n  );\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,0BAAyE;AACzE,+BAAyB;AACzB,yBAAuD;AACvD,kBAAiB;AACjB,eAAsB;AACtB,4BAA+B;AAC/B,kBAAoB;AAMpB,yBACE,OACA;AACA,QAAM,EAAE,aAAa,aAAa;AAClC,QAAM,EAAE,UAAU;AAElB,SACE,mDAAC,+BAAW,SAAZ;AAAA,OAAwB;AAAA,KACtB,mDAAC,qBAAD;AAAA,IAAM,SAAQ;AAAA,IAAY,YAAW;AAAA,IAAS,OAAM;AAAA,IAAc,IAAI;AAAA,KACnE,QAEF;AAAA;AAKP,gCAAmC,OAAsC;AACvE,QAAM,SAAS,MAAM,YAAY;AAEjC,SACE,mDAAC,sCAAD;AAAA,OACM;AAAA,IACJ,QAAQ,MACN,mDAAC,qBAAD;AAAA,MAAS,YAAW;AAAA,OAClB,mDAAC,qBAAD;AAAA,MAAM,SAAQ;AAAA,MAAY,YAAW;AAAA,MAAS,IAAI;AAAA,OAChD,mDAAC,qBAAD,MAAU,MAAM,YAElB,mDAAC,qBAAD;AAAA,MAAS,YAAW;AAAA,MAAS,OAAO,EAAE,WAAW,SAAS,mBAAmB;AAAA,OAC3E,mDAAC,eAAM,gBAAP;AAAA,MAAsB,MAAM;AAAA;AAAA;AAAA;AAQxC,uCAAuC;AACrC,SAAO;AAAA;AAGM,kBAAqB,OAA8B;AAChE,QAAM,QAAQ;AACd,QAAM,EAAE,WAAW,SAAS;AAE5B,SACE,mDAAC,4BAAD;AAAA,IACE,aAAY;AAAA,IACZ,cAAc;AAAA,IACd,QAAQ;AAAA,MACN,aAAa,CAAC,aAAc;AAAA,WACvB;AAAA,QACH,OAAO,MAAM,OAAO,QAAQ;AAAA,QAC5B,QAAQ;AAAA,QACR,KAAK;AAAA,QACL,UAAU;AAAA,QACV,UAAU;AAAA,QACV,UAAU;AAAA,QACV,WAAW;AAAA;AAAA,MAEb,OAAO,MAAO,GAAE,SAAS;AAAA,MACzB,MAAM,CAAC,aAAc;AAAA,WAChB;AAAA,QACH,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,YAAY;AAAA,QACZ,OAAO;AAAA,QACP,UAAU;AAAA;AAAA,SAET;AAAA;AAAA,OAED;AAAA,IACJ,YAAY;AAAA,MACV,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,qBAAqB;AAAA;AAAA;AAAA;",
-  "names": []
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,0BAAyE;AACzE,+BAAyB;AACzB,yBAAuD;AACvD,kBAAiB;AACjB,eAAsB;AACtB,4BAA+B;AAC/B,kBAAoB;AAMpB,SAAS,gBACP,OACA;AACA,QAAM,EAAE,aAAa,SAAS,IAAI;AAClC,QAAM,EAAE,MAAM,IAAI;AAElB,SACE,6BAAAA,QAAA,cAAC,+BAAW,SAAX,EAAoB,GAAG,SACtB,6BAAAA,QAAA,cAAC,YAAAC,SAAA,EAAK,SAAQ,aAAY,YAAW,UAAS,OAAM,eAAc,IAAI,KACnE,KACH,GACC,QACH;AAEJ;AAEA,SAAS,uBAA0B,OAAsC;AACvE,QAAM,SAAS,MAAM,YAAY;AAEjC,SACE,6BAAAD,QAAA;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,QAAQ,MACN,6BAAAA,QAAA,cAAC,YAAAE,SAAA,EAAQ,YAAW,YAClB,6BAAAF,QAAA,cAAC,YAAAC,SAAA,EAAK,SAAQ,aAAY,YAAW,UAAS,IAAI,KAChD,6BAAAD,QAAA,cAAC,YAAAE,SAAA,MAAS,MAAM,QAAS,CAC3B,GACA,6BAAAF,QAAA,cAAC,YAAAE,SAAA,EAAQ,YAAW,UAAS,OAAO,EAAE,WAAW,SAAS,mBAAmB,GAAG,KAC9E,6BAAAF,QAAA,cAAC,eAAM,gBAAN,EAAqB,MAAM,IAAI,CAClC,CACF;AAAA;AAAA,EAEJ;AAEJ;AAEA,SAAS,8BAA8B;AACrC,SAAO;AACT;AAEe,SAAR,SAA6B,OAA8B;AAChE,QAAM,YAAQ,mCAAS;AACvB,QAAM,EAAE,QAAQ,GAAG,KAAK,IAAI;AAE5B,SACE,6BAAAA,QAAA;AAAA,IAAC,mBAAAG;AAAA,IAAA;AAAA,MACC,aAAY;AAAA,MACZ,cAAc;AAAA,MACd,QAAQ;AAAA,QACN,aAAa,CAAC,cAAc;AAAA,UAC1B,GAAG;AAAA,UACH,OAAO,MAAM,OAAO,QAAQ;AAAA,UAC5B,QAAQ;AAAA,UACR,KAAK;AAAA,UACL,UAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU;AAAA,UACV,WAAW;AAAA,QACb;AAAA,QACA,OAAO,OAAO,EAAE,SAAS,OAAO;AAAA,QAChC,MAAM,CAAC,cAAc;AAAA,UACnB,GAAG;AAAA,UACH,QAAQ;AAAA,UACR,WAAW;AAAA,UACX,YAAY;AAAA,UACZ,OAAO;AAAA,UACP,UAAU;AAAA,QACZ;AAAA,QACA,GAAG;AAAA,MACL;AAAA,MACC,GAAG;AAAA,MACJ,YAAY;AAAA,QACV,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,qBAAqB;AAAA,MACvB;AAAA;AAAA,EACF;AAEJ;",
+  "names": ["React", "Text", "FlexBox", "SelectInput"]
 }

package/lib/cjs/components/form/DropdownGeneric/DropdownGeneric.stories.js

@@ -1,124 +1,105 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
-  __markAsModule(target);
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toModule = (module2) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-__export(exports, {
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DropdownGeneric_stories_exports = {};
+__export(DropdownGeneric_stories_exports, {
   DropdownGeneric: () => DropdownGeneric,
   default: () => DropdownGeneric_stories_default
 });
-var import_react = __toModule(require("react"));
-var import_Flex = __toModule(require("../../layout/Flex"));
-var import_Box = __toModule(require("../../layout/Box"));
-var import_Text = __toModule(require("../../asorted/Text"));
-var import_Alert = __toModule(require("../../message/Alert"));
-var import__ = __toModule(require("."));
-var import_Divider = __toModule(require("../../asorted/Divider"));
-const SmallChild = () => /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
-  height: 200,
-  width: 180,
-  padding: 10,
-  backgroundColor: "neutral.c30",
-  justifyContent: "center",
-  alignItems: "center"
-}, /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
-  variant: "small",
-  color: "neutral.c60",
-  textAlign: "center"
-}, "I'm a simple div with a grey background and no margin passed as children of the dropdown component."));
-const BigChild = ({ containerProps }) => /* @__PURE__ */ import_react.default.createElement(import_Box.default, {
-  padding: 10,
-  flexDirection: "column",
-  width: "300px",
-  justifyContent: "center",
-  alignItems: "center",
-  ...containerProps
-}, /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
-  variant: "small",
-  color: "neutral.c60",
-  textAlign: "center"
-}, "If the children node of the dropdown is bigger than the available space, the dropdown will restrict its own height to avoid overflowing and its inner container will scroll."), /* @__PURE__ */ import_react.default.createElement(import_Box.default, {
-  height: "100px",
-  width: "100%",
-  backgroundColor: "primary.c100"
-}), /* @__PURE__ */ import_react.default.createElement(import_Box.default, {
-  height: "100px",
-  width: "100%",
-  backgroundColor: "primary.c90"
-}), /* @__PURE__ */ import_react.default.createElement(import_Box.default, {
-  height: "100px",
-  width: "100%",
-  backgroundColor: "primary.c80"
-}), /* @__PURE__ */ import_react.default.createElement(import_Box.default, {
-  height: "100px",
-  width: "100%",
-  backgroundColor: "primary.c70"
-}), /* @__PURE__ */ import_react.default.createElement(import_Box.default, {
-  height: "100px",
-  width: "100%",
-  backgroundColor: "primary.c60"
-}));
-const BottomPlaceholder = () => /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
-  width: "100%",
-  height: "100px",
-  backgroundColor: "neutral.c30",
-  justifyContent: "center",
-  alignItems: "center",
-  padding: 20
-}, /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
-  variant: "small",
-  color: "palette.neutral.c50",
-  textAlign: "center"
-}, "Ignore me, I'm just an item placed below to illustrate that the dropdown is a floating component"));
-const DropdownStoryTemplate = (props) => {
-  const { containerProps = {}, big = false, bigWithMaxHeight = false, ...rest } = props;
-  return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
+module.exports = __toCommonJS(DropdownGeneric_stories_exports);
+var import_react = __toESM(require("react"));
+var import_Flex = __toESM(require("../../layout/Flex"));
+var import_Box = __toESM(require("../../layout/Box"));
+var import_Text = __toESM(require("../../asorted/Text"));
+var import_Alert = __toESM(require("../../message/Alert"));
+var import__ = __toESM(require("."));
+var import_Divider = __toESM(require("../../asorted/Divider"));
+const SmallChild = () => /* @__PURE__ */ import_react.default.createElement(
+  import_Flex.default,
+  {
+    height: 200,
+    width: 180,
+    padding: 10,
+    backgroundColor: "neutral.c30",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "small", color: "neutral.c60", textAlign: "center" }, "I'm a simple div with a grey background and no margin passed as children of the dropdown component.")
+);
+const BigChild = ({ containerProps }) => /* @__PURE__ */ import_react.default.createElement(
+  import_Box.default,
+  {
+    padding: 10,
     flexDirection: "column",
+    width: "300px",
+    justifyContent: "center",
+    alignItems: "center",
     ...containerProps
-  }, /* @__PURE__ */ import_react.default.createElement(import__.default, {
-    ...rest
-  }, big ? bigWithMaxHeight ? /* @__PURE__ */ import_react.default.createElement(BigChild, {
-    containerProps: { maxHeight: "400px", overflow: "scroll" }
-  }) : /* @__PURE__ */ import_react.default.createElement(BigChild, null) : /* @__PURE__ */ import_react.default.createElement(SmallChild, null)), /* @__PURE__ */ import_react.default.createElement(BottomPlaceholder, null));
+  },
+  /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "small", color: "neutral.c60", textAlign: "center" }, "If the children node of the dropdown is bigger than the available space, the dropdown will restrict its own height to avoid overflowing and its inner container will scroll."),
+  /* @__PURE__ */ import_react.default.createElement(import_Box.default, { height: "100px", width: "100%", backgroundColor: "primary.c100" }),
+  /* @__PURE__ */ import_react.default.createElement(import_Box.default, { height: "100px", width: "100%", backgroundColor: "primary.c90" }),
+  /* @__PURE__ */ import_react.default.createElement(import_Box.default, { height: "100px", width: "100%", backgroundColor: "primary.c80" }),
+  /* @__PURE__ */ import_react.default.createElement(import_Box.default, { height: "100px", width: "100%", backgroundColor: "primary.c70" }),
+  /* @__PURE__ */ import_react.default.createElement(import_Box.default, { height: "100px", width: "100%", backgroundColor: "primary.c60" })
+);
+const BottomPlaceholder = () => /* @__PURE__ */ import_react.default.createElement(
+  import_Flex.default,
+  {
+    width: "100%",
+    height: "100px",
+    backgroundColor: "neutral.c30",
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 20
+  },
+  /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "small", color: "palette.neutral.c50", textAlign: "center" }, "Ignore me, I'm just an item placed below to illustrate that the dropdown is a floating component")
+);
+const DropdownStoryTemplate = (props) => {
+  const { containerProps = {}, big = false, bigWithMaxHeight = false, ...rest } = props;
+  return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flexDirection: "column", ...containerProps }, /* @__PURE__ */ import_react.default.createElement(import__.default, { ...rest }, big ? bigWithMaxHeight ? /* @__PURE__ */ import_react.default.createElement(BigChild, { containerProps: { maxHeight: "400px", overflow: "scroll" } }) : /* @__PURE__ */ import_react.default.createElement(BigChild, null) : /* @__PURE__ */ import_react.default.createElement(SmallChild, null)), /* @__PURE__ */ import_react.default.createElement(BottomPlaceholder, null));
 };
 const DropdownGeneric = (args) => {
   const alignItemsPossibilities = ["flex-start", "center", "flex-end"];
   const containerPropsPossibilities = alignItemsPossibilities.map((alignItems) => ({ alignItems }));
-  return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
-    flexDirection: "column",
-    rowGap: 5
-  }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
-    variant: "h5"
-  }, "Small content:"), containerPropsPossibilities.map((containerProps) => DropdownStoryTemplate({ ...args, containerProps })), /* @__PURE__ */ import_react.default.createElement(import_Divider.default, {
-    variant: "light"
-  }), /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
-    variant: "h5"
-  }, "Big content:"), containerPropsPossibilities.map((containerProps) => DropdownStoryTemplate({ ...args, big: true, containerProps })), /* @__PURE__ */ import_react.default.createElement(import_Divider.default, {
-    variant: "light"
-  }), /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
-    variant: "h5"
-  }, "Big content (max height on child)"), /* @__PURE__ */ import_react.default.createElement(import_Alert.default, {
-    type: "info",
-    title: "In the following examples, the component passed as a child has its own internal maxHeight\n        setup"
-  }), containerPropsPossibilities.map((containerProps) => DropdownStoryTemplate({ ...args, big: true, bigWithMaxHeight: true, containerProps })));
+  return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flexDirection: "column", rowGap: 5 }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "h5" }, "Small content:"), containerPropsPossibilities.map(
+    (containerProps) => DropdownStoryTemplate({ ...args, containerProps })
+  ), /* @__PURE__ */ import_react.default.createElement(import_Divider.default, { variant: "light" }), /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "h5" }, "Big content:"), containerPropsPossibilities.map(
+    (containerProps) => DropdownStoryTemplate({ ...args, big: true, containerProps })
+  ), /* @__PURE__ */ import_react.default.createElement(import_Divider.default, { variant: "light" }), /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "h5" }, "Big content (max height on child)"), /* @__PURE__ */ import_react.default.createElement(
+    import_Alert.default,
+    {
+      type: "info",
+      title: "In the following examples, the component passed as a child has its own internal maxHeight\n        setup"
+    }
+  ), containerPropsPossibilities.map(
+    (containerProps) => DropdownStoryTemplate({ ...args, big: true, bigWithMaxHeight: true, containerProps })
+  ));
 };
 var DropdownGeneric_stories_default = {
   title: "Form/SelectAndDialogs",

package/lib/cjs/components/form/DropdownGeneric/DropdownGeneric.stories.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../src/components/form/DropdownGeneric/DropdownGeneric.stories.tsx"],
   "sourcesContent": ["import React from \"react\";\nimport Flex from \"../../layout/Flex\";\nimport Box from \"../../layout/Box\";\nimport Text from \"../../asorted/Text\";\nimport Alert from \"../../message/Alert\";\nimport DropdownGenericComponent, { Props as DropdownGenericProps } from \".\";\nimport Divider from \"../../asorted/Divider\";\n\nconst SmallChild = () => (\n  <Flex\n    height={200}\n    width={180}\n    padding={10}\n    backgroundColor=\"neutral.c30\"\n    justifyContent=\"center\"\n    alignItems=\"center\"\n  >\n    <Text variant=\"small\" color=\"neutral.c60\" textAlign=\"center\">\n      I'm a simple div with a grey background and no margin passed as children of the dropdown\n      component.\n    </Text>\n  </Flex>\n);\n\nconst BigChild = ({ containerProps }: { containerProps?: Record<string, unknown> }) => (\n  <Box\n    padding={10}\n    flexDirection=\"column\"\n    width=\"300px\"\n    justifyContent=\"center\"\n    alignItems=\"center\"\n    {...containerProps}\n  >\n    <Text variant=\"small\" color=\"neutral.c60\" textAlign=\"center\">\n      If the children node of the dropdown is bigger than the available space, the dropdown will\n      restrict its own height to avoid overflowing and its inner container will scroll.\n    </Text>\n    <Box height=\"100px\" width=\"100%\" backgroundColor=\"primary.c100\" />\n    <Box height=\"100px\" width=\"100%\" backgroundColor=\"primary.c90\" />\n    <Box height=\"100px\" width=\"100%\" backgroundColor=\"primary.c80\" />\n    <Box height=\"100px\" width=\"100%\" backgroundColor=\"primary.c70\" />\n    <Box height=\"100px\" width=\"100%\" backgroundColor=\"primary.c60\" />\n  </Box>\n);\n\nconst BottomPlaceholder = () => (\n  <Flex\n    width=\"100%\"\n    height=\"100px\"\n    backgroundColor=\"neutral.c30\"\n    justifyContent=\"center\"\n    alignItems=\"center\"\n    padding={20}\n  >\n    <Text variant=\"small\" color=\"palette.neutral.c50\" textAlign=\"center\">\n      Ignore me, I'm just an item placed below to illustrate that the dropdown is a floating\n      component\n    </Text>\n  </Flex>\n);\n\nconst DropdownStoryTemplate = (\n  props: Omit<DropdownGenericProps, \"children\"> & {\n    big?: boolean;\n    bigWithMaxHeight?: boolean;\n    containerProps: Record<string, unknown>;\n  },\n) => {\n  const { containerProps = {}, big = false, bigWithMaxHeight = false, ...rest } = props;\n  return (\n    <Flex flexDirection=\"column\" {...containerProps}>\n      <DropdownGenericComponent {...rest}>\n        {big ? (\n          bigWithMaxHeight ? (\n            <BigChild containerProps={{ maxHeight: \"400px\", overflow: \"scroll\" }} />\n          ) : (\n            <BigChild />\n          )\n        ) : (\n          <SmallChild />\n        )}\n      </DropdownGenericComponent>\n      <BottomPlaceholder />\n    </Flex>\n  );\n};\n\nexport const DropdownGeneric = (args: DropdownGenericProps): React.ReactNode => {\n  const alignItemsPossibilities = [\"flex-start\", \"center\", \"flex-end\"];\n  const containerPropsPossibilities = alignItemsPossibilities.map((alignItems) => ({ alignItems }));\n  return (\n    <Flex flexDirection=\"column\" rowGap={5}>\n      {/**\n       * Calling DropdownTemplate as a function here to trick storybook into displaying\n       * the actual code in \"show code\" instead of an opaque \"DropdownTemplate\" component\n       *  */}\n      <Text variant=\"h5\">Small content:</Text>\n      {containerPropsPossibilities.map((containerProps) =>\n        DropdownStoryTemplate({ ...args, containerProps }),\n      )}\n      <Divider variant=\"light\" />\n      <Text variant=\"h5\">Big content:</Text>\n      {containerPropsPossibilities.map((containerProps) =>\n        DropdownStoryTemplate({ ...args, big: true, containerProps }),\n      )}\n      <Divider variant=\"light\" />\n      <Text variant=\"h5\">Big content (max height on child)</Text>\n      <Alert\n        type=\"info\"\n        title=\"In the following examples, the component passed as a child has its own internal maxHeight\n        setup\"\n      ></Alert>\n      {containerPropsPossibilities.map((containerProps) =>\n        DropdownStoryTemplate({ ...args, big: true, bigWithMaxHeight: true, containerProps }),\n      )}\n    </Flex>\n  );\n};\n\nexport default {\n  title: \"Form/SelectAndDialogs\",\n  component: DropdownGenericComponent,\n  argTypes: {\n    label: { type: \"string\", defaultValue: \"Label\" },\n    placement: { control: { type: \"select\", defaultValue: \"bottom\" } },\n    closeOnClickOutside: { type: \"boolean\", defaultValue: true },\n    closeOnClickInside: { type: \"boolean\", defaultValue: false },\n    disabled: { type: \"boolean\", defaultValue: false },\n    flipDisabled: { type: \"boolean\", defaultValue: false },\n  },\n};\n"],
-  "mappings": "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",
-  "names": []
+  "mappings": "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",
+  "names": ["React", "Flex", "Text", "Box", "DropdownGenericComponent", "Divider", "Alert"]
 }

package/lib/cjs/components/form/DropdownGeneric/index.js

@@ -1,37 +1,44 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
-  __markAsModule(target);
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toModule = (module2) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-__export(exports, {
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DropdownGeneric_exports = {};
+__export(DropdownGeneric_exports, {
   default: () => DropdownGeneric_default,
   placements: () => placements
 });
-var import_react = __toModule(require("react"));
-var import_react_dom = __toModule(require("@floating-ui/react-dom"));
-var import_styled_components = __toModule(require("styled-components"));
-var import__ = __toModule(require("../../../"));
-var import_Flex = __toModule(require("../../layout/Flex"));
-var import_Flex2 = __toModule(require("../../layout/Flex"));
-var import_Text = __toModule(require("../../asorted/Text"));
+module.exports = __toCommonJS(DropdownGeneric_exports);
+var import_react = __toESM(require("react"));
+var import_react_dom = require("@floating-ui/react-dom");
+var import_styled_components = __toESM(require("styled-components"));
+var import__ = require("../../../");
+var import_Flex = __toESM(require("../../layout/Flex"));
+var import_Flex2 = __toESM(require("../../layout/Flex"));
+var import_Text = __toESM(require("../../asorted/Text"));
 const ButtonContainer = (0, import_styled_components.default)(import_Flex2.default).attrs({
   flexDirection: "row",
   width: "auto",
@@ -131,31 +138,32 @@ const DropdownGeneric = ({
     };
   }, [closeOnClickOutside, opened, setOpened, divRef]);
   const color = disabled ? "neutral.c50" : "neutral.c100";
-  return /* @__PURE__ */ import_react.default.createElement(import_Flex2.default, {
-    ref: divRef
-  }, /* @__PURE__ */ import_react.default.createElement(ButtonContainer, {
-    ref: reference,
-    onClick: handleClickButton,
-    disabled,
-    opened: opened && !disabled
-  }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
-    variant: "paragraph",
-    fontWeight: "medium",
-    color
-  }, label), /* @__PURE__ */ import_react.default.createElement(import__.Icons.DropdownMedium, {
-    size: 20,
-    color
-  })), opened && !disabled && /* @__PURE__ */ import_react.default.createElement(DropdownContainer, {
-    ref: floating,
-    style: {
-      position: strategy,
-      top: y ?? "",
-      left: x ?? "",
-      maxHeight: maxHeight ? `${maxHeight}px` : "",
-      maxWidth: maxWidth ? "" : ""
+  return /* @__PURE__ */ import_react.default.createElement(import_Flex2.default, { ref: divRef }, /* @__PURE__ */ import_react.default.createElement(
+    ButtonContainer,
+    {
+      ref: reference,
+      onClick: handleClickButton,
+      disabled,
+      opened: opened && !disabled
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "paragraph", fontWeight: "medium", color }, label),
+    /* @__PURE__ */ import_react.default.createElement(import__.Icons.DropdownMedium, { size: 20, color })
+  ), opened && !disabled && /* @__PURE__ */ import_react.default.createElement(
+    DropdownContainer,
+    {
+      ref: floating,
+      style: {
+        position: strategy,
+        top: y ?? "",
+        left: x ?? "",
+        maxHeight: maxHeight ? `${maxHeight}px` : "",
+        maxWidth: maxWidth ? "" : ""
+        // maxWidth: maxWidth ? `${maxWidth}px` : "", /* TODO: fix this */
+      },
+      onClick: handleClickInside
     },
-    onClick: handleClickInside
-  }, children));
+    children
+  ));
 };
 var DropdownGeneric_default = DropdownGeneric;
 //# sourceMappingURL=index.js.map