@colisweb/rescript-toolkit 2.9.0-mobile → 2.10.1

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

@@ -1,931 +0,0 @@
-
-
-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 */