"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 __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
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 to;
};
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 Select_stories_exports = {};
__export(Select_stories_exports, {
  CustomOptions: () => CustomOptions,
  Default: () => Default,
  DisabledOption: () => DisabledOption,
  Minimal: () => Minimal,
  MultiSelect: () => MultiSelect,
  SideRenders: () => SideRenders,
  VirtualList: () => VirtualList,
  default: () => Select_stories_default
});
module.exports = __toCommonJS(Select_stories_exports);
var import_react = __toESM(require("react"));
var import_styled_components = require("styled-components");
var import_Text = __toESM(require("../../asorted/Text"));
var import_Flex = __toESM(require("../../layout/Flex"));
var import_Grid = __toESM(require("../../layout/Grid"));
var import_SearchMedium = __toESM(require("@ledgerhq/icons-ui/reactLegacy/SearchMedium"));
var import_index = __toESM(require("./index"));
var import_Option = require("./Option");
var import_VirtualMenuList = require("./VirtualMenuList");
var import_ValueContainer = require("./ValueContainer");
const description = `
### A styled Select Input control

> This component is based on [react-select](https://react-select.com/). Please refer to the [documentation](https://react-select.com/props) for an exhaustive list of available props.

## Usage

\`\`\`jsx

import { SelectInput } from "@ledgerhq/react-ui"

\`\`\`

Basically the component accepts a list of selectable options and a callback.

\`\`\`jsx
// Minimal working example

const [value, setValue] = React.useState()
const options = [
  { value: "chocolate", label: "Chocolate" },
  { value: "strawberry", label: "Strawberry" },
  { value: "vanilla", label: "Vanilla" },
]

<SelectInput
  options={options}
  value={value}
  onChange={setValue}
/>
\`\`\`

## Portaling

The opened menu is not rendered inside a portal by default.

- Use the \`menuPortalTarget\` [prop](https://react-select.com/advanced#portaling) to specify a node to root the portal.
- To specify a custom z-index you will need to override the \`menuPortal\` style.

\`\`\`jsx
<SelectInput
  menuPortalTarget={document.body}
  styles={{ menuPortal: (provided) => ({ ...provided, zIndex: 2 }) }}
/>
\`\`\`

## Extending Styles

react-select has built in support for [overriding styles](https://react-select.com/styles#provided-styles-and-state).

#### Using the \`extendStyles\` props

SelectInput contains custom built-in styles to integrate the select control with the rest of the Ledger design.

The \`extendStyles\` prop is a function that will allow you to compose new styles.
The function argument is a map between the react-select provided styles and additional ones.

\`\`\`jsx
/*
  The "styles" argument is an object containing component names as keys and functions as values.
  These functions take as arguments the styles provided by react-select and return an object of additional styles.
*/
const extendStyles = (styles) => ({
  ...styles,
  menuPortal: (provided) => {
    return {
      // "styles.menuPortal" will exist if SelectInput has custom styles for this component.
      // Otherwise, use the react-select provided ones.
      ...((styles.menuPortal && styles.menuPortal(provided)) || { ...provided }),
      // Then extend the output with your own styles!
      zIndex: 2,
    };
  },
});

<SelectInput extendStyles={extendStyles} />
\`\`\`

#### Using the \`styles\` prop

To completely override the SelectInput styles, use the \`style\` prop.

\`\`\`jsx
// The "provided" argument will only contain the base react-select styles.
const styles = { menuPortal: (provided) => ({ ...provided, zIndex: 2 }) }

<SelectInput styles={styles} />
\`\`\`

## Extending Components

react-select has built in support for [extending components](https://react-select.com/components).

To override components use the \`components\` prop:

\`\`\`jsx

<SelectInput components={{ Option: ColorOption, ValueContainer: ColorValueContainer }} />

\`\`\`

If you would like to re-use inner SelectInput components you can import them like so:

\`\`\`jsx
// Import them as modules
import * as DropdownIndicatorModule from "@ledgerhq/react-ui/components/form/SelectInput/DropdownIndicator";
import * as ValueContainerModule from "@ledgerhq/react-ui/components/form/SelectInput/ValueContainer";
import * as ControlModule from "@ledgerhq/react-ui/components/form/SelectInput/Control";
import * as MenuListModule from "@ledgerhq/react-ui/components/form/SelectInput/MenuList";
import * as OptionModule from "@ledgerhq/react-ui/components/form/SelectInput/Option";

// Then each module contains the component definition and the associated style
const { DropdownIndicator, getStyles } = DropdownIndicatorModule

<SelectInput
  components={{dropdownIndicator: DropdownIndicator}}
  styles={{dropdownIndicator: getStyles}}
/>
\`\`\`

## Sandbox

The following advanced example showcases how to override components and styles and disable elements.
`;
var Select_stories_default = {
  title: "Form/Input/Select",
  component: import_index.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" }
  },
  parameters: {
    docs: {
      description: { component: description }
    }
  }
};
const options = [
  // Labels contain muttons spaces (U+2003 character).
  // Do not replace with a regular space please!
  { value: "chocolate", label: "\u{1F36B}\u2003Chocolate" },
  { value: "strawberry", label: "\u{1F353}\u2003Strawberry" },
  { value: "lemon", label: "\u{1F34B}\u2003Lemon" },
  { value: "vanilla", label: "\u{1F366}\u2003Vanilla" }
];
const cssColors = [
  "aliceblue",
  "antiquewhite",
  "aqua",
  "aquamarine",
  "azure",
  "beige",
  "bisque",
  "black",
  "blanchedalmond",
  "blue",
  "blueviolet",
  "brown",
  "burlywood",
  "cadetblue",
  "chartreuse",
  "chocolate",
  "coral",
  "cornflowerblue",
  "cornsilk",
  "crimson",
  "cyan",
  "darkblue",
  "darkcyan",
  "darkgoldenrod",
  "darkgray",
  "darkgreen",
  "darkgrey",
  "darkkhaki",
  "darkmagenta",
  "darkolivegreen",
  "darkorange",
  "darkorchid",
  "darkred",
  "darksalmon",
  "darkseagreen",
  "darkslateblue",
  "darkslategray",
  "darkslategrey",
  "darkturquoise",
  "darkviolet",
  "deeppink",
  "deepskyblue",
  "dimgray",
  "dimgrey",
  "dodgerblue",
  "firebrick",
  "floralwhite",
  "forestgreen",
  "fuchsia",
  "gainsboro",
  "ghostwhite",
  "gold",
  "goldenrod",
  "gray",
  "green",
  "greenyellow",
  "grey",
  "honeydew",
  "hotpink",
  "indianred",
  "indigo",
  "ivory",
  "khaki",
  "lavender",
  "lavenderblush",
  "lawngreen",
  "lemonchiffon",
  "lightblue",
  "lightcoral",
  "lightcyan",
  "lightgoldenrodyellow",
  "lightgray",
  "lightgreen",
  "lightgrey",
  "lightpink",
  "lightsalmon",
  "lightseagreen",
  "lightskyblue",
  "lightslategray",
  "lightslategrey",
  "lightsteelblue",
  "lightyellow",
  "lime",
  "limegreen",
  "linen",
  "magenta",
  "maroon",
  "mediumaquamarine",
  "mediumblue",
  "mediumorchid",
  "mediumpurple",
  "mediumseagreen",
  "mediumslateblue",
  "mediumspringgreen",
  "mediumturquoise",
  "mediumvioletred",
  "midnightblue",
  "mintcream",
  "mistyrose",
  "moccasin",
  "navajowhite",
  "navy",
  "oldlace",
  "olive",
  "olivedrab",
  "orange",
  "orangered",
  "orchid",
  "palegoldenrod",
  "palegreen",
  "paleturquoise",
  "palevioletred",
  "papayawhip",
  "peachpuff",
  "peru",
  "pink",
  "plum",
  "powderblue",
  "purple",
  "red",
  "rosybrown",
  "royalblue",
  "saddlebrown",
  "salmon",
  "sandybrown",
  "seagreen",
  "seashell",
  "sienna",
  "silver",
  "skyblue",
  "slateblue",
  "slategray",
  "slategrey",
  "snow",
  "springgreen",
  "steelblue",
  "tan",
  "teal",
  "thistle",
  "tomato",
  "turquoise",
  "violet",
  "wheat",
  "white",
  "whitesmoke",
  "yellow",
  "yellowgreen"
];
const colorOptions = cssColors.map((color) => ({ label: color, value: color }));
const ColorOption = (props) => {
  return /* @__PURE__ */ import_react.default.createElement(
    import_Option.Option,
    {
      ...props,
      render: ({ children }) => /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flex: 1, py: 2, alignItems: "center" }, /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { mr: 4, p: 4, style: { background: props.data.value } }), /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flex: 1, style: { textTransform: "capitalize" } }, children))
    }
  );
};
const ColorValueContainer = (props) => {
  return /* @__PURE__ */ import_react.default.createElement(
    import_ValueContainer.ValueContainer,
    {
      render: ({ children }) => /* @__PURE__ */ import_react.default.createElement(import_Grid.default, { alignItems: "center", style: { textTransform: "capitalize" } }, children),
      ...props
    }
  );
};
const Default = (args) => {
  const [value, setValue] = import_react.default.useState(null);
  return /* @__PURE__ */ import_react.default.createElement(
    import_index.default,
    {
      options: colorOptions,
      value,
      onChange: setValue,
      placeholder: "Pick a color",
      isClearable: true,
      isOptionDisabled: (option) => option.value.startsWith("b"),
      components: { Option: ColorOption, ValueContainer: ColorValueContainer },
      renderLeft: (_) => value && /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { mr: 4, p: 4, style: { background: value.value } }),
      menuPortalTarget: document.body,
      styles: { menuPortal: (provided) => ({ ...provided, zIndex: 2 }) },
      ...args
    }
  );
};
const Minimal = (args) => {
  const [value, setValue] = import_react.default.useState(null);
  return /* @__PURE__ */ import_react.default.createElement(
    import_index.default,
    {
      options,
      value,
      onChange: setValue,
      menuPortalTarget: document.body,
      ...args
    }
  );
};
Minimal.parameters = {
  docs: {
    description: {
      story: "This is a minimal working example with only required props."
    }
  }
};
const SideRenders = (args) => {
  const [value, setValue] = import_react.default.useState(null);
  const theme = (0, import_styled_components.useTheme)();
  return /* @__PURE__ */ import_react.default.createElement(
    import_index.default,
    {
      options,
      value,
      onChange: setValue,
      renderLeft: (props) => /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { mr: 3 }, /* @__PURE__ */ import_react.default.createElement(import_SearchMedium.default, { color: props.isDisabled ? "currentColor" : theme.colors.neutral.c70 })),
      renderRight: () => /* @__PURE__ */ import_react.default.createElement(import_Text.default, { mr: 4, fontWeight: "semiBold", variant: "body", color: "inherit" }, "#Right"),
      menuPortalTarget: document.body,
      ...args
    }
  );
};
SideRenders.parameters = {
  docs: {
    description: {
      story: "This example has side renders - a magnifying glass icon on the left and custom label on the right."
    }
  }
};
const CustomOption = (props) => {
  return /* @__PURE__ */ import_react.default.createElement(
    import_Option.Option,
    {
      ...props,
      render: ({ children }) => /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flex: 1, alignItems: "center" }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, { fontWeight: "semiBold", variant: "paragraph", mr: 4 }, "#Left"), /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flex: 1, justifyContent: "space-between" }, children, /* @__PURE__ */ import_react.default.createElement(import_Text.default, { fontWeight: "semiBold", variant: "paragraph", color: "inherit" }, "#Right")))
    }
  );
};
const CustomOptions = (args) => {
  const [value, setValue] = import_react.default.useState();
  return /* @__PURE__ */ import_react.default.createElement(
    import_index.default,
    {
      options,
      value,
      onChange: setValue,
      components: { Option: CustomOption },
      menuPortalTarget: document.body,
      ...args
    }
  );
};
CustomOptions.parameters = {
  docs: {
    description: {
      story: "Here the `Option` component is overriden to display side labels (#Left and #Right)."
    }
  }
};
const DisabledOption = (args) => {
  const [value, setValue] = import_react.default.useState(null);
  return /* @__PURE__ */ import_react.default.createElement(
    import_index.default,
    {
      options,
      value,
      onChange: setValue,
      isOptionDisabled: (option) => option.value === "lemon",
      menuPortalTarget: document.body,
      ...args
    }
  );
};
DisabledOption.parameters = {
  docs: {
    description: {
      story: "Using the `isOptionDisabled` prop, options having a value that matches 'lemon' are disabled."
    }
  }
};
const hugeOptions = new Array(1e4).fill(0).map((_, i) => ({ label: "" + i, value: "" + i }));
const VirtualList = (args) => {
  const [value, setValue] = import_react.default.useState(null);
  return /* @__PURE__ */ import_react.default.createElement(
    import_index.default,
    {
      options: hugeOptions,
      value,
      onChange: setValue,
      components: {
        MenuList: import_VirtualMenuList.VirtualMenuList
      },
      menuPortalTarget: document.body,
      ...args
    }
  );
};
VirtualList.parameters = {
  docs: {
    description: {
      story: "This control contains a list of 10_000 elements. It uses the `VirtualMenuList` component to render the list inside a `react-window` wrapper."
    }
  }
};
const MultiSelect = (args) => {
  const [value, setValue] = import_react.default.useState([]);
  return /* @__PURE__ */ import_react.default.createElement(
    import_index.default,
    {
      isMulti: true,
      options,
      value,
      onChange: setValue,
      menuPortalTarget: document.body,
      ...args
    }
  );
};
MultiSelect.parameters = {
  docs: {
    description: {
      story: "A standard selector with multiselection using the `isMulti` prop."
    }
  }
};
//# sourceMappingURL=Select.stories.js.map
