@hanwenbo/x-taro-ui 0.0.1

package/es/components/picker/picker.js

@@ -0,0 +1,547 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+/**
+ * Picker Component
+ * Mobile bottom-sheet picker aligned with x-mobile-ui.
+ */
+
+import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { Text, View } from '@tarojs/components';
+import { OverlayHost } from "../../adapters/miniapp";
+import { usePressable } from "../../patterns";
+import { getFormControlTokens, useTokens, withOpacity } from "../../theme";
+import { classNames } from "../../utils";
+import { resolveLocaleText } from "../../utils/locale";
+import { useConfigProvider } from "../configProvider";
+import { Icon } from "../icon";
+import { PickerView as InlinePickerView } from "../pickerView";
+import { SafeArea } from "../safeArea";
+import { generatePickerExtend, normalizePickerColumns, resolvePickerState } from "./shared";
+import { usePickerColors, usePickerHeight, usePickerTokens } from "./tokens";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+function renderInlineNode(node, style) {
+  if (typeof node === 'string' || typeof node === 'number') {
+    return /*#__PURE__*/_jsx(Text, {
+      style: style,
+      children: node
+    });
+  }
+  return node;
+}
+function nodeText(node) {
+  if (typeof node === 'string' || typeof node === 'number') return String(node);
+  if (Array.isArray(node)) return node.map(nodeText).join('');
+  if ( /*#__PURE__*/React.isValidElement(node)) {
+    return nodeText(node.props.children);
+  }
+  return '';
+}
+function isActivationKey(key) {
+  return key === 'Enter' || key === ' ' || key === 'Spacebar';
+}
+export var Picker = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var hasValueProp = Object.prototype.hasOwnProperty.call(props, 'value');
+  var hasVisibleProp = Object.prototype.hasOwnProperty.call(props, 'visible');
+  var value = props.value,
+    _props$defaultValue = props.defaultValue,
+    defaultValue = _props$defaultValue === void 0 ? [] : _props$defaultValue,
+    _props$columns = props.columns,
+    columns = _props$columns === void 0 ? [] : _props$columns,
+    size = props.size,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'default' : _props$variant,
+    disabled = props.disabled,
+    visible = props.visible,
+    _props$defaultVisible = props.defaultVisible,
+    defaultVisible = _props$defaultVisible === void 0 ? false : _props$defaultVisible,
+    title = props.title,
+    confirmText = props.confirmText,
+    cancelText = props.cancelText,
+    _props$loading = props.loading,
+    loading = _props$loading === void 0 ? false : _props$loading,
+    loadingContent = props.loadingContent,
+    onChange = props.onChange,
+    onSelect = props.onSelect,
+    onConfirm = props.onConfirm,
+    onCancel = props.onCancel,
+    onClose = props.onClose,
+    onOpenChange = props.onOpenChange,
+    _props$closeOnMaskCli = props.closeOnMaskClick,
+    closeOnMaskClick = _props$closeOnMaskCli === void 0 ? true : _props$closeOnMaskCli,
+    placeholder = props.placeholder,
+    renderValue = props.renderValue,
+    children = props.children,
+    renderLabel = props.renderLabel,
+    popupClassName = props.popupClassName,
+    popupStyle = props.popupStyle,
+    headerClassName = props.headerClassName,
+    headerStyle = props.headerStyle,
+    footerClassName = props.footerClassName,
+    contentStyle = props.contentStyle,
+    containerStyle = props.containerStyle,
+    itemHeight = props.itemHeight,
+    height = props.height,
+    ariaLabel = props.ariaLabel,
+    className = props.className,
+    style = props.style;
+  var config = useConfigProvider();
+  var _useTokens = useTokens(),
+    colors = _useTokens.colors,
+    radius = _useTokens.radius,
+    motion = _useTokens.motion;
+  var resolvedSize = size !== null && size !== void 0 ? size : config.size;
+  var isDisabled = Boolean(disabled || config.disabled);
+  var resolvedConfirmText = confirmText !== null && confirmText !== void 0 ? confirmText : resolveLocaleText(config.locale, 'picker.confirm', '确定');
+  var resolvedCancelText = cancelText !== null && cancelText !== void 0 ? cancelText : resolveLocaleText(config.locale, 'picker.cancel', '取消');
+  var resolvedPlaceholder = placeholder !== null && placeholder !== void 0 ? placeholder : resolveLocaleText(config.locale, 'picker.placeholder', '请选择');
+  var _useState = useState(defaultVisible),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalVisible = _useState2[0],
+    setInternalVisible = _useState2[1];
+  var _useState3 = useState(defaultValue),
+    _useState4 = _slicedToArray(_useState3, 2),
+    internalValue = _useState4[0],
+    setInternalValue = _useState4[1];
+  var _useState5 = useState(function () {
+      return resolvePickerState(columns, hasValueProp ? value !== null && value !== void 0 ? value : [] : defaultValue).value;
+    }),
+    _useState6 = _slicedToArray(_useState5, 2),
+    draftValue = _useState6[0],
+    setDraftValue = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    triggerFocused = _useState8[0],
+    setTriggerFocused = _useState8[1];
+  var _useState9 = useState(null),
+    _useState10 = _slicedToArray(_useState9, 2),
+    focusedAction = _useState10[0],
+    setFocusedAction = _useState10[1];
+  var isVisible = hasVisibleProp ? Boolean(visible) : internalVisible;
+  var currentValue = hasValueProp ? value !== null && value !== void 0 ? value : [] : internalValue;
+  var pickerTokens = usePickerTokens(resolvedSize);
+  var pickerColors = usePickerColors(variant);
+  var pickerHeight = usePickerHeight(resolvedSize);
+  var controlTokens = getFormControlTokens(resolvedSize);
+  var committedState = useMemo(function () {
+    return resolvePickerState(columns, currentValue);
+  }, [columns, currentValue]);
+  var committedExtend = useMemo(function () {
+    return generatePickerExtend(columns, currentValue);
+  }, [columns, currentValue]);
+  var draftState = useMemo(function () {
+    return resolvePickerState(columns, draftValue);
+  }, [columns, draftValue]);
+  var committedStateRef = useRef(committedState);
+  committedStateRef.current = committedState;
+  var committedValueKey = JSON.stringify(currentValue);
+  var committedColumnsKey = JSON.stringify(normalizePickerColumns(columns, currentValue).map(function (column) {
+    return column.map(function (option) {
+      return [option.value, Boolean(option.disabled)];
+    });
+  }));
+  var wasVisibleRef = useRef(isVisible);
+  var previousCommittedValueKeyRef = useRef(committedValueKey);
+  var previousColumnsKeyRef = useRef(committedColumnsKey);
+  useEffect(function () {
+    var opened = isVisible && !wasVisibleRef.current;
+    var committedChanged = previousCommittedValueKeyRef.current !== committedValueKey;
+    var columnsChanged = previousColumnsKeyRef.current !== committedColumnsKey;
+    if (!isVisible || opened || committedChanged || columnsChanged) {
+      setDraftValue(committedStateRef.current.value);
+    }
+    wasVisibleRef.current = isVisible;
+    previousCommittedValueKeyRef.current = committedValueKey;
+    previousColumnsKeyRef.current = committedColumnsKey;
+  }, [committedColumnsKey, committedValueKey, isVisible]);
+  var setOpenState = useCallback(function (nextOpen) {
+    if (nextOpen && isDisabled) return;
+    if (nextOpen === isVisible) return;
+    if (!hasVisibleProp) setInternalVisible(nextOpen);
+    onOpenChange === null || onOpenChange === void 0 || onOpenChange(nextOpen);
+    if (!nextOpen) onClose === null || onClose === void 0 || onClose();
+  }, [hasVisibleProp, isDisabled, isVisible, onClose, onOpenChange]);
+  var actions = useMemo(function () {
+    return {
+      open: function open() {
+        return setOpenState(true);
+      },
+      close: function close() {
+        return setOpenState(false);
+      },
+      toggle: function toggle() {
+        return setOpenState(!isVisible);
+      }
+    };
+  }, [isVisible, setOpenState]);
+  useImperativeHandle(ref, function () {
+    return actions;
+  }, [actions]);
+  var handleDraftChange = useCallback(function (nextValue, extend) {
+    setDraftValue(nextValue);
+    onChange === null || onChange === void 0 || onChange(nextValue, extend);
+    onSelect === null || onSelect === void 0 || onSelect(nextValue, extend);
+  }, [onChange, onSelect]);
+  var handleConfirm = useCallback(function () {
+    if (loading) return;
+    var confirmedValue = draftState.value;
+    var extend = generatePickerExtend(columns, confirmedValue);
+    if (!hasValueProp) setInternalValue(confirmedValue);
+    setDraftValue(confirmedValue);
+    onConfirm === null || onConfirm === void 0 || onConfirm(confirmedValue, extend);
+    setOpenState(false);
+  }, [columns, draftState.value, hasValueProp, loading, onConfirm, setOpenState]);
+  var handleCancel = useCallback(function () {
+    onCancel === null || onCancel === void 0 || onCancel();
+    setDraftValue(committedStateRef.current.value);
+    setOpenState(false);
+  }, [onCancel, setOpenState]);
+  var handleMaskClick = useCallback(function () {
+    return handleCancel();
+  }, [handleCancel]);
+  var triggerPress = usePressable({
+    disabled: isDisabled,
+    onPress: actions.open,
+    scale: 0.995
+  });
+  var cancelPress = usePressable({
+    onPress: handleCancel,
+    scale: 0.985
+  });
+  var confirmPress = usePressable({
+    disabled: loading,
+    onPress: handleConfirm,
+    scale: 0.985
+  });
+  var selectedItems = committedExtend.items.filter(function (item) {
+    return item !== null;
+  });
+  var hasSelection = selectedItems.length > 0;
+  var triggerText = hasSelection ? selectedItems.map(function (item) {
+    return nodeText(item.label);
+  }).filter(Boolean).join(' / ') : nodeText(resolvedPlaceholder);
+  var renderedValue = hasSelection ? renderValue === null || renderValue === void 0 ? void 0 : renderValue(committedState.value, committedExtend) : undefined;
+  var triggerLabel = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : nodeText(renderedValue) || triggerText || resolveLocaleText(config.locale, 'picker.placeholder', '请选择');
+  var dialogLabel = nodeText(title) || resolveLocaleText(config.locale, 'picker.placeholder', '请选择');
+  var triggerElement = children ? children(committedExtend.items, actions) : /*#__PURE__*/_jsxs(View, _objectSpread(_objectSpread({
+    className: classNames("".concat(config.prefixCls, "-picker__trigger"), "".concat(config.prefixCls, "-picker__trigger--").concat(resolvedSize), "".concat(config.prefixCls, "-picker__trigger--").concat(variant), isVisible && "".concat(config.prefixCls, "-picker__trigger--open"), isDisabled && "".concat(config.prefixCls, "-picker__trigger--disabled"), triggerFocused && "".concat(config.prefixCls, "-picker__trigger--focused"), className),
+    style: _objectSpread(_objectSpread(_objectSpread({
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      width: '100%',
+      minWidth: 0,
+      height: controlTokens.height,
+      boxSizing: 'border-box',
+      gap: controlTokens.gap,
+      paddingLeft: controlTokens.inlinePadding,
+      paddingRight: controlTokens.inlinePadding,
+      borderWidth: variant === 'filled' ? 0 : 1,
+      borderStyle: 'solid',
+      borderColor: isVisible || triggerFocused ? colors.primary : colors.border,
+      borderRadius: radius.md,
+      backgroundColor: variant === 'filled' ? colors.muted : colors.background,
+      boxShadow: isVisible || triggerFocused ? "0 0 0 1px ".concat(withOpacity(colors.ring, 0.18)) : 'none',
+      opacity: isDisabled ? 0.5 : 1,
+      cursor: isDisabled ? 'not-allowed' : 'pointer'
+    }, triggerPress.style), {}, {
+      transition: "".concat(triggerPress.style.transition, ", border-color ").concat(motion.durationsMs.emphasis, "ms ").concat(motion.easing.standard, ", box-shadow ").concat(motion.durationsMs.emphasis, "ms ").concat(motion.easing.standard, ", background-color ").concat(motion.durationsMs.emphasis, "ms ").concat(motion.easing.standard)
+    }, containerStyle), style),
+    role: "button",
+    ariaRole: "button",
+    ariaLabel: "".concat(triggerLabel).concat(isDisabled ? '，已禁用' : ''),
+    "aria-disabled": isDisabled,
+    "aria-expanded": isVisible,
+    "aria-haspopup": "dialog",
+    "data-slot": "picker-trigger",
+    "data-size": resolvedSize,
+    "data-variant": variant,
+    "data-state": isVisible ? 'open' : 'closed',
+    tabIndex: isDisabled ? -1 : 0,
+    onFocus: function onFocus() {
+      return setTriggerFocused(true);
+    },
+    onBlur: function onBlur() {
+      return setTriggerFocused(false);
+    },
+    onKeyDown: function onKeyDown(event) {
+      var _preventDefault, _ref;
+      var key = event.key;
+      if (!isActivationKey(key)) return;
+      (_preventDefault = (_ref = event).preventDefault) === null || _preventDefault === void 0 || _preventDefault.call(_ref);
+      actions.open();
+    }
+  }, triggerPress.handlers), {}, {
+    children: [/*#__PURE__*/_jsx(View, {
+      className: "".concat(config.prefixCls, "-picker__trigger-content"),
+      style: {
+        flex: 1,
+        minWidth: 0,
+        overflow: 'hidden',
+        whiteSpace: 'nowrap'
+      },
+      children: hasSelection ? renderedValue !== undefined ? renderInlineNode(renderedValue, {
+        color: colors.foreground,
+        fontSize: controlTokens.textSize,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
+      }) : /*#__PURE__*/_jsx(View, {
+        style: {
+          display: 'flex',
+          flexDirection: 'row',
+          width: '100%',
+          minWidth: 0,
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap'
+        },
+        children: selectedItems.map(function (item, index) {
+          var _item$key;
+          return /*#__PURE__*/_jsxs(React.Fragment, {
+            children: [index > 0 ? /*#__PURE__*/_jsx(Text, {
+              style: {
+                color: colors['muted-foreground'],
+                fontSize: controlTokens.textSize
+              },
+              children: ' / '
+            }) : null, renderInlineNode(item.label, {
+              color: colors.foreground,
+              fontSize: controlTokens.textSize,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap'
+            })]
+          }, (_item$key = item.key) !== null && _item$key !== void 0 ? _item$key : item.value);
+        })
+      }) : renderInlineNode(resolvedPlaceholder, {
+        color: colors['muted-foreground'],
+        fontSize: controlTokens.textSize,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
+      })
+    }), /*#__PURE__*/_jsx(View, {
+      className: "".concat(config.prefixCls, "-picker__arrow"),
+      style: {
+        width: controlTokens.iconSize,
+        height: controlTokens.iconSize,
+        flexShrink: 0,
+        transform: isVisible ? 'rotate(180deg)' : 'rotate(0deg)',
+        transition: "transform ".concat(motion.durationsMs.emphasis, "ms ").concat(motion.easing.standard),
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      children: /*#__PURE__*/_jsx(Icon, {
+        name: "ChevronDown",
+        size: Math.max(12, controlTokens.iconSize - 2),
+        color: colors['muted-foreground'],
+        block: true
+      })
+    })]
+  }));
+  var actionStyle = {
+    minWidth: 44,
+    minHeight: 44,
+    paddingLeft: 8,
+    paddingRight: 8,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: radius.md,
+    fontSize: pickerTokens.buttonFontSize,
+    boxSizing: 'border-box',
+    cursor: 'pointer'
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [triggerElement, /*#__PURE__*/_jsx(OverlayHost, {
+      visible: isVisible,
+      placement: "bottom",
+      onBackdropClick: handleMaskClick,
+      onEscape: handleCancel,
+      config: {
+        zIndex: 1000,
+        backdrop: true,
+        closeOnBackdrop: closeOnMaskClick,
+        closeOnEscape: true
+      },
+      children: /*#__PURE__*/_jsxs(View, {
+        role: "dialog",
+        ariaRole: "dialog",
+        ariaLabel: dialogLabel,
+        "data-slot": "picker-popup",
+        "data-size": resolvedSize,
+        "data-variant": variant,
+        className: classNames("".concat(config.prefixCls, "-picker"), "".concat(config.prefixCls, "-picker--").concat(resolvedSize), "".concat(config.prefixCls, "-picker--").concat(variant), popupClassName),
+        style: _objectSpread({
+          position: 'relative',
+          width: '100vw',
+          maxWidth: '100%',
+          maxHeight: '100vh',
+          display: 'flex',
+          flexDirection: 'column',
+          boxSizing: 'border-box',
+          backgroundColor: pickerColors.background,
+          color: colors['popover-foreground'],
+          borderTop: "1px solid ".concat(colors.border),
+          borderLeft: "1px solid ".concat(colors.border),
+          borderRight: "1px solid ".concat(colors.border),
+          borderRadius: 'var(--x-picker-panel-radius) var(--x-picker-panel-radius) 0 0',
+          overflow: 'hidden',
+          boxShadow: 'var(--x-picker-panel-shadow)'
+        }, popupStyle),
+        children: [/*#__PURE__*/_jsxs(View, {
+          "data-slot": "picker-header",
+          className: classNames("".concat(config.prefixCls, "-picker__header"), headerClassName),
+          style: _objectSpread({
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            flexShrink: 0,
+            minHeight: pickerTokens.headerHeight,
+            paddingLeft: pickerTokens.headerPadding,
+            paddingRight: pickerTokens.headerPadding,
+            borderBottom: "1px solid ".concat(pickerColors.headerBorder),
+            backgroundColor: pickerColors.background,
+            boxSizing: 'border-box'
+          }, headerStyle),
+          children: [/*#__PURE__*/_jsx(View, _objectSpread(_objectSpread({
+            "data-slot": "picker-cancel",
+            className: "".concat(config.prefixCls, "-picker__cancel"),
+            style: _objectSpread(_objectSpread(_objectSpread({}, actionStyle), {}, {
+              color: pickerColors.cancelColor,
+              backgroundColor: cancelPress.pressed ? colors.accent : 'transparent',
+              boxShadow: focusedAction === 'cancel' ? "0 0 0 2px ".concat(withOpacity(colors.ring, 0.28)) : 'none'
+            }, cancelPress.style), {}, {
+              transition: "".concat(cancelPress.style.transition, ", background-color ").concat(motion.durationsMs.fast, "ms ").concat(motion.easing.standard, ", box-shadow ").concat(motion.durationsMs.fast, "ms ").concat(motion.easing.standard)
+            }),
+            role: "button",
+            ariaRole: "button",
+            ariaLabel: nodeText(resolvedCancelText) || '取消',
+            tabIndex: 0,
+            onFocus: function onFocus() {
+              return setFocusedAction('cancel');
+            },
+            onBlur: function onBlur() {
+              return setFocusedAction(function (current) {
+                return current === 'cancel' ? null : current;
+              });
+            },
+            onKeyDown: function onKeyDown(event) {
+              var _preventDefault2, _ref2;
+              var key = event.key;
+              if (!isActivationKey(key)) return;
+              (_preventDefault2 = (_ref2 = event).preventDefault) === null || _preventDefault2 === void 0 || _preventDefault2.call(_ref2);
+              handleCancel();
+            }
+          }, cancelPress.handlers), {}, {
+            children: renderInlineNode(resolvedCancelText, {
+              color: pickerColors.cancelColor,
+              fontSize: pickerTokens.buttonFontSize,
+              fontWeight: 500
+            })
+          })), /*#__PURE__*/_jsx(View, {
+            "data-slot": "picker-title",
+            className: "".concat(config.prefixCls, "-picker__title"),
+            style: {
+              flex: 1,
+              minWidth: 0,
+              paddingLeft: 8,
+              paddingRight: 8,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              overflow: 'hidden'
+            },
+            children: renderInlineNode(title, {
+              maxWidth: '100%',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              textAlign: 'center',
+              fontSize: pickerTokens.titleFontSize,
+              fontWeight: 500,
+              color: pickerColors.titleColor
+            })
+          }), /*#__PURE__*/_jsx(View, _objectSpread(_objectSpread({
+            "data-slot": "picker-confirm",
+            className: classNames("".concat(config.prefixCls, "-picker__confirm"), loading && "".concat(config.prefixCls, "-picker__confirm--disabled")),
+            style: _objectSpread(_objectSpread(_objectSpread({}, actionStyle), {}, {
+              color: loading ? pickerColors.cancelColor : pickerColors.buttonColor,
+              opacity: loading ? 0.6 : 1,
+              cursor: loading ? 'not-allowed' : 'pointer',
+              backgroundColor: confirmPress.pressed ? colors.accent : 'transparent',
+              boxShadow: focusedAction === 'confirm' ? "0 0 0 2px ".concat(withOpacity(colors.ring, 0.28)) : 'none'
+            }, confirmPress.style), {}, {
+              transition: "".concat(confirmPress.style.transition, ", background-color ").concat(motion.durationsMs.fast, "ms ").concat(motion.easing.standard, ", box-shadow ").concat(motion.durationsMs.fast, "ms ").concat(motion.easing.standard)
+            }),
+            role: "button",
+            ariaRole: "button",
+            ariaLabel: "".concat(nodeText(resolvedConfirmText) || '确定').concat(loading ? '，加载中' : ''),
+            "aria-disabled": loading,
+            tabIndex: loading ? -1 : 0,
+            onFocus: function onFocus() {
+              if (!loading) setFocusedAction('confirm');
+            },
+            onBlur: function onBlur() {
+              return setFocusedAction(function (current) {
+                return current === 'confirm' ? null : current;
+              });
+            },
+            onKeyDown: function onKeyDown(event) {
+              var _preventDefault3, _ref3;
+              var key = event.key;
+              if (!isActivationKey(key)) return;
+              (_preventDefault3 = (_ref3 = event).preventDefault) === null || _preventDefault3 === void 0 || _preventDefault3.call(_ref3);
+              handleConfirm();
+            }
+          }, confirmPress.handlers), {}, {
+            children: renderInlineNode(resolvedConfirmText, {
+              color: loading ? pickerColors.cancelColor : pickerColors.buttonColor,
+              fontSize: pickerTokens.buttonFontSize,
+              fontWeight: 500
+            })
+          }))]
+        }), /*#__PURE__*/_jsxs(View, {
+          "data-slot": "picker-content",
+          className: classNames("".concat(config.prefixCls, "-picker__content"), footerClassName),
+          style: _objectSpread({
+            minHeight: 0,
+            flexShrink: 1,
+            overflowY: 'auto',
+            backgroundColor: pickerColors.background
+          }, contentStyle),
+          children: [/*#__PURE__*/_jsx(InlinePickerView, {
+            columns: columns,
+            value: draftState.value,
+            onChange: handleDraftChange,
+            size: resolvedSize,
+            variant: variant === 'filled' ? 'filled' : 'default',
+            loading: loading,
+            loadingContent: loadingContent,
+            renderLabel: renderLabel,
+            itemHeight: itemHeight,
+            height: height !== null && height !== void 0 ? height : pickerHeight
+          }), /*#__PURE__*/_jsx(SafeArea, {
+            position: "bottom"
+          })]
+        })]
+      })
+    })]
+  });
+});
+Picker.displayName = 'Picker';
+export default Picker;

package/es/components/picker/shared.d.ts

@@ -0,0 +1,16 @@
+import type { PickerColumnsSource, PickerOption, PickerValue, PickerValueExtend } from './types';
+export declare function normalizePickerColumns(rawColumns: PickerColumnsSource | undefined, value: PickerValue[]): PickerOption[][];
+export interface ResolvedPickerState {
+    value: PickerValue[];
+    columns: PickerOption[][];
+    items: (PickerOption | null)[];
+}
+/**
+ * Resolve missing/stale values and dependent function columns to a stable state.
+ * A bounded loop allows changing an earlier column to invalidate later columns
+ * without leaving values that no longer exist in the recomputed data set.
+ */
+export declare function resolvePickerState(rawColumns: PickerColumnsSource | undefined, value: PickerValue[]): ResolvedPickerState;
+/** Build x-mobile-ui compatible metadata without filling an uncommitted value. */
+export declare function generatePickerExtend(rawColumns: PickerColumnsSource | undefined, value: PickerValue[], index?: number): PickerValueExtend;
+//# sourceMappingURL=shared.d.ts.map