@oceanbase/ui 1.0.0-alpha.8 → 1.0.0

package/lib/SideTip/style/index.js

@@ -1,97 +1,92 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+"use strict";
 
-// src/SideTip/style/index.ts
-var style_exports = {};
-__export(style_exports, {
-  default: () => style_default,
-  genSideTipStyle: () => genSideTipStyle
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(style_exports);
-var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
-var genSideTipStyle = (token) => {
-  const { componentCls, boxShadowSecondary, colorTextQuaternary, colorTextSecondary } = token;
+exports.genSideTipStyle = exports.default = void 0;
+var _genComponentStyleHook = require("../../_util/genComponentStyleHook");
+const genSideTipStyle = token => {
+  const {
+    componentCls,
+    boxShadowSecondary,
+    colorTextQuaternary,
+    colorTextSecondary
+  } = token;
   return {
     [`${componentCls}-container`]: {
-      position: "fixed",
+      position: 'fixed',
       zIndex: 0,
       fontSize: 14,
-      cursor: "pointer",
+      cursor: 'pointer',
       insetInlineEnd: 24,
       insetBlockEnd: 24,
       [`&.${componentCls}-container-dragged`]: {
-        cursor: "grab"
+        cursor: 'grab'
       },
       [`&.${componentCls}-container-disabled`]: {
-        cursor: "not-allowed"
+        cursor: 'not-allowed'
       },
       [`&.${componentCls}-container-hide`]: {
-        transition: "all 0.3s"
+        transition: 'all 0.3s'
       },
-      "@media screen and (max-width: 768px)": {
-        display: "none"
+      '@media screen and (max-width: 768px)': {
+        display: 'none'
       },
       [`&.${componentCls}-container-hide-not-dragged:hover`]: {
-        insetInlineEnd: "0 !important"
+        insetInlineEnd: '0 !important'
       },
       [`${componentCls}-hide`]: {
-        position: "absolute",
+        position: 'absolute',
         zIndex: 0,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
         width: 20,
         height: 20,
-        background: "rgba(0, 0, 0, 0.15)",
+        background: 'rgba(0, 0, 0, 0.15)',
         borderRadius: 20,
-        transform: "scale(0)",
-        cursor: "pointer",
+        transform: 'scale(0)',
+        cursor: 'pointer',
         opacity: 0,
-        transition: "all 0.18s ease-out 0.18s",
+        transition: 'all 0.18s ease-out 0.18s',
         insetBlockStart: 0,
         insetInlineEnd: -22,
-        "&:hover": {
-          background: "rgba(0, 0, 0, 0.35)"
+        border: 'none',
+        padding: 0,
+        font: 'inherit',
+        appearance: 'none',
+        WebkitAppearance: 'none',
+        '&:hover': {
+          background: 'rgba(0, 0, 0, 0.35)'
         },
         [`${componentCls}-hide-icon`]: {
           width: 6,
           height: 2,
-          background: "#fff",
+          background: '#fff',
           borderRadius: 4
         },
         [`&.${componentCls}-hide-hovered`]: {
-          transform: "scale(1)",
+          transform: 'scale(1)',
           opacity: 1
         }
       },
       [`${componentCls}-button`]: {
-        position: "relative",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
         width: 56,
         height: 56,
-        backgroundColor: "#fff",
-        borderRadius: "50%",
+        backgroundColor: '#fff',
+        borderRadius: '50%',
         boxShadow: boxShadowSecondary,
-        cursor: "pointer",
-        transition: "background-color 0.2s ease 0.1s, opacity 0.2s ease 0s, transform 0.2s ease 0.1s",
-        userSelect: "none",
+        cursor: 'pointer',
+        transition: 'background-color 0.2s ease 0.1s, opacity 0.2s ease 0s, transform 0.2s ease 0.1s',
+        userSelect: 'none',
+        '&:focus-visible': {
+          outline: `2px solid ${token.colorPrimary}`,
+          outlineOffset: 2
+        },
         [`&${componentCls}-button-primary`]: {
           backgroundColor: `${token.colorPrimary} !important`
         },
@@ -101,13 +96,13 @@ var genSideTipStyle = (token) => {
         },
         [`&${componentCls}-button-disabled`]: {
           backgroundColor: `${colorTextQuaternary} !important`,
-          cursor: "not-allowed"
+          cursor: 'not-allowed'
         },
-        "&:hover": {
+        '&:hover': {
           opacity: 1
         },
         [`${componentCls}-button-loading`]: {
-          position: "absolute",
+          position: 'absolute',
           width: 56,
           height: 56,
           color: token.colorPrimary,
@@ -115,7 +110,7 @@ var genSideTipStyle = (token) => {
           insetBlockStart: 0,
           insetInlineEnd: 0,
           [`&${componentCls}-button-loading-primary`]: {
-            color: "#fff"
+            color: '#fff'
           },
           [`&${componentCls}-button-loading-small`]: {
             width: 40,
@@ -125,22 +120,22 @@ var genSideTipStyle = (token) => {
           }
         },
         [`${componentCls}-button-close`]: {
-          position: "absolute",
+          position: 'absolute',
           width: 24,
           height: 24,
           color: colorTextSecondary,
           fontSize: 24,
-          transform: "translate(-50%, -50%) scale(0.4) rotate(-45deg)",
+          transform: 'translate(-50%, -50%) scale(0.4) rotate(-45deg)',
           opacity: 0,
-          transition: "all 0.3s linear",
-          userSelect: "none",
-          insetBlockStart: "50%",
-          insetInlineStart: "50%",
+          transition: 'all 0.3s linear',
+          userSelect: 'none',
+          insetBlockStart: '50%',
+          insetInlineStart: '50%',
           [`&.${componentCls}-button-close-primary`]: {
-            color: "#fff"
+            color: '#fff'
           },
           [`&.${componentCls}-button-close-show`]: {
-            transform: "translate(-50%, -50%)",
+            transform: 'translate(-50%, -50%)',
             opacity: 1
           },
           [`&.${componentCls}-button-close-small`]: {
@@ -151,41 +146,41 @@ var genSideTipStyle = (token) => {
           }
         },
         [`${componentCls}-button-icon`]: {
-          position: "absolute",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
+          position: 'absolute',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
           width: 24,
           height: 24,
           color: colorTextSecondary,
           fontSize: 24,
           lineHeight: 24,
-          transform: "translate(-50%, -50%)",
+          transform: 'translate(-50%, -50%)',
           opacity: 1,
-          transition: "all 0.3s linear",
-          userSelect: "none",
-          insetBlockStart: "50%",
-          insetInlineStart: "50%",
-          "> *": {
-            fontSize: "inherit",
-            color: "inherit"
+          transition: 'all 0.3s linear',
+          userSelect: 'none',
+          insetBlockStart: '50%',
+          insetInlineStart: '50%',
+          '> *': {
+            fontSize: 'inherit',
+            color: 'inherit'
           },
           img: {
-            width: "100%",
-            height: "100%",
-            objectFit: "contain"
+            width: '100%',
+            height: '100%',
+            objectFit: 'contain'
           },
           [`&.${componentCls}-button-icon-open`]: {
-            transform: "translate(-50%, -50%) scale(0.4) rotate(45deg)",
+            transform: 'translate(-50%, -50%) scale(0.4) rotate(45deg)',
             opacity: 0
           },
           [`&.${componentCls}-button-icon-disabled`]: {
             color: colorTextQuaternary
           },
           [`&${componentCls}-button-icon-primary`]: {
-            color: "#fff !important",
-            "> *": {
-              color: "#fff !important"
+            color: '#fff !important',
+            '> *': {
+              color: '#fff !important'
             }
           },
           [`&${componentCls}-button-icon-small`]: {
@@ -199,13 +194,11 @@ var genSideTipStyle = (token) => {
     }
   };
 };
-var style_default = (prefixCls) => {
-  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("SideTip", (token) => {
+exports.genSideTipStyle = genSideTipStyle;
+var _default = prefixCls => {
+  const useStyle = (0, _genComponentStyleHook.genComponentStyleHook)('SideTip', token => {
     return [genSideTipStyle(token)];
   });
   return useStyle(prefixCls);
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  genSideTipStyle
-});
+exports.default = _default;

package/lib/SideTip/utils.js

@@ -1,32 +1,10 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+"use strict";
 
-// src/SideTip/utils.ts
-var utils_exports = {};
-__export(utils_exports, {
-  getClientHeight: () => getClientHeight,
-  getClientWidth: () => getClientWidth,
-  getScrollBarSize: () => getScrollBarSize,
-  getScrollOffsets: () => getScrollOffsets,
-  isFixedElem: () => isFixedElem
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(utils_exports);
-var getScrollOffsets = (dom) => {
+exports.isFixedElem = exports.getScrollOffsets = exports.getScrollBarSize = exports.getClientWidth = exports.getClientHeight = void 0;
+const getScrollOffsets = dom => {
   if (window.pageXOffset != null) {
     return {
       x: window.pageXOffset,
@@ -39,25 +17,31 @@ var getScrollOffsets = (dom) => {
       y: dom.scrollTop
     };
   }
-  const { document: document2 } = window;
-  if (document2.compatMode === "CSS1Compat") {
+
+  // For IE (or any browser) in Standards mode
+  const {
+    document
+  } = window;
+  if (document.compatMode === 'CSS1Compat') {
     return {
-      x: document2.documentElement.scrollLeft,
-      y: document2.documentElement.scrollTop
+      x: document.documentElement.scrollLeft,
+      y: document.documentElement.scrollTop
     };
   }
   return {
-    x: document2.body.scrollLeft,
-    y: document2.body.scrollTop
+    x: document.body.scrollLeft,
+    y: document.body.scrollTop
   };
 };
-var getClientHeight = (dom) => {
+exports.getScrollOffsets = getScrollOffsets;
+const getClientHeight = dom => {
   if (dom) {
     return dom.clientHeight;
   }
   return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
 };
-var getClientWidth = (dom) => {
+exports.getClientHeight = getClientHeight;
+const getClientWidth = dom => {
   if (dom) {
     return dom.clientWidth;
   }
@@ -66,27 +50,28 @@ var getClientWidth = (dom) => {
   }
   return document.body.clientWidth;
 };
-var cached;
-var getScrollBarSize = (fresh, dom = document.body) => {
+exports.getClientWidth = getClientWidth;
+let cached;
+const getScrollBarSize = (fresh, dom = document.body) => {
   if (window.innerWidth > dom.offsetWidth) {
-    if (fresh || cached === void 0) {
-      const inner = document.createElement("div");
-      inner.style.width = "100%";
-      inner.style.height = "200px";
-      const outer = document.createElement("div");
+    if (fresh || cached === undefined) {
+      const inner = document.createElement('div');
+      inner.style.width = '100%';
+      inner.style.height = '200px';
+      const outer = document.createElement('div');
       const outerStyle = outer.style;
-      outerStyle.position = "absolute";
-      outerStyle.top = "0";
-      outerStyle.left = "0";
-      outerStyle.pointerEvents = "none";
-      outerStyle.visibility = "hidden";
-      outerStyle.width = "200px";
-      outerStyle.height = "150px";
-      outerStyle.overflow = "hidden";
+      outerStyle.position = 'absolute';
+      outerStyle.top = '0';
+      outerStyle.left = '0';
+      outerStyle.pointerEvents = 'none';
+      outerStyle.visibility = 'hidden';
+      outerStyle.width = '200px';
+      outerStyle.height = '150px';
+      outerStyle.overflow = 'hidden';
       outer.appendChild(inner);
       dom.appendChild(outer);
       const widthContained = inner.offsetWidth;
-      outer.style.overflow = "scroll";
+      outer.style.overflow = 'scroll';
       let widthScroll = inner.offsetWidth;
       if (widthContained === widthScroll) {
         widthScroll = outer.clientWidth;
@@ -98,15 +83,9 @@ var getScrollBarSize = (fresh, dom = document.body) => {
   }
   return 0;
 };
-var isFixedElem = (element) => {
+exports.getScrollBarSize = getScrollBarSize;
+const isFixedElem = element => {
   const style = element && window.getComputedStyle(element);
-  return style && style.position === "fixed";
+  return style && style.position === 'fixed';
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  getClientHeight,
-  getClientWidth,
-  getScrollBarSize,
-  getScrollOffsets,
-  isFixedElem
-});
+exports.isFixedElem = isFixedElem;

package/lib/TagSelect/Group.js

@@ -1,84 +1,61 @@
-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);
-
-// src/TagSelect/Group.tsx
-var Group_exports = {};
-__export(Group_exports, {
-  default: () => Group_default
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(Group_exports);
-var import_classnames = __toESM(require("classnames"));
-var import_design = require("@oceanbase/design");
-var import_react = __toESM(require("react"));
-var import_TagSelectContext = __toESM(require("./TagSelectContext"));
-var import_Item = __toESM(require("./Item"));
-var import_style = __toESM(require("./style"));
-var import_jsx_runtime = require("react/jsx-runtime");
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _design = require("@oceanbase/design");
+var _react = _interopRequireWildcard(require("react"));
+var _TagSelectContext = _interopRequireDefault(require("./TagSelectContext"));
+var _Item = _interopRequireDefault(require("./Item"));
+var _style = _interopRequireDefault(require("./style"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function toArray(value) {
   let res = value;
-  if (value === void 0) {
+  if (value === undefined) {
     res = [];
   } else if (!Array.isArray(value)) {
     res = [value];
   }
   return res;
 }
-var Group = ({
+const Group = ({
   title,
   multiple,
   defaultValue,
-  size = "middle",
+  size = 'middle',
   options = [],
   children,
   className,
   ...restProps
 }) => {
-  const { getPrefixCls } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
-  const prefix = getPrefixCls("tag-select");
-  const { wrapSSR, hashId } = (0, import_style.default)(prefix);
-  const [value, setValue] = (0, import_react.useState)(
-    toArray(defaultValue || restProps.value)
-  );
-  const [registeredValues, setRegisteredValues] = import_react.default.useState([]);
-  const registerValue = (val) => {
-    setRegisteredValues((prev) => [...prev, val]);
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_design.ConfigProvider.ConfigContext);
+  const prefix = getPrefixCls('tag-select');
+  const {
+    wrapSSR,
+    hashId
+  } = (0, _style.default)(prefix);
+  const [value, setValue] = (0, _react.useState)(toArray(defaultValue || restProps.value));
+  const [registeredValues, setRegisteredValues] = _react.default.useState([]);
+  const registerValue = val => {
+    setRegisteredValues(prev => [...prev, val]);
   };
-  (0, import_react.useEffect)(() => {
-    if ("value" in restProps) {
+  (0, _react.useEffect)(() => {
+    if ('value' in restProps) {
       setValue(toArray(restProps.value));
     }
   }, [restProps.value]);
-  const handleValueChange = (v) => {
-    var _a;
-    const registeredValue = value.filter((v1) => registeredValues.includes(v1));
+  const handleValueChange = v => {
+    const registeredValue = value.filter(v1 => registeredValues.includes(v1));
     const newValue = [...registeredValue];
     const index = newValue.indexOf(v);
-    const checkedValue = index === -1 ? v : void 0;
+    const checkedValue = index === -1 ? v : undefined;
     if (multiple) {
       if (index === -1) {
         newValue.push(v);
@@ -86,10 +63,10 @@ var Group = ({
         newValue.splice(index, 1);
       }
     }
-    if (!("value" in restProps)) {
+    if (!('value' in restProps)) {
       setValue(multiple ? newValue : [checkedValue]);
     }
-    (_a = restProps.onChange) == null ? void 0 : _a.call(restProps, multiple ? newValue : checkedValue);
+    restProps.onChange?.(multiple ? newValue : checkedValue);
   };
   const contextValue = {
     multiple,
@@ -100,32 +77,39 @@ var Group = ({
     registerValue,
     handleValueChange
   };
-  const memoOptions = (0, import_react.useMemo)(() => {
-    return options.map((option) => {
-      if (typeof option === "string" || typeof option === "number") {
-        return { label: option, value: option };
+  const memoOptions = (0, _react.useMemo)(() => {
+    return options.map(option => {
+      if (typeof option === 'string' || typeof option === 'number') {
+        return {
+          label: option,
+          value: option
+        };
       }
       return option;
     });
   }, [options]);
-  const childrenNode = options.length ? memoOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_Item.default,
-    {
-      disabled: "disabled" in option ? option.disabled : restProps.disabled,
-      value: option.value,
-      onChange: option.onChange,
-      style: option.style,
-      checked: value == null ? void 0 : value.includes(option.value),
-      children: option.label
-    },
-    option.value.toString()
-  )) : children;
-  const groupCls = (0, import_classnames.default)(`${prefix}-container`, hashId, className);
-  return wrapSSR(
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TagSelectContext.default.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: groupCls, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefix}-title`, children: title }),
-      childrenNode
-    ] }) })
-  );
+  const childrenNode = options.length ? memoOptions.map(option => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.default, {
+    disabled: 'disabled' in option ? option.disabled : restProps.disabled,
+    value: option.value,
+    onChange: option.onChange,
+    style: option.style,
+    checked: value?.includes(option.value),
+    children: option.label
+  }, option.value.toString())) : children;
+  const groupCls = (0, _classnames.default)(`${prefix}-container`, hashId, className);
+  const titleId = (0, _react.useId)();
+  return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagSelectContext.default.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: groupCls,
+      role: "group",
+      "aria-labelledby": title ? titleId : undefined,
+      children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: `${prefix}-title`,
+        id: titleId,
+        children: title
+      }), childrenNode]
+    })
+  }));
 };
-var Group_default = Group;
+var _default = exports.default = Group;