@bifrostui/react 1.5.3 → 2.0.0-alpha.1

package/dist/Countdown/__tests__/fixtures/A11yDemos.js

@@ -0,0 +1,107 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var A11yDemos_exports = {};
+__export(A11yDemos_exports, {
+  ariaDescribedbyCountdownDemo: () => ariaDescribedbyCountdownDemo,
+  ariaLabelCountdownDemo: () => ariaLabelCountdownDemo,
+  ariaLabelledbyCountdownDemo: () => ariaLabelledbyCountdownDemo,
+  basicCountdownDemo: () => basicCountdownDemo,
+  customRenderCountdownDemo: () => customRenderCountdownDemo,
+  default: () => A11yDemos_default,
+  endTimestampCountdownDemo: () => endTimestampCountdownDemo,
+  serverTimestampCountdownDemo: () => serverTimestampCountdownDemo
+});
+module.exports = __toCommonJS(A11yDemos_exports);
+var import_react = __toESM(require("react"));
+var import_Countdown = __toESM(require("../../Countdown"));
+const basicCountdownDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Countdown.default, { remainingTime: 60 * 1e3 }));
+};
+const ariaLabelCountdownDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Countdown.default, { remainingTime: 120 * 1e3, "aria-label": "\u4FC3\u9500\u6D3B\u52A8\u7ED3\u675F\u5012\u8BA1\u65F6" }));
+};
+const ariaLabelledbyCountdownDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h3", { id: "flash-sale-title" }, "\u9650\u65F6\u62A2\u8D2D"), /* @__PURE__ */ import_react.default.createElement(
+    import_Countdown.default,
+    {
+      remainingTime: 180 * 1e3,
+      "aria-labelledby": "flash-sale-title"
+    }
+  ));
+};
+const ariaDescribedbyCountdownDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    import_Countdown.default,
+    {
+      remainingTime: 240 * 1e3,
+      "aria-describedby": "countdown-description"
+    }
+  ), /* @__PURE__ */ import_react.default.createElement("p", { id: "countdown-description" }, "\u5012\u8BA1\u65F6\u7ED3\u675F\u540E\uFF0C\u4F18\u60E0\u4EF7\u683C\u5C06\u6062\u590D\u4E3A\u539F\u4EF7"));
+};
+const customRenderCountdownDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    import_Countdown.default,
+    {
+      remainingTime: 300 * 1e3,
+      renderContent: ({ hours, minutes, seconds }) => {
+        return /* @__PURE__ */ import_react.default.createElement("span", null, "\u8DDD\u79BB\u5012\u8BA1\u65F6\u7ED3\u675F\u8FD8\u5269", hours, "\u5C0F\u65F6", minutes, "\u5206\u949F", seconds, "\u79D2");
+      }
+    }
+  ));
+};
+const endTimestampCountdownDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Countdown.default, { endTimestamp: Date.now() + 360 * 1e3 }));
+};
+const serverTimestampCountdownDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    import_Countdown.default,
+    {
+      serverTimestamp: Date.now() - 10 * 1e3,
+      endTimestamp: Date.now() + 420 * 1e3
+    }
+  ));
+};
+var A11yDemos_default = {
+  basicCountdownDemo,
+  ariaLabelCountdownDemo,
+  ariaLabelledbyCountdownDemo,
+  ariaDescribedbyCountdownDemo,
+  customRenderCountdownDemo,
+  endTimestampCountdownDemo,
+  serverTimestampCountdownDemo
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ariaDescribedbyCountdownDemo,
+  ariaLabelCountdownDemo,
+  ariaLabelledbyCountdownDemo,
+  basicCountdownDemo,
+  customRenderCountdownDemo,
+  endTimestampCountdownDemo,
+  serverTimestampCountdownDemo
+});

package/dist/Countdown/index.css

@@ -0,0 +1,54 @@
+:root,
+page,
+xhs-page {
+  --bui-countdown-font-size: var(--bui-text-size-1);
+  --bui-countdown-color: var(--bui-color-fg-default);
+  --bui-countdown-font-weight: var(--bui-font-weight-normal);
+  --bui-countdown-slice-unit-margin: 0 2px;
+}
+.bui-countdown {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-size: var(--bui-countdown-font-size);
+  color: var(--bui-countdown-color);
+  font-weight: var(--bui-countdown-font-weight);
+  font-family: var(--bui-font-family);
+}
+.bui-countdown-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+.bui-countdown-slice {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.bui-countdown-slice-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.bui-countdown-slice-value {
+  font-family:
+    "Helvetica Neue",
+    helvetica,
+    "PingFang SC",
+    "Chinese Quote",
+    "Segoe UI",
+    roboto,
+    "Hiragino Sans GB",
+    "Microsoft YaHei",
+    arial,
+    sans-serif;
+}
+.bui-countdown-slice-unit {
+  margin: var(--bui-countdown-slice-unit-margin);
+}

package/dist/DesktopDatePicker/DesktopDatePicker.css

@@ -0,0 +1,61 @@
+:root,
+page,
+xhs-page {
+  --bui-d-date-picker-height: var(--bui-input-height, 32px);
+  --bui-d-date-picker-min-width: var(--bui-input-min-width, 100px);
+  --bui-d-date-picker-font-size: var(--bui-title-size-3, 16px);
+  --bui-d-date-picker-icon-size: var(--bui-title-size-3, 16px);
+  --bui-d-date-picker-container-padding: var(--bui-spacing-md, 9px);
+  --bui-d-date-picker-bg: var(--bui-color-bg-view);
+  --bui-d-date-picker-font-family: var(--bui-font-family);
+  --bui-d-date-picker-border: 1px solid var(--bui-color-border-default);
+  --bui-d-date-picker-shadow: 0 0 0 2px var(--bui-color-bg-default);
+  --bui-d-date-picker-disabled-color: var(--bui-color-fg-subtle);
+}
+.bui-d-date-picker {
+  position: relative;
+  cursor: pointer;
+  vertical-align: middle;
+  height: var(--bui-d-date-picker-height);
+  min-width: var(--bui-d-date-picker-min-width);
+  font-size: var(--bui-d-date-picker-font-size);
+  border-radius: 5px;
+  background-color: var(--bui-d-date-picker-bg);
+  font-family: var(--bui-d-date-picker-font-family);
+  border: var(--bui-d-date-picker-border);
+}
+.bui-d-date-picker:active,
+.bui-d-date-picker-active {
+  box-shadow: var(--bui-d-date-picker-shadow);
+}
+.bui-d-date-picker-icon {
+  display: flex;
+  align-items: center;
+  font-size: var(--bui-d-date-picker-icon-size);
+  height: 100%;
+  padding-left: 6px;
+}
+.bui-d-date-picker-container {
+  display: flex;
+  align-items: center;
+  padding: 0 var(--bui-d-date-picker-container-padding);
+  height: 100%;
+}
+.bui-d-date-picker-input {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1;
+  height: 100%;
+  background-color: transparent;
+  outline: none;
+  border: 0;
+}
+.bui-d-date-picker.bui-d-date-picker-disabled {
+  pointer-events: none;
+  box-shadow: none;
+  background-color: rgba(188, 188, 188, 0.2);
+}
+.bui-d-date-picker.bui-d-date-picker-disabled input {
+  color: var(--bui-d-date-picker-disabled-color);
+}

package/dist/DesktopDatePicker/DesktopDatePicker.js

@@ -66,7 +66,7 @@ var import_react = __toESM(require("react"));
 var import_utils = require("@bifrostui/utils");
 var import_DesktopPicker = __toESM(require("../DesktopPicker"));
 var import_useGetDatePickerContent = __toESM(require("./useGetDatePickerContent"));
-var import_index = require("./index.css");
+var import_DesktopDatePicker2 = require("./DesktopDatePicker.css");
 const prefixCls = "bui-d-date-picker";
 const DesktopDatePicker = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   const _a = props, {

package/dist/DesktopDatePicker/index.css

@@ -59,3 +59,103 @@ xhs-page {
 .bui-d-date-picker.bui-d-date-picker-disabled input {
   color: var(--bui-d-date-picker-disabled-color);
 }
+:root,
+page,
+xhs-page {
+  --bui-calendar-padding: 6px 12px 7px;
+  --bui-d-date-picker-lay-font-family: var(--bui-font-family);
+  --bui-d-date-picker-lay-main-radius: 3px;
+  --bui-d-date-picker-lay-content-padding: 10px 16px;
+  --bui-d-date-picker-lay-content-height: 30px;
+  --bui-d-date-picker-lay-content-line-height: 30px;
+  --bui-d-date-picker-lay-content-width: 60px;
+  --bui-d-date-picker-lay-calendar-padding: 6px 12px 7px;
+  --bui-d-date-picker-lay-shadow: 0 0 0 2px var(--bui-color-bg-default);
+  --bui-d-date-picker-title-size: var(--bui-title-size-3);
+  --bui-d-date-picker-list-padding: 6px 12px 7px;
+  --bui-d-date-picker-col-bg: var(--bui-color-bg-view);
+  --bui-d-date-picker-content-radius: var(--bui-shape-radius-default, 6px);
+  --bui-d-date-picker-col-font-size: var(--bui-title-size-4);
+}
+.bui-d-date-picker-lay-main {
+  height: 308px;
+  font-family: var(--bui-d-date-picker-lay-font-family);
+  border-radius: var(--bui-d-date-picker-lay-main-radius);
+  padding: 3px 0;
+  box-shadow: var(--bui-d-date-picker-lay-shadow);
+  overflow: hidden;
+  flex: 1;
+}
+.bui-d-date-picker-lay-handler {
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 7px;
+  margin-top: 8px;
+}
+.bui-d-date-picker-lay-handler-btn {
+  font-size: 16px;
+  height: 100%;
+  width: 46px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bui-d-date-picker-lay-handler-icon {
+  font-size: 28px;
+}
+.bui-d-date-picker-lay-title {
+  display: flex;
+  align-items: center;
+}
+.bui-d-date-picker-lay-title-text {
+  white-space: nowrap;
+  font-size: var(--bui-d-date-picker-title-size);
+  font-weight: var(--bui-font-weight-medium);
+  text-align: center;
+}
+.bui-d-date-picker-lay-title-text:hover {
+  cursor: pointer;
+  color: var(--bui-color-blue);
+}
+.bui-d-date-picker-lay-list {
+  max-height: 262px;
+  overflow: auto;
+  padding: var(--bui-d-date-picker-list-padding);
+}
+.bui-d-date-picker-lay-row {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+.bui-d-date-picker-lay-col {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--bui-d-date-picker-col-bg);
+  cursor: pointer;
+}
+.bui-d-date-picker-lay-col-content {
+  margin: 12px 8px;
+  padding: 4px 6px;
+  border-radius: var(--bui-d-date-picker-content-radius);
+  display: inline-block;
+  text-align: center;
+  font-weight: var(--bui-font-weight-medium);
+  color: var(--bui-color-fg-default);
+  font-family: var(--bui-d-date-picker-lay-font-family);
+}
+.bui-d-date-picker-lay-col-text {
+  display: inline-block;
+  width: 36px;
+  font-size: var(--bui-d-date-picker-col-font-size);
+  line-height: 1;
+}
+.bui-d-date-picker-lay-col-active .bui-d-date-picker-lay-col-content {
+  color: #000;
+  background-color: #ffc7da;
+}
+.bui-d-date-picker-lay-col-disabled .bui-d-date-picker-lay-col-content {
+  color: #ccc;
+}

package/dist/Dialog/Dialog.js

@@ -61,6 +61,7 @@ __export(Dialog_exports, {
 module.exports = __toCommonJS(Dialog_exports);
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
+var import_utils = require("@bifrostui/utils");
 var import_Input = require("../Input");
 var import_Button = require("../Button");
 var import_locales = require("../locales");
@@ -72,11 +73,11 @@ const Dialog = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   const _a = props, {
     open,
     onOk,
-    onClose,
-    header,
-    message,
-    type,
-    confirmText,
+    onCancel,
+    title,
+    content,
+    type = "confirm",
+    okText,
     cancelText,
     placeholder,
     InputProps,
@@ -85,33 +86,42 @@ const Dialog = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   } = _a, others = __objRest(_a, [
     "open",
     "onOk",
-    "onClose",
-    "header",
-    "message",
+    "onCancel",
+    "title",
+    "content",
     "type",
-    "confirmText",
+    "okText",
     "cancelText",
     "placeholder",
     "InputProps",
     "className",
     "theme"
   ]);
-  const InputRef = (0, import_react.useRef)(null);
+  const inputRef = (0, import_react.useRef)(null);
+  const titleId = (0, import_utils.useUniqueId)();
+  const contentId = (0, import_utils.useUniqueId)();
   const themeConfig = (0, import_ThemeProvider.useTheme)(theme);
   const {
     cancel,
-    confirm,
+    ok,
     placeholder: placeholderLocaleName
   } = (0, import_locales.useLocaleText)("dialog", themeConfig);
-  (0, import_react.useImperativeHandle)(ref, () => {
-    return { theme: themeConfig };
-  });
-  const footerNode = /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-body-footer` }, /* @__PURE__ */ import_react.default.createElement(
+  const isAlertMode = type === "alert";
+  const isPromptMode = type === "prompt";
+  const handleOk = (event) => {
+    var _a2;
+    const inputValue = ((_a2 = inputRef.current) == null ? void 0 : _a2.value) || "";
+    onOk == null ? void 0 : onOk(event, { value: inputValue });
+  };
+  const handleCancel = (event) => {
+    onCancel == null ? void 0 : onCancel(event);
+  };
+  const actionsNode = /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-actions` }, !isAlertMode && /* @__PURE__ */ import_react.default.createElement(
     import_Button.Button,
     {
       variant: "text",
-      onClick: onClose,
-      className: `${prefixCls}-body-button`
+      onClick: handleCancel,
+      className: `${prefixCls}-actions-btn`
     },
     cancelText || cancel
   ), /* @__PURE__ */ import_react.default.createElement(
@@ -119,33 +129,45 @@ const Dialog = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     {
       variant: "text",
       color: "primary",
-      onClick: () => {
-        var _a2;
-        onOk((_a2 = InputRef == null ? void 0 : InputRef.current) == null ? void 0 : _a2.value);
-      },
-      className: `${prefixCls}-body-button`
+      onClick: handleOk,
+      className: `${prefixCls}-actions-btn`
     },
-    confirmText || confirm
+    okText || ok
   ));
-  const inputNode = type === "prompt" && /* @__PURE__ */ import_react.default.createElement(
+  const inputNode = isPromptMode && /* @__PURE__ */ import_react.default.createElement(
     import_Input.Input,
     __spreadProps(__spreadValues({}, InputProps), {
-      inputRef: InputRef,
-      className: `${prefixCls}-body-input`,
-      placeholder: `${placeholder || placeholderLocaleName}`
+      inputRef,
+      className: `${prefixCls}-input`,
+      placeholder: placeholder || placeholderLocaleName,
+      autoFocus: true,
+      "aria-describedby": content ? contentId : void 0
     })
   );
-  if (!open)
-    return null;
+  const ariaLabelledBy = title ? titleId : void 0;
+  const ariaDescribedBy = content ? contentId : void 0;
   return /* @__PURE__ */ import_react.default.createElement(
     import_Modal.default,
     __spreadProps(__spreadValues({}, others), {
-      open: true,
-      className: (0, import_clsx.default)(prefixCls, className),
-      disablePortal: true,
-      onClose
+      open,
+      ref,
+      className: (0, import_clsx.default)(prefixCls, `${prefixCls}-${type}`, className),
+      onClose: handleCancel
     }),
-    /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-body` }, header && /* @__PURE__ */ import_react.default.createElement("h1", { className: `${prefixCls}-body-title` }, header), message && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-body-desc` }, message), inputNode, footerNode)
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: `${prefixCls}-container`,
+        role: type === "alert" ? "alertdialog" : "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": ariaDescribedBy
+      },
+      title && /* @__PURE__ */ import_react.default.createElement("h1", { id: titleId, className: `${prefixCls}-title` }, title),
+      content && /* @__PURE__ */ import_react.default.createElement("div", { id: contentId, className: `${prefixCls}-content` }, content),
+      inputNode,
+      actionsNode
+    )
   );
 });
 Dialog.displayName = "BuiDialog";