rsuite/esm/internals/Picker/PickerToggleTrigger.js

A suite of react components

'use client';
import _extends from "@babel/runtime/helpers/esm/extends";
import React, { useMemo } from 'react';
import pick from 'lodash/pick';
import omit from 'lodash/omit';
import Box from "../Box/index.js";
import PickerDrawer from "./PickerDrawer.js";
import OverlayTrigger from "../Overlay/OverlayTrigger.js";
import { useUniqueId } from "../hooks/index.js";
import { useStyles } from "../hooks/index.js";
import { useBreakpointValue } from "../../useBreakpointValue/index.js";
export const overlayPropKeys = ['onEntered', 'onExited', 'onEnter', 'onEntering', 'onExit', 'onExiting', 'open', 'onOpen', 'defaultOpen', 'onClose', 'container', 'containerPadding', 'preventOverflow'];
export const pickerCommonPropKeys = ['disabled', 'plaintext', 'readOnly', 'loading', 'label'];
export const triggerPropKeys = [...overlayPropKeys, ...pickerCommonPropKeys];
export const ComboboxContext = /*#__PURE__*/React.createContext({
  popupType: 'listbox'
});
export const PickerToggleTrigger = /*#__PURE__*/React.forwardRef((props, ref) => {
  const {
    appearance,
    as,
    block,
    children,
    className,
    classPrefix = 'picker',
    disabled,
    id,
    multiple,
    name,
    pickerType,
    triggerProps,
    placement,
    popupType = 'listbox',
    rootRef,
    speaker,
    style,
    size,
    trigger = 'click',
    responsive = true,
    onKeyDown,
    onClick,
    ...rest
  } = props;
  const pickerTriggerProps = pick(triggerProps, triggerPropKeys);
  const pickerId = useUniqueId('rs-', id);
  const breakpoint = useBreakpointValue({
    xsOnly: 'xs'
  }, {
    enabled: responsive
  });
  // Only use the breakpoint value if not disabled
  const effectiveBreakpoint = disabled ? undefined : breakpoint;
  const comboboxContext = useMemo(() => ({
    id: pickerId,
    hasLabel: typeof pickerTriggerProps.label !== 'undefined',
    multiple,
    placement,
    breakpoint: effectiveBreakpoint,
    popupType
  }), [pickerId, multiple, placement, effectiveBreakpoint, popupType]);
  const {
    withPrefix,
    merge
  } = useStyles(classPrefix);
  const classes = merge(className, withPrefix());
  return /*#__PURE__*/React.createElement(ComboboxContext.Provider, {
    value: comboboxContext
  }, /*#__PURE__*/React.createElement(OverlayTrigger, _extends({}, pickerTriggerProps, {
    disabled: pickerTriggerProps.disabled || pickerTriggerProps.loading,
    ref: ref,
    trigger: trigger,
    placement: placement,
    speaker: speaker,
    overlayAs: effectiveBreakpoint === 'xs' ? PickerDrawer : undefined
  }), /*#__PURE__*/React.createElement(Box, _extends({
    as: as,
    className: classes,
    style: style,
    ref: rootRef,
    name: name,
    "data-picker": pickerType,
    "data-appearance": appearance,
    "data-size": size,
    "data-disabled": disabled || undefined,
    "data-block": block || undefined,
    "data-testid": "picker",
    onKeyDown: onKeyDown,
    onClick: onClick
  }, omit(rest, [...triggerPropKeys])), children)));
});
PickerToggleTrigger.displayName = 'PickerToggleTrigger';
export default PickerToggleTrigger;