@bifrostui/react 2.0.0-alpha.0 → 2.0.0-alpha.10

package/es/Picker/Picker.types.d.ts

@@ -10,6 +10,10 @@ export interface IPickerOptionItem {
      * 选项对应唯一的值
      */
     value: string | number;
+    /**
+     * 是否禁用
+     */
+    disabled?: boolean;
 }
 export type ICascadePickerChildOptionItem = IPickerOptionItem & {
     /**
@@ -34,6 +38,14 @@ export type PickerProps<D extends React.ElementType = 'div', P = DrawerProps> =
          * 标题
          */
         title?: string;
+        /**
+         * 确认文本内容
+         */
+        confirmText?: string;
+        /**
+         * 取消文本内容
+         */
+        cancelText?: string;
         /**
          * 列表数据
          * @default []
@@ -61,6 +73,7 @@ export type PickerProps<D extends React.ElementType = 'div', P = DrawerProps> =
             value: (string | number)[];
             options: ICascadePickerChildOptionItem[][];
             currentOption: ICascadePickerChildOptionItem;
+            columnIndex: number;
         }) => void;
         /**
          * 点击取消按钮时候回调
@@ -85,9 +98,9 @@ export type PickerPanelProps<D extends React.ElementType = 'div', P = {}> = Over
          */
         options?: ICascadePickerChildOptionItem[];
         /**
-         * 默认值
+         * 选中值
          */
-        defaultValue?: string | number;
+        value?: string | number;
         /**
          * 列索引
          */

package/es/Picker/PickerPanel.css

@@ -1,4 +1,5 @@
 .bui-picker-panel {
+  --bui-picker-option-disabled-opacity: 0.38;
   flex: 1;
   flex-shrink: 0;
   position: relative;
@@ -56,6 +57,9 @@
   white-space: nowrap;
   width: 100%;
 }
+.bui-picker-panel-option-disabled {
+  opacity: var(--bui-picker-option-disabled-opacity);
+}
 .bui-picker-panel-option-hidden {
   visibility: hidden;
   opacity: 0;

package/es/Picker/PickerPanel.js

@@ -26,7 +26,6 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import clsx from "clsx";
 import React, {
   useEffect,
   useState,
@@ -34,6 +33,7 @@ import React, {
   useImperativeHandle,
   useLayoutEffect
 } from "react";
+import clsx from "clsx";
 import {
   useTouch,
   useForkRef,
@@ -42,29 +42,29 @@ import {
 } from "@bifrostui/utils";
 import "./PickerPanel.css";
 const prefixCls = "bui-picker-panel";
+const INERTIA_TIME = 200;
+const INERTIA_DISTANCE = 15;
+const DEFAULT_DURATION = 200;
+const ROTATION = 20;
+const TOUCH_END = "end";
+const DEFAULT_LINE_SPACING = 36;
 const PickerPanel = /* @__PURE__ */ React.forwardRef(
   (props, ref) => {
     const _a = props, {
       options = [],
-      defaultValue,
+      value,
       onSelect,
       columnIndex,
       open
     } = _a, others = __objRest(_a, [
       "options",
-      "defaultValue",
+      "value",
       "onSelect",
       "columnIndex",
       "open"
     ]);
     const touch = useTouch();
-    let timer;
-    const INERTIA_TIME = 200;
-    const INERTIA_DISTANCE = 15;
-    const DEFAULT_DURATION = 200;
-    const ROTATION = 20;
-    const TOUCH_END = "end";
-    const DEFAULT_LINE_SPACING = 36;
+    const timerRef = useRef(null);
     const lineSpacing = useRef(DEFAULT_LINE_SPACING);
     const [indicatorOffset, setIndicatorOffset] = useState(108);
     const [startY, setStartY] = useState(0);
@@ -87,29 +87,6 @@ const PickerPanel = /* @__PURE__ */ React.forwardRef(
         setIndicatorOffset(lineSpacing.current * 108 / DEFAULT_LINE_SPACING);
       });
     }, [open]);
-    const updateSelect = () => {
-      let index = -1;
-      if (defaultValue) {
-        options.some((item, idx) => {
-          if (item.value === defaultValue) {
-            index = idx;
-            return true;
-          }
-          return false;
-        });
-      }
-      setCurrIndex(index === -1 ? 1 : index + 1);
-      const move = index === -1 ? 0 : index * lineSpacing.current;
-      setMove({ move: -move });
-    };
-    useEffect(() => {
-      setScrollDistance(0);
-      transformY.current = 0;
-      updateSelect();
-      return () => {
-        clearTimeout(timer);
-      };
-    }, [options]);
     const setTransform = (type, deg, time = DEFAULT_DURATION, translateY = 0) => {
       let nTime = time;
       if (type !== TOUCH_END) {
@@ -147,6 +124,29 @@ const PickerPanel = /* @__PURE__ */ React.forwardRef(
         }
       }
     };
+    const updateSelect = () => {
+      let index = -1;
+      if (value) {
+        options.some((item, idx) => {
+          if (item.value === value) {
+            index = idx;
+            return true;
+          }
+          return false;
+        });
+      }
+      setCurrIndex(index === -1 ? 1 : index + 1);
+      const move = index === -1 ? 0 : index * lineSpacing.current;
+      setMove({ move: -move });
+    };
+    useEffect(() => {
+      setScrollDistance(0);
+      transformY.current = 0;
+      updateSelect();
+      return () => {
+        clearTimeout(timerRef.current);
+      };
+    }, [options, value]);
     const momentum = (distance, duration) => {
       let nDistance = distance;
       const speed = Math.abs(nDistance / duration);
@@ -187,7 +187,7 @@ const PickerPanel = /* @__PURE__ */ React.forwardRef(
           type: TOUCH_END
         });
       }
-      timer = setTimeout(() => {
+      timerRef.current = setTimeout(() => {
         touch.reset();
       }, 0);
     };
@@ -208,7 +208,7 @@ const PickerPanel = /* @__PURE__ */ React.forwardRef(
         );
         (_c2 = PickerPanelRef.current) == null ? void 0 : _c2.removeEventListener("touchend", panelTouchEnd);
       };
-    });
+    }, [panelTouchStart, panelTouchMove, panelTouchEnd]);
     const onTransitionEnd = (e) => {
       isVerticalMoving.current = false;
       setTouchTime(0);
@@ -217,9 +217,12 @@ const PickerPanel = /* @__PURE__ */ React.forwardRef(
         columnIndex
       });
     };
-    useImperativeHandle(ref, () => ({
-      isMoving: isVerticalMoving.current
-    }));
+    useImperativeHandle(
+      ref,
+      () => ({
+        isMoving: isVerticalMoving.current
+      })
+    );
     return /* @__PURE__ */ React.createElement(
       "div",
       __spreadValues({
@@ -227,7 +230,11 @@ const PickerPanel = /* @__PURE__ */ React.forwardRef(
         ref: pickerPanelRef,
         onTouchStart: panelTouchStart,
         onTouchMove: panelTouchMove,
-        onTouchEnd: panelTouchEnd
+        onTouchEnd: panelTouchEnd,
+        role: "listbox",
+        "aria-label": "options",
+        "aria-orientation": "vertical",
+        tabIndex: 0
       }, others),
       /* @__PURE__ */ React.createElement(
         "div",
@@ -247,12 +254,16 @@ const PickerPanel = /* @__PURE__ */ React.forwardRef(
                 fitstOptionRef.current = el;
             },
             className: clsx(`${prefixCls}-option`, {
-              [`${prefixCls}-option-hidden`]: i + 1 <= currIndex - 8 || i + 1 >= currIndex + 8
+              [`${prefixCls}-option-hidden`]: i + 1 <= currIndex - 8 || i + 1 >= currIndex + 8,
+              [`${prefixCls}-option-disabled`]: item == null ? void 0 : item.disabled
             }),
             key: `${item == null ? void 0 : item.value}-${i}`,
             style: {
               transform: `rotate3d(1, 0, 0, ${-ROTATION * (i + 1)}deg) translate3d(0px, 0px, ${indicatorOffset}px)`
-            }
+            },
+            role: "option",
+            "aria-selected": item.value === value,
+            "aria-disabled": !!(item == null ? void 0 : item.disabled)
           },
           item == null ? void 0 : item.label
         ))

package/es/Picker/__tests__/fixtures/A11yDemos.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CalendarDemo: () => React.JSX.Element;

package/es/Picker/__tests__/fixtures/A11yDemos.js

@@ -0,0 +1,46 @@
+import React from "react";
+import Picker from "../../Picker";
+const CalendarDemo = () => {
+  return /* @__PURE__ */ React.createElement(
+    Picker,
+    {
+      open: true,
+      value: [2],
+      options: [
+        [
+          {
+            value: 1,
+            label: "\u5468\u4E00"
+          },
+          {
+            value: 2,
+            label: "\u5468\u4E8C"
+          },
+          {
+            value: 3,
+            label: "\u5468\u4E09"
+          },
+          {
+            value: 4,
+            label: "\u5468\u56DB"
+          },
+          {
+            value: 5,
+            label: "\u5468\u4E94"
+          },
+          {
+            value: 6,
+            label: "\u5468\u516D"
+          },
+          {
+            value: 7,
+            label: "\u5468\u65E5"
+          }
+        ]
+      ]
+    }
+  );
+};
+export {
+  CalendarDemo
+};

package/es/Picker/index.css

@@ -46,6 +46,10 @@ xhs-page {
   line-height: var(--bui-picker-confirm-line-height);
   color: var(--bui-color-primary);
 }
+.bui-picker-confirm-disabled {
+  color: var(--bui-color-fg-default);
+  opacity: var(--bui-picker-confirm-disabled-opacity);
+}
 .bui-picker-container {
   width: 100%;
   height: var(--bui-picker-panel-height);
@@ -53,6 +57,7 @@ xhs-page {
   overflow: hidden;
 }
 .bui-picker-panel {
+  --bui-picker-option-disabled-opacity: 0.38;
   flex: 1;
   flex-shrink: 0;
   position: relative;
@@ -110,6 +115,9 @@ xhs-page {
   white-space: nowrap;
   width: 100%;
 }
+.bui-picker-panel-option-disabled {
+  opacity: var(--bui-picker-option-disabled-opacity);
+}
 .bui-picker-panel-option-hidden {
   visibility: hidden;
   opacity: 0;

package/es/Picker/utils.d.ts

@@ -1,8 +1,8 @@
-import { ICascadePickerOptionItem, ICascadePickerChildOptionItem } from './Picker.types';
+import { IPickerOptionItem, ICascadePickerOptionItem, ICascadePickerChildOptionItem } from './Picker.types';
 /**
  * 根据第一列数据判断选择器类型
  */
-export declare const pickerPanelType: (options?: any[]) => "multiple" | "single" | "cascade";
+export declare const pickerPanelType: (options?: (IPickerOptionItem[] | ICascadePickerOptionItem)[]) => "multiple" | "single" | "cascade";
 /**
  * 格式化级联模式数据
  */
@@ -10,11 +10,14 @@ export declare const formatCascade: (columns: ICascadePickerOptionItem[], values
 /**
  * 统一options数据格式
  */
-export declare const formatOptions: (internalValue: any, options?: any[]) => any[];
+export declare const formatOptions: (internalValue: (number | string)[], options?: any[]) => any[];
 /**
  * 在格式化后的数据源中是否存在等长子项的value
  */
-export declare const existSameLengthValue: (value: any, formatted: any) => any;
+export declare const existSameLengthValue: (value: unknown[], formatted: {
+    [index: string]: unknown;
+    value: string | number;
+}[][]) => boolean;
 /**
  * 关闭选择器时，纠正value和格式化数据
  * 取决于formatted后的options有几列，若value为格式化后数据源（formatted）的等长子集，则取value，否则执行纠正逻辑
@@ -25,5 +28,5 @@ export declare const safeData: ({ value, formatted, options }: {
     options: any;
 }) => {
     safeValue: any[];
-    safeFormatted: any[];
+    safeFormattedValue: any[];
 };

package/es/Picker/utils.js

@@ -30,14 +30,11 @@ const formatCascade = (columns, values) => {
 };
 const formatOptions = (internalValue, options = []) => {
   const panelType = pickerPanelType(options);
-  switch (panelType) {
-    case "multiple":
-      return options;
-    case "cascade":
-      return formatCascade(options, internalValue);
-    default:
-      return options;
-  }
+  if (panelType === "multiple")
+    return options;
+  if (panelType === "cascade")
+    return formatCascade(options, internalValue);
+  return options;
 };
 const existSameLengthValue = (value, formatted) => {
   const result = formatted.every(
@@ -47,22 +44,22 @@ const existSameLengthValue = (value, formatted) => {
 };
 const safeData = ({ value, formatted, options }) => {
   let safeValue = [];
-  let safeFormatted = [];
+  let safeFormattedValue = [];
   const existValidChildren = existSameLengthValue(value, formatted);
   if (existValidChildren) {
     safeValue = value;
-    safeFormatted = formatted;
+    safeFormattedValue = formatted;
   } else {
     formatted.forEach((item, index) => {
       var _a, _b;
       const childIndex = item.findIndex((i) => i.value === value[index]);
       safeValue[index] = ((_a = item == null ? void 0 : item[childIndex]) == null ? void 0 : _a.value) || ((_b = item == null ? void 0 : item[0]) == null ? void 0 : _b.value);
     });
-    safeFormatted = formatOptions(safeValue, options);
+    safeFormattedValue = formatOptions(safeValue, options);
   }
   return {
     safeValue,
-    safeFormatted
+    safeFormattedValue
   };
 };
 export {

package/es/Popover/Popover.js

@@ -1,4 +1,6 @@
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -14,6 +16,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -27,31 +30,38 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import clsx from "clsx";
-import React, { useState, useRef, useEffect } from "react";
-import {
-  getStylesAndLocation,
-  triggerEventTransform,
-  parsePlacement,
-  useUniqueId,
-  throttle
-} from "@bifrostui/utils";
+import React from "react";
+import { useForkRef } from "@bifrostui/utils";
 import Portal from "../Portal";
+import Backdrop from "../Backdrop";
+import {
+  usePopoverState,
+  usePopoverPosition,
+  usePopoverA11y,
+  usePopoverEvents
+} from "./hooks";
 import "./index.css";
 const prefixCls = "bui-popover";
 const Popover = /* @__PURE__ */ React.forwardRef((props, ref) => {
+  var _b;
   const _a = props, {
     className,
     style,
     children,
     title,
     content,
-    defaultOpen,
+    defaultOpen = false,
     offsetSpacing = 0,
-    placement = "top",
+    anchorOrigin = { vertical: "top", horizontal: "center" },
     trigger = "click",
-    onOpenChange,
     open,
-    hideArrow
+    hideArrow,
+    onOpenChange,
+    role = "tooltip",
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    autoFocus = false,
+    closeOnEscape = false
   } = _a, others = __objRest(_a, [
     "className",
     "style",
@@ -60,110 +70,131 @@ const Popover = /* @__PURE__ */ React.forwardRef((props, ref) => {
     "content",
     "defaultOpen",
     "offsetSpacing",
-    "placement",
+    "anchorOrigin",
     "trigger",
-    "onOpenChange",
     "open",
-    "hideArrow"
+    "hideArrow",
+    "onOpenChange",
+    "role",
+    "aria-label",
+    "aria-labelledby",
+    "autoFocus",
+    "closeOnEscape"
   ]);
-  const controlByUser = typeof open !== "undefined";
-  const { direction, location = "center" } = parsePlacement(placement);
-  const childrenRef = useRef();
-  const [openStatus, setOpenStatus] = useState(defaultOpen);
-  const [arrowDirection, setArrowDirection] = useState(direction);
-  const [arrowLocation, setArrowLocation] = useState(location);
-  const [tooltyles, setTooltyles] = useState({});
-  const ttId = useUniqueId();
-  const changeOpenStatus = (event, status) => {
-    if (controlByUser)
-      return;
-    setOpenStatus(status);
-    onOpenChange == null ? void 0 : onOpenChange(event, { open: status });
-  };
-  const triggerClick = (event) => {
-    event.stopPropagation();
-    const targetStatus = !openStatus;
-    changeOpenStatus(event, targetStatus);
-  };
-  const hidePopover = (event) => {
+  const { isOpen, openStatus, controlByUser, changeOpenStatus } = usePopoverState({
+    defaultOpen,
+    open,
+    onOpenChange
+  });
+  const {
+    arrowDirection,
+    arrowLocation,
+    toolStyles,
+    tipRef,
+    childrenRef,
+    onMounted,
+    clearRef
+  } = usePopoverPosition({
+    anchorOrigin,
+    offsetSpacing,
+    isOpen
+  });
+  const nodeRef = useForkRef(ref, tipRef);
+  const handleHide = (event) => {
+    clearRef(false);
     changeOpenStatus(event, false);
   };
-  const showPopover = (event) => {
+  const handleShow = (event) => {
     changeOpenStatus(event, true);
   };
-  useEffect(() => {
-    if (!controlByUser)
-      return;
-    setOpenStatus(open);
-  }, [open]);
-  const clickEventHandler = (event) => {
-    if (trigger === "hover" || (trigger == null ? void 0 : trigger.length) === 1 && (trigger == null ? void 0 : trigger[0]) === "hover")
-      return;
-    hidePopover(event);
-  };
-  const onRootElementMouted = throttle(() => {
-    const {
-      direction: newParsedDirection,
-      location: newParsedLocation = "center"
-    } = parsePlacement(placement);
-    const result = getStylesAndLocation({
-      childrenRef,
-      arrowDirection: newParsedDirection,
-      arrowLocation: newParsedLocation,
-      offsetSpacing,
-      selector: `[data-id="tt_${ttId}"]`
-    });
-    if (!result)
-      return;
-    const { styles, newArrowDirection, newArrowLocation } = result;
-    if (newArrowDirection !== arrowDirection) {
-      setArrowDirection(newArrowDirection);
-    }
-    if (newArrowLocation !== arrowLocation) {
-      setArrowLocation(newArrowLocation);
-    }
-    setTooltyles(styles);
-  }, 100);
-  const bindEvent = () => {
-    if (!controlByUser) {
-      document.addEventListener("click", clickEventHandler);
-    }
-    window.addEventListener("resize", onRootElementMouted);
-  };
-  const unbindEvent = () => {
-    if (!controlByUser) {
-      document.removeEventListener("click", clickEventHandler);
+  const handleTriggerClick = (event) => {
+    event.stopPropagation();
+    const targetStatus = !openStatus;
+    if (targetStatus) {
+      changeOpenStatus(event, true);
+    } else {
+      clearRef(false);
+      changeOpenStatus(event, false);
     }
-    window.removeEventListener("resize", onRootElementMouted);
   };
-  useEffect(() => {
-    bindEvent();
-    return () => {
-      unbindEvent();
-    };
-  }, []);
+  const { popoverId, handleKeyDown } = usePopoverA11y({
+    isOpen,
+    autoFocus,
+    closeOnEscape,
+    onClose: handleHide,
+    tipRef,
+    childrenRef
+  });
+  const { triggerEventOption, backdropProps } = usePopoverEvents({
+    isOpen,
+    controlByUser,
+    trigger,
+    onShow: handleShow,
+    onHide: handleHide,
+    onTriggerClick: handleTriggerClick,
+    onMounted,
+    handleKeyDown,
+    tipRef,
+    childrenRef
+  });
   if (!title && !content)
     return null;
-  let triggerEventOption;
-  if (!controlByUser) {
-    triggerEventOption = triggerEventTransform({
-      trigger,
-      click: triggerClick,
-      show: showPopover,
-      hide: hidePopover
-    });
-  }
-  const childrenOptions = __spreadValues({
+  const getAriaHasPopup = () => {
+    if (role === "menu")
+      return "menu";
+    if (role === "listbox")
+      return "listbox";
+    return "dialog";
+  };
+  const childrenOptions = __spreadValues(__spreadProps(__spreadValues({
     ref: childrenRef
-  }, triggerEventOption);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, open || openStatus ? /* @__PURE__ */ React.createElement(Portal, { onRootElementMouted, ref }, /* @__PURE__ */ React.createElement(
+  }, triggerEventOption), {
+    "aria-describedby": isOpen ? popoverId : void 0,
+    "aria-haspopup": getAriaHasPopup()
+  }), React.isValidElement(children) && (children.type === "button" || children.type === "a" || ((_b = children.props) == null ? void 0 : _b.role) === "button") && {
+    "aria-expanded": isOpen
+  });
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, isOpen ? /* @__PURE__ */ React.createElement(Portal, { onMounted }, backdropProps && /* @__PURE__ */ React.createElement(
+    Backdrop,
+    __spreadValues({
+      className: "bui-popover-backdrop",
+      style: {
+        zIndex: 999
+      },
+      open: isOpen,
+      invisible: true,
+      role: "button",
+      tabIndex: -1,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          if ((backdropProps == null ? void 0 : backdropProps.onClick) && typeof backdropProps.onClick === "function") {
+            backdropProps.onClick(
+              e
+            );
+          }
+        }
+      }
+    }, backdropProps)
+  ), /* @__PURE__ */ React.createElement(
     "div",
     __spreadValues({
       className: clsx(prefixCls, className, `popover-${arrowDirection}`, {
         "bui-popover-arrow-hide": hideArrow
       }),
-      "data-id": `tt_${ttId}`,
-      style: __spreadValues(__spreadValues({}, style), tooltyles)
+      style: __spreadValues(__spreadValues({}, style), toolStyles),
+      ref: nodeRef,
+      id: popoverId,
+      role,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      tabIndex: autoFocus ? 0 : void 0,
+      onClick: (e) => e.stopPropagation(),
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.stopPropagation();
+        }
+      }
     }, others),
     !hideArrow ? /* @__PURE__ */ React.createElement(
       "div",