@ledgerhq/react-ui 0.7.2 → 0.7.5-monorepo.0

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

@@ -0,0 +1,93 @@
+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 });
+  }
+  return target;
+};
+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, {
+  Default: () => Default,
+  Error: () => Error2,
+  Success: () => Success,
+  default: () => Checkbox_stories_default
+});
+var import_react = __toModule(require("react"));
+var import_client_api = __toModule(require("@storybook/client-api"));
+var import_index = __toModule(require("./index"));
+var Checkbox_stories_default = {
+  title: "Form/SelectionControls/Checkbox",
+  component: import_index.default,
+  argTypes: {
+    isDisabled: {
+      type: "boolean",
+      description: "Control if the component is disabled or not",
+      required: false,
+      control: { type: "boolean" }
+    },
+    isChecked: {
+      type: "boolean",
+      description: "Control if the component is checked or not",
+      required: true,
+      control: { type: "boolean" }
+    },
+    variant: {
+      type: "text",
+      description: "default | success | error",
+      required: false,
+      control: false
+    },
+    label: {
+      type: "text",
+      description: "Any valid string",
+      required: false,
+      control: { type: "text" }
+    },
+    name: { control: false }
+  }
+};
+const Template = (args) => {
+  const [currentArgs, updateArgs] = (0, import_client_api.useArgs)();
+  const handleChange = () => updateArgs({ isChecked: !currentArgs.isChecked });
+  return /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+    ...args,
+    onChange: handleChange
+  });
+};
+const Default = Template.bind({});
+const Success = Template.bind({});
+const Error2 = Template.bind({});
+Default.args = {
+  isChecked: false,
+  label: "checkbox with label",
+  variant: "default",
+  name: "default checkbox"
+};
+Success.args = {
+  isChecked: false,
+  label: "checkbox with label",
+  variant: "success",
+  name: "success checkbox"
+};
+Error2.args = {
+  isChecked: false,
+  label: "checkbox with label",
+  variant: "error",
+  name: "error checkbox"
+};
+//# sourceMappingURL=Checkbox.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/form/Checkbox/Checkbox.stories.tsx"],
+  "sourcesContent": ["import React from \"react\";\n// @ts-expect-error Typings\u2026\nimport { useArgs } from \"@storybook/client-api\";\n\nimport Checkbox from \"./index\";\nimport type { CheckboxProps } from \"./Checkbox\";\nimport { StoryTemplate } from \"../../helpers\";\n\nexport default {\n  title: \"Form/SelectionControls/Checkbox\",\n  component: Checkbox,\n  argTypes: {\n    isDisabled: {\n      type: \"boolean\",\n      description: \"Control if the component is disabled or not\",\n      required: false,\n      control: { type: \"boolean\" },\n    },\n    isChecked: {\n      type: \"boolean\",\n      description: \"Control if the component is checked or not\",\n      required: true,\n      control: { type: \"boolean\" },\n    },\n    variant: {\n      type: \"text\",\n      description: \"default | success | error\",\n      required: false,\n      control: false,\n    },\n    label: {\n      type: \"text\",\n      description: \"Any valid string\",\n      required: false,\n      control: { type: \"text\" },\n    },\n    name: { control: false },\n  },\n};\n\nconst Template = (args: CheckboxProps) => {\n  const [currentArgs, updateArgs] = useArgs();\n\n  const handleChange = () => updateArgs({ isChecked: !currentArgs.isChecked });\n\n  return <Checkbox {...args} onChange={handleChange} />;\n};\n\nexport const Default: StoryTemplate<CheckboxProps> = Template.bind({});\nexport const Success: StoryTemplate<CheckboxProps> = Template.bind({});\nexport const Error: StoryTemplate<CheckboxProps> = Template.bind({});\n\nDefault.args = {\n  isChecked: false,\n  label: \"checkbox with label\",\n  variant: \"default\",\n  name: \"default checkbox\",\n};\n\nSuccess.args = {\n  isChecked: false,\n  label: \"checkbox with label\",\n  variant: \"success\",\n  name: \"success checkbox\",\n};\n\nError.args = {\n  isChecked: false,\n  label: \"checkbox with label\",\n  variant: \"error\",\n  name: \"error checkbox\",\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,wBAAwB;AAExB,mBAAqB;AAIrB,IAAO,2BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS,EAAE,MAAM;AAAA;AAAA,IAEnB,WAAW;AAAA,MACT,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS,EAAE,MAAM;AAAA;AAAA,IAEnB,SAAS;AAAA,MACP,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS;AAAA;AAAA,IAEX,OAAO;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS,EAAE,MAAM;AAAA;AAAA,IAEnB,MAAM,EAAE,SAAS;AAAA;AAAA;AAIrB,MAAM,WAAW,CAAC,SAAwB;AACxC,QAAM,CAAC,aAAa,cAAc;AAElC,QAAM,eAAe,MAAM,WAAW,EAAE,WAAW,CAAC,YAAY;AAEhE,SAAO,mDAAC,sBAAD;AAAA,OAAc;AAAA,IAAM,UAAU;AAAA;AAAA;AAGhC,MAAM,UAAwC,SAAS,KAAK;AAC5D,MAAM,UAAwC,SAAS,KAAK;AAC5D,MAAM,SAAsC,SAAS,KAAK;AAEjE,QAAQ,OAAO;AAAA,EACb,WAAW;AAAA,EACX,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AAAA;AAGR,QAAQ,OAAO;AAAA,EACb,WAAW;AAAA,EACX,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AAAA;AAGR,OAAM,OAAO;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,28 @@
+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 });
+  }
+  return target;
+};
+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, {
+  default: () => import_Checkbox.default
+});
+var import_Checkbox = __toModule(require("./Checkbox"));
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/form/Checkbox/index.ts"],
+  "sourcesContent": ["export { default } from \"./Checkbox\";\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,sBAAwB;",
+  "names": []
+}

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

@@ -0,0 +1,60 @@
+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 });
+  }
+  return target;
+};
+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, {
+  Dropdown: () => Dropdown,
+  default: () => Dropdown_stories_default
+});
+var import_react = __toModule(require("react"));
+var import__ = __toModule(require("."));
+var Dropdown_stories_default = {
+  title: "Form/SelectAndDialogs/Dropdown",
+  component: import__.default,
+  argTypes: {
+    value: { table: { disable: true } },
+    renderLeft: { table: { disable: true } },
+    renderRight: { table: { disable: true } },
+    rowHeight: { table: { disable: true } },
+    isDisabled: { type: "boolean" },
+    error: { type: "string" },
+    menuIsOpen: { type: "boolean" },
+    label: { type: "string", defaultValue: "Label" }
+  }
+};
+const options = [
+  { value: "chocolate", label: "Chocolate" },
+  { value: "strawberry", label: "Strawberry" },
+  { value: "lemon", label: "Lemon" },
+  { value: "vanilla", label: "Vanilla" }
+];
+const Dropdown = (args) => {
+  const [value, setValue] = import_react.default.useState(null);
+  return /* @__PURE__ */ import_react.default.createElement(import__.default, {
+    options,
+    value,
+    onChange: setValue,
+    menuPortalTarget: document.body,
+    ...args
+  });
+};
+//# sourceMappingURL=Dropdown.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/form/Dropdown/Dropdown.stories.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport DropdownComponent, { Props as DropdownProps } from \".\";\n\nexport default {\n  title: \"Form/SelectAndDialogs/Dropdown\",\n  component: DropdownComponent,\n  argTypes: {\n    value: { table: { disable: true } },\n    renderLeft: { table: { disable: true } },\n    renderRight: { table: { disable: true } },\n    rowHeight: { table: { disable: true } },\n    isDisabled: { type: \"boolean\" },\n    error: { type: \"string\" },\n    menuIsOpen: { type: \"boolean\" },\n    label: { type: \"string\", defaultValue: \"Label\" },\n  },\n};\n\nconst options = [\n  { value: \"chocolate\", label: \"Chocolate\" },\n  { value: \"strawberry\", label: \"Strawberry\" },\n  { value: \"lemon\", label: \"Lemon\" },\n  { value: \"vanilla\", label: \"Vanilla\" },\n];\ntype Option = typeof options[0];\n\nexport const Dropdown = (args: DropdownProps<Option>): React.ReactNode => {\n  const [value, setValue] = React.useState<Option | null>(null);\n\n  return (\n    <DropdownComponent\n      options={options}\n      value={value}\n      onChange={setValue}\n      menuPortalTarget={document.body}\n      {...args}\n    />\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,eAA0D;AAE1D,IAAO,2BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,IACR,OAAO,EAAE,OAAO,EAAE,SAAS;AAAA,IAC3B,YAAY,EAAE,OAAO,EAAE,SAAS;AAAA,IAChC,aAAa,EAAE,OAAO,EAAE,SAAS;AAAA,IACjC,WAAW,EAAE,OAAO,EAAE,SAAS;AAAA,IAC/B,YAAY,EAAE,MAAM;AAAA,IACpB,OAAO,EAAE,MAAM;AAAA,IACf,YAAY,EAAE,MAAM;AAAA,IACpB,OAAO,EAAE,MAAM,UAAU,cAAc;AAAA;AAAA;AAI3C,MAAM,UAAU;AAAA,EACd,EAAE,OAAO,aAAa,OAAO;AAAA,EAC7B,EAAE,OAAO,cAAc,OAAO;AAAA,EAC9B,EAAE,OAAO,SAAS,OAAO;AAAA,EACzB,EAAE,OAAO,WAAW,OAAO;AAAA;AAItB,MAAM,WAAW,CAAC,SAAiD;AACxE,QAAM,CAAC,OAAO,YAAY,qBAAM,SAAwB;AAExD,SACE,mDAAC,kBAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,kBAAkB,SAAS;AAAA,OACvB;AAAA;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,104 @@
+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 });
+  }
+  return target;
+};
+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, {
+  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"));
+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);
+}
+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
+    })))
+  });
+}
+function DropdownIndicatorsContainer() {
+  return null;
+}
+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
+    }
+  });
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "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": []
+}

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

@@ -0,0 +1,135 @@
+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 });
+  }
+  return target;
+};
+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, {
+  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, {
+    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 })));
+};
+var DropdownGeneric_stories_default = {
+  title: "Form/SelectAndDialogs",
+  component: import__.default,
+  argTypes: {
+    label: { type: "string", defaultValue: "Label" },
+    placement: { control: { type: "select", defaultValue: "bottom" } },
+    closeOnClickOutside: { type: "boolean", defaultValue: true },
+    closeOnClickInside: { type: "boolean", defaultValue: false },
+    disabled: { type: "boolean", defaultValue: false },
+    flipDisabled: { type: "boolean", defaultValue: false }
+  }
+};
+//# sourceMappingURL=DropdownGeneric.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "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": []
+}

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

@@ -0,0 +1,161 @@
+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 });
+  }
+  return target;
+};
+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, {
+  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"));
+const ButtonContainer = (0, import_styled_components.default)(import_Flex2.default).attrs({
+  flexDirection: "row",
+  width: "auto",
+  alignItems: "center",
+  height: "36px"
+})`
+  cursor: ${(p) => !p.disabled && "pointer"};
+  > :last-child {
+    /* targeting the dropdown icon */
+    ${(p) => p.opened && "transform: rotate(180deg);"}
+    margin-left: ${(p) => p.theme.space[3]}px;
+  }
+`;
+const DropdownContainer = (0, import_styled_components.default)(import_Flex.default).attrs(({ theme }) => {
+  const isLight = theme.colors.type === "light";
+  return {
+    zIndex: 1,
+    flexDirection: "column",
+    padding: 3,
+    border: `1px solid ${theme.colors.neutral[isLight ? "c20" : "c30"]}`,
+    borderRadius: "8px",
+    backgroundColor: isLight ? "neutral.c00" : "neutral.c20",
+    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});
+`;
+const placements = ["bottom-start", "bottom", "bottom-end"];
+const DropdownGeneric = ({
+  label,
+  closeOnClickOutside = true,
+  closeOnClickInside = false,
+  disabled = false,
+  placement = "bottom",
+  flipDisabled = false,
+  children
+}) => {
+  const divRef = (0, import_react.useRef)(null);
+  const [maxHeight, setMaxHeight] = (0, import_react.useState)();
+  const [maxWidth, setMaxWidth] = (0, import_react.useState)();
+  const [opened, setOpened] = (0, import_react.useState)(false);
+  const handleClickButton = (0, import_react.useCallback)(() => {
+    if (!disabled)
+      setOpened(!opened);
+  }, [opened, disabled]);
+  const handleClickInside = (0, import_react.useCallback)(() => {
+    if (closeOnClickInside)
+      setOpened(false);
+  }, [setOpened, closeOnClickInside]);
+  const { x, y, reference, floating, strategy, update, refs } = (0, import_react_dom.useFloating)({
+    placement: placements.includes(placement) ? placement : "bottom",
+    middleware: [
+      (0, import_react_dom.shift)(),
+      ...flipDisabled ? [] : [(0, import_react_dom.flip)()],
+      (0, import_react_dom.size)({
+        padding: 6,
+        apply({ height, width }) {
+          setMaxHeight(height);
+          setMaxWidth(width);
+        }
+      })
+    ]
+  });
+  const handleResizeOrScroll = (0, import_react.useCallback)(() => {
+    if (opened && !disabled)
+      update();
+  }, [opened, disabled, update]);
+  (0, import_react.useEffect)(() => {
+    if (!refs.reference.current || !refs.floating.current) {
+      return;
+    }
+    const parents = [
+      ...(0, import_react_dom.getScrollParents)(refs.reference.current),
+      ...(0, import_react_dom.getScrollParents)(refs.floating.current)
+    ];
+    parents.forEach((parent) => {
+      parent.addEventListener("scroll", handleResizeOrScroll);
+      parent.addEventListener("resize", handleResizeOrScroll);
+    });
+    return () => {
+      parents.forEach((parent) => {
+        parent.removeEventListener("scroll", handleResizeOrScroll);
+        parent.removeEventListener("resize", handleResizeOrScroll);
+      });
+    };
+  }, [flipDisabled, refs.reference, refs.floating, handleResizeOrScroll]);
+  (0, import_react.useEffect)(() => {
+    function handleClickOutside(event) {
+      if (closeOnClickOutside && opened && divRef.current && !divRef.current.contains(event.target)) {
+        setOpened(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [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 ? "" : ""
+    },
+    onClick: handleClickInside
+  }, children));
+};
+var DropdownGeneric_default = DropdownGeneric;
+//# sourceMappingURL=index.js.map