@renderlesskit/react/dist/esm/select/SelectBaseState.js

Collection of headless components/hooks that are accessible, composable, customizable from low level to build your own UI & Design System powered by Reakit

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

/* eslint-disable react-hooks/exhaustive-deps */
import * as React from "react";
export function getIdFromValue(valuesById, selectedValue) {
  if (selectedValue == null) return null;
  var selectedOption = valuesById.find(option => option.value === selectedValue);
  return selectedOption ? selectedOption.id : null;
}

function getValueFromId(valuesById, currentId) {
  if (currentId == null) return;
  var selectedOption = valuesById.find(option => option.id === currentId);
  return selectedOption ? selectedOption.value : undefined;
}

export function useSelectBaseState(composite) {
  var {
    selectedValue: initialSelectedValue = null,
    values: initialValues = []
  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  var valuesById = React.useRef([]);
  var valuesRef = React.useRef(initialValues);
  var {
    items: compositeItems,
    registerItem: compositeRegisterItem,
    unregisterItem: compositeUnregisterItem
  } = composite;
  var [selectedValue, setSelectedValue] = React.useState(initialSelectedValue);
  var selectedId = React.useMemo(() => getIdFromValue(valuesById.current, selectedValue), [valuesById.current, selectedValue]);
  var currentValue = React.useMemo(() => getValueFromId(valuesById.current, composite.currentId), [valuesById.current, composite.currentId]);
  var items = React.useMemo(() => {
    compositeItems.forEach(item => {
      if (item.id) {
        item.value = valuesById.current[item.id];
      }
    });
    return compositeItems;
  }, [compositeItems]);
  var registerItem = React.useCallback(item => {
    compositeRegisterItem(item);

    if (item.id && item.value) {
      valuesById.current = [...valuesById.current, {
        id: item.id,
        value: item.value
      }];
      if (!initialValues.length) valuesRef.current = [...valuesRef.current, item.value];
    }
  }, [compositeRegisterItem]);
  var unregisterItem = React.useCallback(id => {
    compositeUnregisterItem(id);
    delete valuesById.current[id];
  }, [compositeUnregisterItem]);
  return _objectSpread(_objectSpread({}, composite), {}, {
    menuRole: "listbox",
    selectedValue,
    currentValue,
    values: valuesRef.current,
    valuesById: valuesById.current,
    selectedId,
    items,
    setSelectedValue,
    registerItem,
    unregisterItem
  });
}
//# sourceMappingURL=SelectBaseState.js.map