@startlibs/form 1.1.3 → 1.2.0-rc.2

package/lib-yak/Combobox.mjs

@@ -0,0 +1,652 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _isString from 'lodash/fp/isString';
+import _isFinite from 'lodash/fp/isFinite';
+import _sortBy from 'lodash/fp/sortBy';
+import _filter from 'lodash/fp/filter';
+import _flow from 'lodash/fp/flow';
+import _identity from 'lodash/fp/identity';
+import { yakDomTag } from '@startlibs/utils/yakDomTag';
+import React, { useRef, useEffect, useMemo } from 'react';
+import { styled, css } from '@yak/react';
+import { FixedSizeList } from 'react-window';
+import { ContextListMenu, ListItem, Icon, Loading, willUseIsSticky, usePositioning, getDialogLayersSize, ListSeparator } from '@startlibs/components';
+import { useRefState, useEnsureRef, useToggle, useLazyConstant, useUpdateEffect, Fill } from '@startlibs/core';
+import { getColor, getUID, normalizeText, callIfFunction, ifUndefined } from '@startlibs/utils';
+import { Field } from './Field.mjs';
+import { TextInput } from './TextInput.mjs';
+import { useInput } from './enhanceInput.mjs';
+
+const _excluded = ["getLabel", "getLabelAs", "getBoxLabelAs", "getIcon", "scrollContainer", "className", "options", "autoFocus", "autoOpenMenu", "mandatory", "placeholder", "disabled", "fieldValue", "label", "path", "withWindowing", "tabIndex", "fieldClassName", "descText", "helpText", "raw", "digitable", "digitableConstraint", "digitableAsOption", "suggestive", "onDigitableChange", "footerOptions", "isLoading", "isOptionDisabled", "menuRef", "overrideSetValue", "transformOnSelect", "check"],
+  _excluded2 = ["setValue", "icon", "option", "onHover", "checked", "label", "setRef"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const ComboboxMenu = styled(ContextListMenu).attrs({
+  className: "styled-combobox-menu"
+})`
+  z-index: 100;
+  background-color: white;
+  border-radius: 4px 4px 6px 6px;
+  margin-top: -1px;
+  margin-bottom: 0.5rem;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 10px -2px rgba(0,0,0,0.15), 0 1px 2px 0px rgba(0,0,0,0.2);
+  border: 1px solid #b4b4b4;
+  max-height: 25rem;
+  width: auto;
+  ${ListItem} > * {
+    font-size: 13px;
+  }
+  @media (max-width: 600px) {
+    ${ListItem} > * {
+      font-size: 14px;
+    }
+  }
+  ${props => props.withoutIcons && css`
+    ${ListItem} > * {
+      padding-left: 1.25rem;
+      padding-right: 1.25rem;
+    }
+  `}
+  ${props => props.withWindowing && css`
+    overflow: hidden;
+    padding: 0;
+  `}
+`;
+const ComboboxInput = styled(yakDomTag("div")).attrs({
+  className: "styled-combobox-input"
+})`
+  width: 100%;
+  font-size: 14px;
+  border: 1px solid ${__yakProps => {
+  const v = getColor('gray210');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+  border-radius: 8px;
+  color: ${__yakProps => {
+  const v = getColor('gray60');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+  background: white;
+  position: relative;
+  display: block;
+  min-height: 3rem;
+  padding: 0.5rem 2.5rem 0.5rem 0.7rem;
+  overflow: auto;
+  outline: 0;
+  outline: none;
+  cursor: pointer;
+  user-select: none;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  word-break: break-word;
+  ${props => props.suggestive && css`
+    padding-right: 0.7rem;
+  `}
+  @media (max-width: 600px) {
+      min-height: 42px;
+      padding-left: 1rem;
+      ${props => props.suggestive && css`
+        padding-right: 1rem;
+      `}
+  }
+  ${props => props.isFocused && css`
+    border-color: ${__yakProps => {
+  const v = getColor('gray180');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+    box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.1);
+  `}
+  &:focus {
+    border-color: ${__yakProps => {
+  const v = getColor('gray180');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+    box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.1);
+  }
+  ${props => props.hasErrors && css`
+    border-color: ${__yakProps => {
+  const v = getColor('alert');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}} !important;
+  `}
+  input {
+    position: absolute;
+    top: -1px;
+    left: 0;
+    border: none;
+    ${props => !props.suggestive && css`
+      padding-right: 2.5rem;
+    `}
+  }
+`;
+const ComboboxDropdownIcon = styled(Icon)`
+  position: absolute;
+  top: 51%;
+  transform: translateY(-50%);
+  right: 1rem;
+  color: ${__yakProps => {
+  const v = getColor('gray60');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+`;
+const FooterOptionsContainer = styled(yakDomTag("div"))`
+  background: white;
+  border-top: 1px solid rgba(0,0,0,0.1);
+  padding: 0;
+  ${props => !props.hasWindoning && css`
+    padding: 0.5rem 0;
+    margin: 0.5rem 0 -0.5rem;
+    bottom: -0.5rem;
+    position: sticky;
+  `}
+`;
+const ComboboxPlaceholder = styled(yakDomTag("div"))`
+  color: rgba(0,0,0,0.3);
+`;
+const ComboboxLoading = styled(Loading)`
+  bottom: 6px;
+  right: 0.6rem;
+  left: auto;
+  top: auto;
+  @media (max-width: 600px) {
+    bottom: 9px;
+  }
+`;
+const SEPARATOR = {};
+const NO_DIGITABLE_FOUND = "Nenhum resultado encontrado";
+//shouldRecenter?
+const Combobox = styled(/*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+      getLabel = _identity,
+      getLabelAs,
+      getBoxLabelAs,
+      getIcon,
+      scrollContainer = el => el.closest('.dialog-container') || document.body,
+      className,
+      options,
+      autoFocus,
+      autoOpenMenu,
+      mandatory,
+      placeholder,
+      disabled,
+      fieldValue,
+      label,
+      path,
+      withWindowing,
+      tabIndex = 1,
+      fieldClassName,
+      descText,
+      helpText,
+      raw,
+      digitable,
+      digitableConstraint,
+      digitableAsOption,
+      suggestive,
+      onDigitableChange,
+      footerOptions,
+      isLoading,
+      isOptionDisabled,
+      menuRef,
+      overrideSetValue,
+      transformOnSelect = _identity,
+      check = (a, b) => a === b
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const selectedElement = useRef();
+  const selectedElementIndex = useRef();
+  const fieldRef = useRef();
+  const windowingRef = useRef();
+  const skipFocus = useRefState(autoFocus);
+  const skipHover = useRefState();
+  const skipDigitableSetValue = useRefState();
+  const listElement = useEnsureRef(menuRef);
+  const container = useEnsureRef(ref);
+  const keyState = useRefState();
+  const contextMenu = useToggle(false);
+  const hover = useToggle();
+  const strongHover = useRefState();
+  const scrollToVisibility = useToggle();
+  const autoCompleteUID = useLazyConstant(() => getUID());
+  const [formValue, confirmValue, {
+    hasErrors
+  }] = useInput(_objectSpread({
+    fieldValue,
+    path
+  }, rest), raw);
+  const value = useToggle(formValue);
+  const setValue = v => {
+    value.openWith(v);
+  };
+  const digitableValue = useToggle(getLabel(value.isOpen));
+  const digitableRef = useRef();
+  const ignoringFilter = useToggle();
+  const setHover = v => {
+    hover.openWith(v);
+    if (digitable) {
+      strongHover.set(hover.get());
+    } else {
+      setValue(v);
+    }
+  };
+  React.useLayoutEffect(() => {
+    if (digitable && !skipDigitableSetValue.get()) {
+      if (contextMenu.isOpen) {
+        digitableRef.current.select();
+        if (value.get() && !suggestive) {
+          setHover(transformOnSelect(value.get()));
+        }
+      } else {
+        digitableValue.openWith(getLabel(value.get()));
+        strongHover.set(hover.get());
+        hover.close();
+      }
+    }
+    skipDigitableSetValue.set(false);
+  }, [contextMenu.isOpen]);
+  useEffect(() => {
+    contextMenu.isOpen && recenterScroll();
+  }, [contextMenu.isOpen]);
+  useEffect(() => {
+    selectedElement.current && scrollToVisibility.isOpen && makeOptionVisible();
+  }, [hover]);
+  useEffect(() => {
+    var _container$current;
+    autoFocus && ((_container$current = container.current) === null || _container$current === void 0 ? void 0 : _container$current.focus());
+  }, []);
+  useEffect(() => {
+    autoOpenMenu && toggleCombobox();
+  }, []);
+  useUpdateEffect(() => {
+    if (value.isOpen !== formValue && !contextMenu.isOpen) {
+      confirmValue(value.isOpen);
+    }
+  }, [!!contextMenu.isOpen]);
+  useEffect(() => {
+    if (formValue !== value.isOpen) {
+      setValue(formValue);
+    }
+    if (digitable) {
+      digitableValue.openWith(prev => prev !== getLabel(formValue) ? getLabel(formValue) : prev);
+    }
+  }, [formValue]);
+  const filteredOptions = useMemo(() => _flow(_filter(v => {
+    if (!digitable || !digitableValue.isOpen || ignoringFilter.isOpen) {
+      return true;
+    }
+    return normalizeText(getLabel(v)).includes(normalizeText(digitableValue.isOpen));
+  }), _sortBy(v => normalizeText(getLabel(v)).indexOf(normalizeText(digitableValue.isOpen)) > 0))(options), [options, digitable, digitableValue.isOpen, ignoringFilter.isOpen]);
+  const digitableOption = useMemo(() => {
+    const option = filteredOptions.length < 8 && digitableAsOption && !!digitableValue.isOpen && callIfFunction(digitableAsOption, digitableValue.isOpen);
+    return option || !filteredOptions.length && digitable && !suggestive && NO_DIGITABLE_FOUND;
+  }, [digitableValue.isOpen, filteredOptions.length]);
+  const availableOptions = filteredOptions.concat(digitableOption || []);
+  const allOptions = availableOptions.concat(footerOptions || []).filter(v => v !== SEPARATOR);
+  const withPlaceholder = !value.isOpen && value.isOpen !== 0 && placeholder;
+  useUpdateEffect(() => {
+    if (suggestive || !digitable) {
+      return;
+    }
+    if (hover.isOpen) {
+      setHover(allOptions[0] === NO_DIGITABLE_FOUND ? allOptions[1] : allOptions[0]);
+    } else if (digitableValue.isOpen) {
+      setHover(ifUndefined(value.isOpen, allOptions[0]));
+    }
+  }, [digitableValue.isOpen]);
+  const toggleCombobox = () => {
+    if (contextMenu.isOpen) {
+      contextMenu.close();
+    } else {
+      contextMenu.open();
+    }
+    hover.close();
+  };
+  const getCurrentHeight = () => {
+    var _listElement$current$;
+    return listElement.current.offsetHeight - (((_listElement$current$ = listElement.current.querySelector(".JS-list-footer")) === null || _listElement$current$ === void 0 ? void 0 : _listElement$current$.offsetHeight) || 0);
+  };
+  const recenterScroll = () => {
+    if (withWindowing) {
+      const index = hover.get() ? availableOptions.indexOf(hover.get()) : selectedElementIndex.current;
+      if (windowingRef.current) {
+        windowingRef.current.scrollToItem(_isFinite(index) ? index : availableOptions.map(getLabel).indexOf(getLabel(value.get())) || 0, "center");
+      }
+    } else {
+      if (!listElement.current) {
+        return;
+      }
+      if (listElement.current.getBoundingClientRect().bottom > window.innerHeight) {
+        const currentScrollContainer = scrollContainer(container.current);
+        currentScrollContainer.scrollTop = listElement.current.getBoundingClientRect().bottom + currentScrollContainer.scrollTop - window.innerHeight;
+      }
+      if (selectedElement.current) {
+        listElement.current.scrollTop = selectedElement.current.offsetTop + selectedElement.current.offsetHeight / 2 - getCurrentHeight() / 2;
+      }
+    }
+  };
+  const makeOptionVisible = () => {
+    if (withWindowing) {
+      if (windowingRef.current) {
+        windowingRef.current.scrollToItem(selectedElementIndex.current || 0);
+      }
+    } else {
+      if (footerOptions && (footerOptions === null || footerOptions === void 0 ? void 0 : footerOptions.indexOf(hover.isOpen)) >= 0 || !listElement.current) {
+        return;
+      } else if (selectedElement.current.offsetTop < listElement.current.scrollTop) {
+        skipHover.set(true);
+        listElement.current.scrollTop = selectedElement.current.offsetTop;
+      } else if (selectedElement.current.offsetTop + selectedElement.current.offsetHeight > listElement.current.scrollTop + getCurrentHeight()) {
+        skipHover.set(true);
+        listElement.current.scrollTop = selectedElement.current.offsetTop + selectedElement.current.offsetHeight - getCurrentHeight();
+      }
+    }
+  };
+  const handleHover = (value, e) => {
+    if (skipHover.get()) {
+      skipHover.set(false);
+      return;
+    }
+    scrollToVisibility.close();
+    hover.openWith(value);
+  };
+  const digitableKeyDown = e => {
+    if (e.key.length == 1 || e.key == "Spacebar") {
+      e.stopPropagation();
+    } else if (e.key === 'Tab' || e.key === 'Enter') {
+      if (suggestive && allOptions.indexOf(strongHover.get()) < 0) {
+        if (allOptions.indexOf(value.isOpen) >= 0) {
+          setValue(transformOnSelect(value.isOpen));
+        } else {
+          setValue(transformOnSelect(callIfFunction(digitableAsOption, digitableValue.get()) || digitableValue.get()));
+        }
+      } else if (strongHover.get() === hover.get()) {
+        setValue(transformOnSelect(strongHover.get()));
+      }
+      if (e.key === "Enter") {
+        skipFocus.set(true);
+        container.current.focus();
+      }
+    }
+  };
+  const keyDown = e => {
+    if (e.getModifierState('Shift') && e.key === 'Tab') {
+      return;
+    }
+    if ((e.key === 'Escape' || e.key === 'Tab') && contextMenu.isOpen) {
+      e.stopPropagation();
+      toggleCombobox();
+    }
+    if (e.key.length === 1) {
+      e.stopPropagation();
+      if (!contextMenu.isOpen) {
+        contextMenu.open();
+        if (digitable) {
+          skipDigitableSetValue.set(true);
+          digitableValue.openWith(e.key);
+          return;
+        }
+      }
+      const prevKeyState = keyState.get();
+      const repeated = !prevKeyState || e.key === prevKeyState.word[0] && prevKeyState.repeated;
+      const word = ((prevKeyState === null || prevKeyState === void 0 ? void 0 : prevKeyState.word) || '') + e.key;
+      clearTimeout((prevKeyState === null || prevKeyState === void 0 ? void 0 : prevKeyState.timeout) || -1);
+      const timeout = setTimeout(() => keyState.set(null), 1000);
+      keyState.set({
+        repeated,
+        word,
+        timeout
+      });
+      const labels = allOptions.map(o => {
+        const label = getLabel(o);
+        return _isString(label) ? label.slice(0, repeated ? 1 : word.length).toLowerCase() : "";
+      });
+      const goTo = index => {
+        scrollToVisibility.open();
+        setHover(allOptions[index]);
+      };
+      const currentIndex = allOptions.indexOf(hover.isOpen !== false ? hover.isOpen : value.isOpen);
+      const direction = repeated ? e.shiftKey ? -1 : 1 : 0;
+      const fnName = direction < 0 ? 'lastIndexOf' : 'indexOf';
+      const item = repeated ? word.slice(0, 1) : word;
+      const fromIndex = (currentIndex || (direction < 0 ? labels.length - 1 : 0)) + direction;
+      const next = labels[fnName](item, fromIndex);
+      if (next >= 0) {
+        goTo(next);
+      } else {
+        const next = labels[fnName](item);
+        if (next >= 0) {
+          goTo(next);
+        }
+      }
+    }
+    if (['ArrowUp', 'ArrowDown', ' ', 'Enter'].indexOf(e.key) < 0) {
+      return;
+    }
+    e.stopPropagation();
+    e.preventDefault();
+    if (contextMenu.isOpen) {
+      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+        const oldValue = hover.isOpen !== false ? hover.isOpen : value.isOpen;
+        const previousIndex = allOptions.indexOf(oldValue);
+        const newIndex = Math.min(Math.max((previousIndex + allOptions.length + (e.key === 'ArrowUp' ? previousIndex < 0 ? 0 : -1 : 1)) % allOptions.length, 0), allOptions.length - 1);
+        scrollToVisibility.open();
+        setHover(allOptions[newIndex]);
+      } else {
+        if (hover.isOpen !== false) {
+          setValue(transformOnSelect(hover.isOpen));
+        }
+        toggleCombobox();
+      }
+    } else {
+      toggleCombobox();
+    }
+  };
+  const createOption = (option, i, props, opts) => {
+    if (option === SEPARATOR) {
+      return /*#__PURE__*/React.createElement(ListSeparator, {
+        key: "separator" + i
+      });
+    }
+    if (option === NO_DIGITABLE_FOUND) {
+      return /*#__PURE__*/React.createElement(Option, {
+        key: NO_DIGITABLE_FOUND + i,
+        disabled: true,
+        label: NO_DIGITABLE_FOUND
+      });
+    }
+    const label = getLabel(option, {
+      option: true
+    });
+    const checked = hover.isOpen !== false ? check(option, hover.isOpen) : check(option, value.isOpen);
+    if (checked) {
+      selectedElementIndex.current = i;
+    }
+    return /*#__PURE__*/React.createElement(Option, _extends({
+      key: label + i,
+      option: option,
+      disabled: callIfFunction(isOptionDisabled, option, label),
+      icon: callIfFunction(getIcon, option),
+      checked: checked,
+      label: getLabelAs ? getLabelAs(option) : label,
+      setValue: v => {
+        if (!callIfFunction(overrideSetValue, v, {
+          setValue,
+          close: contextMenu.close
+        })) {
+          setValue(transformOnSelect(v));
+          digitableValue.openWith(getLabel(v));
+          contextMenu.close();
+        }
+        skipFocus.set(true);
+        container.current.focus();
+      },
+      setRef: selectedElement,
+      onHover: handleHover
+    }, props));
+  };
+  const onClickInput = () => {
+    if (digitableRef.current && !contextMenu.get()) {
+      digitableRef.current.select();
+    }
+    if (!suggestive) {
+      ignoringFilter.open();
+    }
+    contextMenu.open();
+  };
+  const onFocus = e => {
+    var _listElement$current;
+    if ((_listElement$current = listElement.current) !== null && _listElement$current !== void 0 && _listElement$current.contains(e.target) || skipFocus.get()) {
+      skipFocus.set(false);
+    } else {
+      if (!suggestive) {
+        ignoringFilter.open();
+      }
+      contextMenu.open();
+    }
+  };
+  const onBlur = e => {
+    var _listElement$current2;
+    if (!((_listElement$current2 = listElement.current) !== null && _listElement$current2 !== void 0 && _listElement$current2.contains(e.relatedTarget))) {
+      if (!availableOptions.length && digitableAsOption && digitableValue.get()) {
+        setValue(transformOnSelect(callIfFunction(digitableAsOption, digitableValue.get())));
+      } else if (suggestive) {
+        setValue(transformOnSelect(callIfFunction(digitableAsOption, digitableValue.get()) || digitableValue.get()));
+      } else if (formValue !== value.isOpen) {
+        confirmValue(value.isOpen);
+      }
+      contextMenu.close();
+    }
+  };
+  return /*#__PURE__*/React.createElement(Field, {
+    className: fieldClassName,
+    mandatory: mandatory,
+    descText: descText,
+    helpText: helpText,
+    label: label,
+    labelClick: toggleCombobox,
+    ref: fieldRef
+  }, /*#__PURE__*/React.createElement(ComboboxInput, {
+    onBlur: onBlur,
+    onFocus: onFocus,
+    onClick: onClickInput,
+    ref: container,
+    tabIndex: contextMenu.isOpen && digitable ? '-1' : tabIndex,
+    onKeyDown: keyDown,
+    disabled: disabled,
+    withPlaceholder: withPlaceholder,
+    hasErrors: hasErrors,
+    comboboxIsOpen: contextMenu.isOpen,
+    isFocused: digitable && !!contextMenu.isOpen,
+    suggestive: suggestive
+  }, digitable && !!contextMenu.isOpen ? /*#__PURE__*/React.createElement(TextInput, {
+    raw: true,
+    tabIndex: tabIndex,
+    autoFocus: true,
+    autoComplete: autoCompleteUID,
+    ref: digitableRef,
+    constraint: digitableConstraint,
+    onKeyDown: digitableKeyDown,
+    setValue: v => {
+      ignoringFilter.close();
+      digitableValue.openWith(v);
+    },
+    value: digitableValue.isOpen || "",
+    placeholder: placeholder,
+    onChange: onDigitableChange
+  }) : withPlaceholder ? /*#__PURE__*/React.createElement(ComboboxPlaceholder, null, placeholder) : /*#__PURE__*/React.createElement("div", null, getBoxLabelAs ? getBoxLabelAs(value.isOpen) : getLabel(value.isOpen)), isLoading ? /*#__PURE__*/React.createElement(ComboboxLoading, {
+    absolute: true,
+    size: 20
+  }) : !suggestive && /*#__PURE__*/React.createElement(ComboboxDropdownIcon, {
+    icon: "arrow-down"
+  }), !!contextMenu.isOpen && (!suggestive || !digitable || allOptions.length && digitableValue.isOpen) && /*#__PURE__*/React.createElement(ComboboxMenuContainer, {
+    withWindowing: withWindowing,
+    ref: listElement,
+    windowingRef: windowingRef,
+    options: availableOptions,
+    digitableValue: digitableValue.get(),
+    digitableAsOption: digitableAsOption,
+    footerOptions: footerOptions,
+    getIcon: getIcon,
+    createOption: createOption
+  })));
+})).attrs({
+  className: "styled-combobox"
+})`
+ user-select: none;
+`;
+const [WithIsSticky] = willUseIsSticky();
+const Option = _ref2 => {
+  let {
+      setValue,
+      icon,
+      option,
+      onHover,
+      checked,
+      label,
+      setRef
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement(ListItem, _extends({
+    hover: checked,
+    tabIndex: -1,
+    onMouseOver: e => onHover(option, e),
+    ref: checked ? setRef : undefined,
+    onClick: e => {
+      e.stopPropagation();
+      setValue(option);
+    }
+  }, props), /*#__PURE__*/React.createElement("a", null, icon && /*#__PURE__*/React.createElement(Icon, {
+    icon: icon
+  }), label));
+};
+const ITEM_HEIGHT = 37;
+const ComboboxMenuContainer = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+  let {
+    options,
+    digitableAsOption,
+    footerOptions,
+    getIcon,
+    createOption,
+    withWindowing,
+    digitableValue,
+    windowingRef
+  } = _ref3;
+  const [positionInfo, positionPlaceholder] = usePositioning(ref, {
+    fill: true,
+    on: options.length
+  });
+  const getMenuHeight = options => Math.min(options.length * ITEM_HEIGHT + 9, 300 - ((footerOptions === null || footerOptions === void 0 ? void 0 : footerOptions.length) || 0) * ITEM_HEIGHT - (footerOptions !== null && footerOptions !== void 0 && footerOptions.length ? 7 : 0));
+  const slot = 'Popup';
+  const slotName = useMemo(() => getDialogLayersSize() === 0 ? slot : slot + '-' + (getDialogLayersSize() - 1), []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, positionPlaceholder, /*#__PURE__*/React.createElement(Fill, {
+    name: slotName
+  }, /*#__PURE__*/React.createElement(ComboboxMenu, _extends({}, positionInfo, {
+    ref: ref,
+    withWindowing: withWindowing,
+    withoutIcons: !getIcon
+  }), withWindowing ? /*#__PURE__*/React.createElement(FixedSizeList, {
+    ref: windowingRef,
+    height: getMenuHeight(options),
+    itemCount: options.length,
+    itemSize: ITEM_HEIGHT,
+    width: "100%"
+  }, _ref4 => {
+    let {
+      index,
+      style
+    } = _ref4;
+    return createOption(options[index], index, {
+      style
+    });
+  }) : options.map(createOption).filter(Boolean), footerOptions && /*#__PURE__*/React.createElement(WithIsSticky, {
+    intersection: true
+  }, (sentinel, isSticky) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FooterOptionsContainer, {
+    isSticky: isSticky,
+    className: "JS-list-footer",
+    hasWindoning: withWindowing
+  }, footerOptions.map(createOption)), sentinel("margin-top:-3px;"))))));
+});
+
+export { Combobox, ComboboxInput, ComboboxMenu, NO_DIGITABLE_FOUND, Option, SEPARATOR };
+//# sourceMappingURL=Combobox.mjs.map