@colisweb/rescript-toolkit 2.8.2 → 2.9.0-mobile

package/lib/es6_global/src/ui/Toolkit__Ui_ListboxInput.bs.js

@@ -0,0 +1,931 @@
+
+
+import * as Cx from "../../../../node_modules/rescript-classnames/lib/es6_global/src/Cx.bs.js";
+import * as Curry from "../../../../node_modules/rescript/lib/es6/curry.js";
+import * as React from "react";
+import * as Downshift from "downshift";
+import * as Belt_Array from "../../../../node_modules/rescript/lib/es6/belt_Array.js";
+import * as Belt_Option from "../../../../node_modules/rescript/lib/es6/belt_Option.js";
+import * as BsDownshift from "../vendors/BsDownshift.bs.js";
+import * as Caml_option from "../../../../node_modules/rescript/lib/es6/caml_option.js";
+import * as Md from "react-icons/md";
+import * as Js_null_undefined from "../../../../node_modules/rescript/lib/es6/js_null_undefined.js";
+import * as Toolkit__Ui_Button from "./Toolkit__Ui_Button.bs.js";
+import * as Toolkit__Ui_Listbox from "./Toolkit__Ui_Listbox.bs.js";
+
+function Toolkit__Ui_ListboxInput$ButtonInput(Props) {
+  var sizeOpt = Props.size;
+  var ariaLabel = Props.ariaLabel;
+  var ariaLabelledby = Props.ariaLabelledby;
+  var ariaExpanded = Props.ariaExpanded;
+  var id = Props.id;
+  var type_Opt = Props.type_;
+  var onClick = Props.onClick;
+  var disabledOpt = Props.disabled;
+  var isInvalid = Props.isInvalid;
+  var autoFocus = Props.autoFocus;
+  var value = Props.value;
+  var classNameOpt = Props.className;
+  var childrenOpt = Props.children;
+  var buttonRef = Props.buttonRef;
+  var size = sizeOpt !== undefined ? sizeOpt : "md";
+  var type_ = type_Opt !== undefined ? type_Opt : "button";
+  var disabled = disabledOpt !== undefined ? disabledOpt : false;
+  var className = classNameOpt !== undefined ? classNameOpt : "";
+  var children = childrenOpt !== undefined ? Caml_option.valFromOption(childrenOpt) : null;
+  var tmp = {
+    size: size,
+    color: "white",
+    variant: "default",
+    disabled: disabled,
+    type_: type_,
+    className: Cx.cx([
+          className,
+          "w-full flex justify-between",
+          Belt_Option.getWithDefault(isInvalid, false) ? "border-danger-500 shadow-danger-500" : ""
+        ]),
+    children: null
+  };
+  if (onClick !== undefined) {
+    tmp.onClick = Caml_option.valFromOption(onClick);
+  }
+  if (ariaLabel !== undefined) {
+    tmp.ariaLabel = ariaLabel;
+  }
+  if (ariaLabelledby !== undefined) {
+    tmp.ariaLabelledby = ariaLabelledby;
+  }
+  if (ariaExpanded !== undefined) {
+    tmp.ariaExpanded = ariaExpanded;
+  }
+  if (autoFocus !== undefined) {
+    tmp.autoFocus = autoFocus;
+  }
+  if (id !== undefined) {
+    tmp.id = id;
+  }
+  if (buttonRef !== undefined) {
+    tmp.buttonRef = Caml_option.valFromOption(buttonRef);
+  }
+  return React.createElement(Toolkit__Ui_Button.make, tmp, Belt_Option.mapWithDefault(value, null, (function (value) {
+                    return React.createElement("span", {
+                                className: "font-normal truncate"
+                              }, value);
+                  })), children);
+}
+
+var ButtonInput = {
+  Button: undefined,
+  make: Toolkit__Ui_ListboxInput$ButtonInput
+};
+
+function item(key, value) {
+  return /* Item */{
+          _0: key,
+          _1: value
+        };
+}
+
+function mapItem(item, fn) {
+  if (item) {
+    return Caml_option.some(Curry._1(fn, [
+                    item._0,
+                    item._1
+                  ]));
+  }
+  
+}
+
+function value(item) {
+  if (item) {
+    return Caml_option.some(item._1);
+  }
+  
+}
+
+var Item = {
+  item: item,
+  mapItem: mapItem,
+  value: value
+};
+
+function isEqualItems(itemA, itemB) {
+  if (itemA) {
+    if (itemB) {
+      return itemA._0 === itemB._0;
+    } else {
+      return false;
+    }
+  } else if (itemB) {
+    return false;
+  } else {
+    return true;
+  }
+}
+
+function getSelectionByValue(items, value) {
+  return Belt_Option.getExn(Belt_Array.getBy(items, (function (param) {
+                    return isEqualItems(value, param);
+                  })));
+}
+
+function useSelection(value, defaultValue, onChange, items) {
+  var isControlled = Belt_Option.isSome(value);
+  var match = React.useState(function () {
+        return Belt_Option.map(defaultValue, (function (param) {
+                      return getSelectionByValue(items, param);
+                    }));
+      });
+  var selection = isControlled ? Belt_Option.map(value, (function (param) {
+            return getSelectionByValue(items, param);
+          })) : match[0];
+  var setSelection = isControlled ? (function (fn) {
+        Curry._1(fn, undefined);
+        
+      }) : match[1];
+  var selectItem = React.useCallback((function (selectedItem) {
+          var newSelection = selection !== undefined ? (
+              isEqualItems(selection, selectedItem) || !selectedItem ? undefined : selectedItem
+            ) : (
+              selectedItem ? selectedItem : undefined
+            );
+          Belt_Option.map(onChange, (function (onChange) {
+                  return Curry._1(onChange, newSelection);
+                }));
+          return Curry._1(setSelection, (function (param) {
+                        return newSelection;
+                      }));
+        }), [selection]);
+  var isSelected = React.useCallback((function (item) {
+          return Belt_Option.mapWithDefault(selection, false, (function (param) {
+                        return isEqualItems(item, param);
+                      }));
+        }), [selection]);
+  return {
+          selection: selection,
+          selectItem: selectItem,
+          isSelected: isSelected
+        };
+}
+
+function getMultipleSelectionByValue(items, values) {
+  return Belt_Array.map(values, (function (value) {
+                return Belt_Option.getExn(Belt_Array.getBy(items, (function (param) {
+                                  return isEqualItems(value, param);
+                                })));
+              }));
+}
+
+function useMultipleSelection(value, defaultValue, onChange, items) {
+  var isControlled = Belt_Option.isSome(value);
+  var match = React.useState(function () {
+        return Belt_Option.mapWithDefault(defaultValue, [], (function (param) {
+                      return getMultipleSelectionByValue(items, param);
+                    }));
+      });
+  var selection = isControlled ? Belt_Option.mapWithDefault(value, [], (function (param) {
+            return getMultipleSelectionByValue(items, param);
+          })) : match[0];
+  var setSelection = isControlled ? (function (fn) {
+        Curry._1(fn, []);
+        
+      }) : match[1];
+  var selectItem = React.useCallback((function (selectedItem) {
+          var match = Belt_Array.getIndexBy(selection, (function (selection) {
+                  return isEqualItems(selection, selectedItem);
+                }));
+          var newSelection = match !== undefined ? selection.filter(function (item) {
+                  return !isEqualItems(item, selectedItem);
+                }) : (
+              selectedItem ? selection.concat([selectedItem]) : []
+            );
+          Belt_Option.map(onChange, (function (fn) {
+                  return Curry._1(fn, newSelection);
+                }));
+          return Curry._1(setSelection, (function (param) {
+                        return newSelection;
+                      }));
+        }), [selection]);
+  var isSelected = React.useCallback((function (item) {
+          return Belt_Option.isSome(Belt_Array.getBy(selection, (function (selection) {
+                            return isEqualItems(selection, item);
+                          })));
+        }), [selection]);
+  return {
+          selection: selection,
+          selectItem: selectItem,
+          isSelected: isSelected
+        };
+}
+
+var listboxInputContext = React.createContext(undefined);
+
+function useListboxInputContext(param) {
+  return Belt_Option.getExn(React.useContext(listboxInputContext));
+}
+
+function makeProps(value, children, param) {
+  return {
+          value: Caml_option.some(value),
+          children: children
+        };
+}
+
+var make = listboxInputContext.Provider;
+
+var ListboxInputProvider = {
+  makeProps: makeProps,
+  make: make
+};
+
+var make$1 = React.forwardRef(function (Props, ref_) {
+      var classNameOpt = Props.className;
+      var children = Props.children;
+      var className = classNameOpt !== undefined ? classNameOpt : "";
+      var match = Belt_Option.getExn(React.useContext(listboxInputContext));
+      var tmp = {
+        isOpen: match.api.isOpen,
+        className: className,
+        children: children
+      };
+      var tmp$1 = Belt_Option.map((ref_ == null) ? undefined : Caml_option.some(ref_), (function (prim) {
+              return prim;
+            }));
+      if (tmp$1 !== undefined) {
+        tmp.ref = Caml_option.valFromOption(tmp$1);
+      }
+      return React.createElement(Toolkit__Ui_Listbox.ListboxPopover.make, tmp);
+    });
+
+var ListboxInputPopover = {
+  make: make$1
+};
+
+var make$2 = React.forwardRef(function (Props, ref_) {
+      var classNameOpt = Props.className;
+      var onBlur = Props.onBlur;
+      var children = Props.children;
+      var className = classNameOpt !== undefined ? classNameOpt : "";
+      var match = Belt_Option.getExn(React.useContext(listboxInputContext));
+      var api = match.api;
+      var tmp = {
+        ref: Belt_Option.map((ref_ == null) ? undefined : Caml_option.some(ref_), (function (prim) {
+                return prim;
+              }))
+      };
+      if (onBlur !== undefined) {
+        tmp.onBlur = Caml_option.valFromOption(onBlur);
+      }
+      var menuProps = Curry._1(api.getMenuProps, tmp);
+      return React.createElement(Toolkit__Ui_Listbox.ListboxList.make, {
+                  isOpen: api.isOpen,
+                  ariaLabelledby: menuProps["aria-labelledby"],
+                  ariaActivedescendant: menuProps["aria-activedescendant"],
+                  role: menuProps.role,
+                  id: menuProps.id,
+                  onMouseLeave: menuProps.onMouseLeave,
+                  onKeyDown: menuProps.onKeyDown,
+                  onBlur: menuProps.onBlur,
+                  tabIndex: menuProps.tabIndex,
+                  className: Cx.cx([
+                        className,
+                        "max-w-sm"
+                      ]),
+                  children: api.isOpen ? children : null,
+                  ref: menuProps.ref
+                });
+    });
+
+var ListboxInputList = {
+  make: make$2
+};
+
+function Toolkit__Ui_ListboxInput$ListboxInputButton(Props) {
+  var size = Props.size;
+  var id = Props.id;
+  var onClick = Props.onClick;
+  var disabled = Props.disabled;
+  var autoFocus = Props.autoFocus;
+  var isInvalid = Props.isInvalid;
+  var classNameOpt = Props.className;
+  var children = Props.children;
+  var buttonRefOpt = Props.buttonRef;
+  var className = classNameOpt !== undefined ? classNameOpt : "";
+  var buttonRef = buttonRefOpt !== undefined ? Caml_option.valFromOption(buttonRefOpt) : null;
+  var match = Belt_Option.getExn(React.useContext(listboxInputContext));
+  var tmp = {
+    ref: Belt_Option.map((buttonRef == null) ? undefined : Caml_option.some(buttonRef), (function (prim) {
+            return prim;
+          }))
+  };
+  if (id !== undefined) {
+    tmp.id = id;
+  }
+  if (onClick !== undefined) {
+    tmp.onClick = Caml_option.valFromOption(onClick);
+  }
+  if (disabled !== undefined) {
+    tmp.disabled = disabled;
+  }
+  var toggleButtonProps = Curry._1(match.api.getToggleButtonProps, tmp);
+  var tmp$1 = {
+    ariaLabel: "toggle menu",
+    ariaLabelledby: toggleButtonProps["aria-labelledby"],
+    ariaExpanded: toggleButtonProps["aria-expanded"],
+    id: toggleButtonProps.id,
+    onClick: toggleButtonProps.onClick,
+    disabled: toggleButtonProps.disabled,
+    className: className,
+    children: children,
+    buttonRef: toggleButtonProps.ref
+  };
+  if (size !== undefined) {
+    tmp$1.size = Caml_option.valFromOption(size);
+  }
+  if (isInvalid !== undefined) {
+    tmp$1.isInvalid = isInvalid;
+  }
+  if (autoFocus !== undefined) {
+    tmp$1.autoFocus = autoFocus;
+  }
+  return React.createElement(Toolkit__Ui_ListboxInput$ButtonInput, tmp$1);
+}
+
+var ListboxInputButton = {
+  make: Toolkit__Ui_ListboxInput$ListboxInputButton
+};
+
+var make$3 = React.forwardRef(function (Props, ref_) {
+      var item = Props.item;
+      var index = Props.index;
+      var onClick = Props.onClick;
+      var disabled = Props.disabled;
+      var classNameOpt = Props.className;
+      var children = Props.children;
+      var className = classNameOpt !== undefined ? classNameOpt : "";
+      var match = Belt_Option.getExn(React.useContext(listboxInputContext));
+      var api = match.api;
+      var tmp = {
+        item: item,
+        index: index
+      };
+      if (onClick !== undefined) {
+        tmp.onClick = Caml_option.valFromOption(onClick);
+      }
+      if (disabled !== undefined) {
+        tmp.disabled = disabled;
+      }
+      var itemProps = Curry._1(api.getItemProps, tmp);
+      var tmp$1 = {
+        ariaSelected: itemProps["aria-selected"] === "true",
+        id: itemProps.id,
+        role: itemProps.role,
+        onClick: itemProps.onClick,
+        onMouseMove: itemProps.onMouseMove,
+        disabled: itemProps.disabled,
+        isHighlighted: api.highlightedIndex === index,
+        className: Cx.cx([
+              className,
+              "pr-8",
+              item === /* Placeholder */0 ? "italic" : ""
+            ]),
+        children: null
+      };
+      var tmp$2 = Belt_Option.map((ref_ == null) ? undefined : Caml_option.some(ref_), (function (prim) {
+              return prim;
+            }));
+      if (tmp$2 !== undefined) {
+        tmp$1.ref = Caml_option.valFromOption(tmp$2);
+      }
+      return React.createElement(Toolkit__Ui_Listbox.ListboxOption.make, tmp$1, Curry._1(match.isSelected, item) ? React.createElement(Md.MdCheck, {
+                        className: "mr-4 w-6 h-6 flex-none"
+                      }) : React.createElement("span", {
+                        className: "mr-4 w-6 h-6 flex-none"
+                      }), React.createElement("span", {
+                      className: "truncate"
+                    }, children));
+    });
+
+var ListboxInputOption = {
+  make: make$3
+};
+
+function Toolkit__Ui_ListboxInput$ListboxInputSelectProvider(Props) {
+  var id = Props.id;
+  var name = Props.name;
+  var value = Props.value;
+  var defaultValue = Props.defaultValue;
+  var items = Props.items;
+  var itemToString = Props.itemToString;
+  var onChange = Props.onChange;
+  var required = Props.required;
+  var children = Props.children;
+  var match = useSelection(value, defaultValue, onChange, items);
+  var selectItem = match.selectItem;
+  var selection = match.selection;
+  var stateReducer = function (_state, param) {
+    var changes = param.changes;
+    var match = BsDownshift.Select.action(param.type);
+    if (match !== 20) {
+      if (match >= 12) {
+        return changes;
+      }
+      switch (match) {
+        case /* MenuKeyDownArrowDown */0 :
+        case /* MenuKeyDownArrowUp */1 :
+        case /* MenuKeyDownEscape */2 :
+        case /* MenuKeyDownHome */3 :
+        case /* MenuKeyDownEnd */4 :
+        case /* MenuKeyDownCharacter */7 :
+        case /* MenuBlur */8 :
+        case /* MenuMouseLeave */9 :
+        case /* ItemMouseMove */10 :
+            return changes;
+        case /* MenuKeyDownEnter */5 :
+        case /* MenuKeyDownSpaceButton */6 :
+        case /* ItemClick */11 :
+            break;
+        
+      }
+    }
+    var selectedItem = Belt_Option.getExn(Caml_option.nullable_to_opt(changes.selectedItem));
+    Curry._1(selectItem, selectedItem);
+    return changes;
+  };
+  var api = Downshift.useSelect({
+        items: items,
+        itemToString: (function (item) {
+            return Belt_Option.mapWithDefault((item == null) ? undefined : Caml_option.some(item), "", itemToString);
+          }),
+        stateReducer: stateReducer,
+        selectedItem: Js_null_undefined.fromOption(selection)
+      });
+  var tmp = {
+    readOnly: true,
+    type: "hidden",
+    value: Belt_Option.mapWithDefault(selection, "", itemToString)
+  };
+  if (id !== undefined) {
+    tmp.id = Caml_option.valFromOption(id);
+  }
+  if (name !== undefined) {
+    tmp.name = Caml_option.valFromOption(name);
+  }
+  if (required !== undefined) {
+    tmp.required = Caml_option.valFromOption(required);
+  }
+  return React.createElement(make, makeProps({
+                  api: api,
+                  isSelected: match.isSelected
+                }, React.createElement("div", {
+                      className: "relative"
+                    }, React.createElement("input", tmp), Curry._2(children, selection, items)), undefined));
+}
+
+var ListboxInputSelectProvider = {
+  make: Toolkit__Ui_ListboxInput$ListboxInputSelectProvider
+};
+
+function Toolkit__Ui_ListboxInput$ListboxInputSelect(Props) {
+  var id = Props.id;
+  var name = Props.name;
+  var placeholderOpt = Props.placeholder;
+  var value = Props.value;
+  var defaultValue = Props.defaultValue;
+  var items = Props.items;
+  var itemToLabel = Props.itemToLabel;
+  var itemToId = Props.itemToId;
+  var onChange = Props.onChange;
+  var onBlur = Props.onBlur;
+  var required = Props.required;
+  var disabledOpt = Props.disabled;
+  var isInvalid = Props.isInvalid;
+  var autoFocus = Props.autoFocus;
+  var sizeOpt = Props.size;
+  var hasPlaceholderOptionOpt = Props.hasPlaceholderOption;
+  var classNameOpt = Props.className;
+  var placeholder = placeholderOpt !== undefined ? placeholderOpt : "Select";
+  var disabled = disabledOpt !== undefined ? disabledOpt : false;
+  var size = sizeOpt !== undefined ? sizeOpt : "md";
+  var hasPlaceholderOption = hasPlaceholderOptionOpt !== undefined ? hasPlaceholderOptionOpt : false;
+  var className = classNameOpt !== undefined ? classNameOpt : "";
+  var itemToId$1 = function (value) {
+    return Belt_Option.mapWithDefault(itemToId, value, (function (itemToId) {
+                  return Curry._1(itemToId, value);
+                }));
+  };
+  var itemToString = function (item) {
+    return Belt_Option.getWithDefault(mapItem(item, (function (param) {
+                      var value = param[1];
+                      return Belt_Option.mapWithDefault(itemToLabel, value, (function (itemToLabel) {
+                                    return Curry._1(itemToLabel, value);
+                                  }));
+                    })), "");
+  };
+  var __x = Belt_Array.map(items, (function (value) {
+          return /* Item */{
+                  _0: itemToId$1(value),
+                  _1: value
+                };
+        }));
+  var items$1 = Belt_Array.concat(hasPlaceholderOption ? [/* Placeholder */0] : [], __x);
+  var value$1 = Belt_Option.flatMap(value, (function (value) {
+          return Belt_Array.getBy(items$1, (function (item) {
+                        return Belt_Option.getWithDefault(mapItem(item, (function (param) {
+                                          return param[0] === itemToId$1(value);
+                                        })), false);
+                      }));
+        }));
+  var defaultValue$1 = Belt_Option.flatMap(defaultValue, (function (value) {
+          return Belt_Array.getBy(items$1, (function (item) {
+                        return Belt_Option.getWithDefault(mapItem(item, (function (param) {
+                                          return param[0] === itemToId$1(value);
+                                        })), false);
+                      }));
+        }));
+  var onChange$1 = Belt_Option.map(onChange, (function (onChange, value) {
+          return Curry._1(onChange, Belt_Option.flatMap(value, (function (__x) {
+                            return mapItem(__x, (function (param) {
+                                          return param[1];
+                                        }));
+                          })));
+        }));
+  var tmp = {
+    items: items$1,
+    itemToString: itemToString,
+    children: (function (selection, items) {
+        var tmp = {
+          size: size,
+          disabled: disabled,
+          className: Cx.cx([
+                className,
+                "w-full flex justify-between"
+              ]),
+          children: null
+        };
+        if (id !== undefined) {
+          tmp.id = id;
+        }
+        if (autoFocus !== undefined) {
+          tmp.autoFocus = autoFocus;
+        }
+        if (isInvalid !== undefined) {
+          tmp.isInvalid = isInvalid;
+        }
+        var tmp$1 = {
+          children: Belt_Array.mapWithIndex(items, (function (index, item) {
+                  if (item) {
+                    return React.createElement(make$3, {
+                                item: item,
+                                index: index,
+                                children: itemToString(item),
+                                key: item._0
+                              });
+                  } else {
+                    return React.createElement(make$3, {
+                                item: item,
+                                index: index,
+                                children: placeholder,
+                                key: "placeholder"
+                              });
+                  }
+                }))
+        };
+        if (onBlur !== undefined) {
+          tmp$1.onBlur = Caml_option.valFromOption(onBlur);
+        }
+        return React.createElement(React.Fragment, undefined, React.createElement(Toolkit__Ui_ListboxInput$ListboxInputButton, tmp, React.createElement("span", {
+                            className: "truncate font-normal"
+                          }, Belt_Option.mapWithDefault(Belt_Option.mapWithDefault(value$1, selection, (function (value) {
+                                      return getSelectionByValue(items, value);
+                                    })), placeholder, itemToString)), React.createElement(Md.MdArrowDropDown, {
+                            className: "ml-2 w-6 h-6 -my-1 flex-none"
+                          })), React.createElement(make$1, {
+                        className: "-mt-12",
+                        children: React.createElement(make$2, tmp$1)
+                      }));
+      })
+  };
+  if (name !== undefined) {
+    tmp.name = name;
+  }
+  if (value$1 !== undefined) {
+    tmp.value = Caml_option.valFromOption(value$1);
+  }
+  if (defaultValue$1 !== undefined) {
+    tmp.defaultValue = Caml_option.valFromOption(defaultValue$1);
+  }
+  if (onChange$1 !== undefined) {
+    tmp.onChange = Caml_option.valFromOption(onChange$1);
+  }
+  if (required !== undefined) {
+    tmp.required = required;
+  }
+  return React.createElement(Toolkit__Ui_ListboxInput$ListboxInputSelectProvider, tmp);
+}
+
+var ListboxInputSelect = {
+  make: Toolkit__Ui_ListboxInput$ListboxInputSelect
+};
+
+function Toolkit__Ui_ListboxInput$ListboxInputMultiSelectProvider(Props) {
+  var id = Props.id;
+  var name = Props.name;
+  var value = Props.value;
+  var defaultValue = Props.defaultValue;
+  var itemToString = Props.itemToString;
+  var items = Props.items;
+  var onChange = Props.onChange;
+  var required = Props.required;
+  var children = Props.children;
+  var match = useMultipleSelection(value, defaultValue, onChange, items);
+  var selectItem = match.selectItem;
+  var selection = match.selection;
+  var stateReducer = function (state, param) {
+    var changes = param.changes;
+    var match = BsDownshift.Select.action(param.type);
+    if (match !== 20) {
+      if (match >= 12) {
+        return changes;
+      }
+      switch (match) {
+        case /* MenuKeyDownArrowDown */0 :
+        case /* MenuKeyDownArrowUp */1 :
+        case /* MenuKeyDownEscape */2 :
+        case /* MenuKeyDownHome */3 :
+        case /* MenuKeyDownEnd */4 :
+        case /* MenuKeyDownCharacter */7 :
+        case /* MenuBlur */8 :
+        case /* MenuMouseLeave */9 :
+        case /* ItemMouseMove */10 :
+            return changes;
+        case /* MenuKeyDownEnter */5 :
+        case /* MenuKeyDownSpaceButton */6 :
+        case /* ItemClick */11 :
+            break;
+        
+      }
+    }
+    var selectedItem = Belt_Option.getExn(Caml_option.nullable_to_opt(changes.selectedItem));
+    Curry._1(selectItem, selectedItem);
+    return {
+            isOpen: selectedItem ? true : false,
+            selectedItem: changes.selectedItem,
+            inputValue: changes.inputValue,
+            highlightedIndex: state.highlightedIndex
+          };
+  };
+  var api = Downshift.useSelect({
+        items: items,
+        itemToString: (function (item) {
+            return Belt_Option.mapWithDefault((item == null) ? undefined : Caml_option.some(item), "", itemToString);
+          }),
+        stateReducer: stateReducer,
+        selectedItem: Js_null_undefined.fromOption(Belt_Array.get(selection, 0))
+      });
+  var tmp = {
+    readOnly: true,
+    type: "hidden",
+    value: selection
+  };
+  if (id !== undefined) {
+    tmp.id = Caml_option.valFromOption(id);
+  }
+  if (name !== undefined) {
+    tmp.name = Caml_option.valFromOption(name);
+  }
+  if (required !== undefined) {
+    tmp.required = Caml_option.valFromOption(required);
+  }
+  return React.createElement(make, makeProps({
+                  api: api,
+                  isSelected: match.isSelected
+                }, React.createElement("div", {
+                      className: "relative"
+                    }, React.createElement("input", tmp), Curry._2(children, selection, items)), undefined));
+}
+
+var ListboxInputMultiSelectProvider = {
+  make: Toolkit__Ui_ListboxInput$ListboxInputMultiSelectProvider
+};
+
+function Toolkit__Ui_ListboxInput$ListboxInputMultiSelect(Props) {
+  var id = Props.id;
+  var name = Props.name;
+  var placeholderOpt = Props.placeholder;
+  var value = Props.value;
+  var defaultValue = Props.defaultValue;
+  var items = Props.items;
+  var itemToLabel = Props.itemToLabel;
+  var itemToId = Props.itemToId;
+  var onChange = Props.onChange;
+  var onBlur = Props.onBlur;
+  var required = Props.required;
+  var disabledOpt = Props.disabled;
+  var isInvalid = Props.isInvalid;
+  var autoFocus = Props.autoFocus;
+  var sizeOpt = Props.size;
+  var hasPlaceholderOptionOpt = Props.hasPlaceholderOption;
+  var classNameOpt = Props.className;
+  var placeholder = placeholderOpt !== undefined ? placeholderOpt : "Select";
+  var disabled = disabledOpt !== undefined ? disabledOpt : false;
+  var size = sizeOpt !== undefined ? sizeOpt : "md";
+  var hasPlaceholderOption = hasPlaceholderOptionOpt !== undefined ? hasPlaceholderOptionOpt : false;
+  var className = classNameOpt !== undefined ? classNameOpt : "";
+  var itemToId$1 = function (value) {
+    return Belt_Option.mapWithDefault(itemToId, value, (function (itemToId) {
+                  return Curry._1(itemToId, value);
+                }));
+  };
+  var itemToString = function (item) {
+    return Belt_Option.getWithDefault(mapItem(item, (function (param) {
+                      var value = param[1];
+                      return Belt_Option.mapWithDefault(itemToLabel, value, (function (itemToLabel) {
+                                    return Curry._1(itemToLabel, value);
+                                  }));
+                    })), "");
+  };
+  var __x = Belt_Array.map(items, (function (value) {
+          return /* Item */{
+                  _0: itemToId$1(value),
+                  _1: value
+                };
+        }));
+  var items$1 = Belt_Array.concat(hasPlaceholderOption ? [/* Placeholder */0] : [], __x);
+  var value$1 = Belt_Option.map(value, (function (value) {
+          return Belt_Array.keepMap(value, (function (value) {
+                        return Belt_Array.getBy(items$1, (function (item) {
+                                      return Belt_Option.getWithDefault(mapItem(item, (function (param) {
+                                                        return param[0] === itemToId$1(value);
+                                                      })), false);
+                                    }));
+                      }));
+        }));
+  var defaultValue$1 = Belt_Option.map(defaultValue, (function (value) {
+          return Belt_Array.keepMap(value, (function (value) {
+                        return Belt_Array.getBy(items$1, (function (item) {
+                                      return Belt_Option.getWithDefault(mapItem(item, (function (param) {
+                                                        return param[0] === itemToId$1(value);
+                                                      })), false);
+                                    }));
+                      }));
+        }));
+  var onChange$1 = Belt_Option.map(onChange, (function (onChange, value) {
+          return Curry._1(onChange, Belt_Array.keepMap(value, (function (__x) {
+                            return mapItem(__x, (function (param) {
+                                          return param[1];
+                                        }));
+                          })));
+        }));
+  var tmp = {
+    itemToString: itemToString,
+    items: items$1,
+    children: (function (selection, items) {
+        var tmp = {
+          size: size,
+          disabled: disabled,
+          className: Cx.cx([
+                className,
+                "w-full flex justify-between"
+              ]),
+          children: null
+        };
+        if (id !== undefined) {
+          tmp.id = id;
+        }
+        if (autoFocus !== undefined) {
+          tmp.autoFocus = autoFocus;
+        }
+        if (isInvalid !== undefined) {
+          tmp.isInvalid = isInvalid;
+        }
+        var items$1 = Belt_Option.mapWithDefault(value$1, selection, (function (value) {
+                return getMultipleSelectionByValue(items, value);
+              }));
+        var tmp$1 = {
+          children: null
+        };
+        if (onBlur !== undefined) {
+          tmp$1.onBlur = Caml_option.valFromOption(onBlur);
+        }
+        return React.createElement(React.Fragment, undefined, React.createElement(Toolkit__Ui_ListboxInput$ListboxInputButton, tmp, React.createElement("span", {
+                            className: "truncate font-normal"
+                          }, items$1.length !== 0 ? Belt_Array.map(items$1, itemToString).join(", ") : placeholder), React.createElement(Md.MdArrowDropDown, {
+                            className: "ml-2 w-6 h-6 -my-1 flex-none"
+                          })), React.createElement(make$1, {
+                        className: "-mt-12",
+                        children: React.createElement(make$2, tmp$1, React.createElement("input", undefined), Belt_Array.mapWithIndex(items, (function (index, item) {
+                                    if (item) {
+                                      return React.createElement(make$3, {
+                                                  item: item,
+                                                  index: index,
+                                                  children: itemToString(item),
+                                                  key: item._0
+                                                });
+                                    } else {
+                                      return React.createElement(make$3, {
+                                                  item: item,
+                                                  index: index,
+                                                  children: placeholder,
+                                                  key: "placeholder"
+                                                });
+                                    }
+                                  })))
+                      }));
+      })
+  };
+  if (name !== undefined) {
+    tmp.name = name;
+  }
+  if (value$1 !== undefined) {
+    tmp.value = Caml_option.valFromOption(value$1);
+  }
+  if (defaultValue$1 !== undefined) {
+    tmp.defaultValue = Caml_option.valFromOption(defaultValue$1);
+  }
+  if (onChange$1 !== undefined) {
+    tmp.onChange = Caml_option.valFromOption(onChange$1);
+  }
+  if (required !== undefined) {
+    tmp.required = required;
+  }
+  return React.createElement(Toolkit__Ui_ListboxInput$ListboxInputMultiSelectProvider, tmp);
+}
+
+var ListboxInputMultiSelect = {
+  make: Toolkit__Ui_ListboxInput$ListboxInputMultiSelect
+};
+
+var Listbox;
+
+var ListboxInputGroupLabel;
+
+var ListboxInputLabel;
+
+var ListboxInputDivider;
+
+var Popover;
+
+var Provider;
+
+var List;
+
+var Button;
+
+var $$Option;
+
+var Label;
+
+var GroupLabel;
+
+var Divider;
+
+var SelectProvider;
+
+var Select;
+
+var MultiSelectProvider;
+
+var MultiSelect;
+
+export {
+  Listbox ,
+  ButtonInput ,
+  Item ,
+  item ,
+  mapItem ,
+  value ,
+  isEqualItems ,
+  getSelectionByValue ,
+  useSelection ,
+  getMultipleSelectionByValue ,
+  useMultipleSelection ,
+  listboxInputContext ,
+  useListboxInputContext ,
+  ListboxInputProvider ,
+  ListboxInputPopover ,
+  ListboxInputList ,
+  ListboxInputButton ,
+  ListboxInputOption ,
+  ListboxInputGroupLabel ,
+  ListboxInputLabel ,
+  ListboxInputDivider ,
+  ListboxInputSelectProvider ,
+  ListboxInputSelect ,
+  ListboxInputMultiSelectProvider ,
+  ListboxInputMultiSelect ,
+  Popover ,
+  Provider ,
+  List ,
+  Button ,
+  $$Option ,
+  Label ,
+  GroupLabel ,
+  Divider ,
+  SelectProvider ,
+  Select ,
+  MultiSelectProvider ,
+  MultiSelect ,
+  
+}
+/* listboxInputContext Not a pure module */