@rainbow-oh/yee-c 0.8.14 → 0.8.16

package/dist/cjs/Progress/circle.js

@@ -148,7 +148,7 @@ var Circle = import_react.default.forwardRef((props, ref) => {
       style: { width, height: width },
       ref
     },
-    /* @__PURE__ */ import_react.default.createElement("svg", { className: `${prefixCls}-circle`, viewBox: "0 0 120 120" }, /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement("svg", { className: `${prefixCls}-circle`, viewBox: "0 0 120 120", "aria-hidden": "true" }, /* @__PURE__ */ import_react.default.createElement(
       "circle",
       {
         className: `${prefixCls}-circle-trail`,

package/dist/cjs/Progress/line.js

@@ -72,7 +72,7 @@ var Line = import_react.default.forwardRef((props, ref) => {
       };
     }
   }
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-outer`, ref }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-inner`, style: { height: strokeWidth } }, /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-outer`, ref }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-inner`, style: { height: strokeWidth }, "aria-hidden": "true" }, /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
       className: `${prefixCls}-bg`,

package/dist/cjs/Progress/progress.js

@@ -158,6 +158,8 @@ var Progress = import_react.default.forwardRef(
         "aria-valuenow": percent,
         "aria-valuemin": 0,
         "aria-valuemax": 100,
+        "aria-valuetext": `${percent}%`,
+        "aria-label": status === "error" ? `Progress: ${percent}%, error` : `Progress: ${percent}%`,
         ref
       }, dataAttrs),
       progress

package/dist/cjs/Progress/steps.js

@@ -75,7 +75,7 @@ var Steps = import_react.default.forwardRef((props, ref) => {
       );
     });
   };
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-steps`, ref }, renderSteps(), showInfo && /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-text` }, children));
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-steps`, ref }, /* @__PURE__ */ import_react.default.createElement("div", { "aria-hidden": "true", style: { display: "contents" } }, renderSteps()), showInfo && /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-text` }, children));
 });
 Steps.displayName = "Steps";
 var steps_default = Steps;

package/dist/cjs/Search/search.js

@@ -128,6 +128,7 @@ var Search = import_react.default.forwardRef(
     });
     const [open, setOpen] = (0, import_react.useState)(false);
     const popupRef = (0, import_react.useRef)(void 0);
+    const listboxId = (0, import_react.useId)();
     const { focusedKey, onKeyDown } = (0, import_useSelectKeyboard.default)({
       open,
       options: options || suggestions,
@@ -187,9 +188,18 @@ var Search = import_react.default.forwardRef(
         {
           className: (0, import_clsx.default)(`${prefixCls}-clear-icon`, classNames == null ? void 0 : classNames.clear),
           style: styles == null ? void 0 : styles.clear,
-          onClick: handleClear
+          onClick: handleClear,
+          role: "button",
+          "aria-label": "Clear search",
+          tabIndex: 0,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handleClear(e);
+            }
+          }
         },
-        /* @__PURE__ */ import_react.default.createElement(import_lucide_react.X, { size: 14 })
+        /* @__PURE__ */ import_react.default.createElement(import_lucide_react.X, { size: 14, "aria-hidden": "true" })
       ), suffix);
     };
     const renderPrefix = () => {
@@ -220,7 +230,8 @@ var Search = import_react.default.forwardRef(
         className
       );
     };
-    const popup = /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-popup`, tabIndex: 0 }, Array.isArray(options) ? /* @__PURE__ */ import_react.default.createElement(
+    const hasPopup = Array.isArray(options) || Array.isArray(suggestions);
+    const popup = /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-popup`, tabIndex: 0, id: listboxId, role: "listbox" }, Array.isArray(options) ? /* @__PURE__ */ import_react.default.createElement(
       import_List.default,
       {
         focusedKey,
@@ -237,19 +248,37 @@ var Search = import_react.default.forwardRef(
         onClick: onChange
       }
     ) : null);
-    return /* @__PURE__ */ import_react.default.createElement(import_Trigger.default, { popup, open, onOpenChange: setOpen }, /* @__PURE__ */ import_react.default.createElement("div", { className: getRootClassName(), style }, renderPrefix(), /* @__PURE__ */ import_react.default.createElement(
-      "input",
-      __spreadProps(__spreadValues({}, rest), {
-        ref,
-        value: searchValue,
-        className: getInputClassName(),
-        style: styles == null ? void 0 : styles.input,
-        disabled,
-        placeholder,
-        onChange: handleChange,
-        onKeyDown
-      })
-    ), loading ? /* @__PURE__ */ import_react.default.createElement(import_Spin.default, { variant: "ring", size: "small" }) : renderSuffix()));
+    return /* @__PURE__ */ import_react.default.createElement(import_Trigger.default, { popup, open, onOpenChange: setOpen }, /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: getRootClassName(),
+        style,
+        role: "combobox",
+        "aria-expanded": hasPopup ? open : void 0,
+        "aria-haspopup": hasPopup ? "listbox" : void 0,
+        "aria-owns": hasPopup && open ? listboxId : void 0,
+        "aria-disabled": disabled || void 0
+      },
+      renderPrefix(),
+      /* @__PURE__ */ import_react.default.createElement(
+        "input",
+        __spreadProps(__spreadValues({}, rest), {
+          ref,
+          value: searchValue,
+          className: getInputClassName(),
+          style: styles == null ? void 0 : styles.input,
+          disabled,
+          placeholder,
+          onChange: handleChange,
+          onKeyDown,
+          role: "searchbox",
+          "aria-autocomplete": hasPopup ? "list" : void 0,
+          "aria-controls": hasPopup && open ? listboxId : void 0,
+          "aria-activedescendant": hasPopup && open && focusedKey !== null ? String(focusedKey) : void 0
+        })
+      ),
+      loading ? /* @__PURE__ */ import_react.default.createElement(import_Spin.default, { variant: "ring", size: "small", "aria-label": "Loading" }) : renderSuffix()
+    ));
   }
 );
 var search_default = Search;

package/dist/cjs/Select/interface.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { TriggerProps } from '../Trigger';
 import type { SelectorProps } from '../Selector';
 import type { DataAttributeProps } from '../utils/types';
 export type Option = {
@@ -23,7 +24,7 @@ export type Option = {
      */
     [prop: string]: any;
 };
-export interface SelectProps extends DataAttributeProps, Pick<SelectorProps, 'size'> {
+export interface SelectProps extends DataAttributeProps, Pick<SelectorProps, 'size'>, Omit<TriggerProps, 'popup' | 'children'> {
     /**
      * Custom class name prefix
      * */

package/dist/cjs/Spin/demo/types.js

@@ -35,5 +35,5 @@ module.exports = __toCommonJS(types_exports);
 var import_yee_c = require("../..");
 var import_react = __toESM(require("react"));
 var types_default = () => {
-  return /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { direction: "vertical" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, null, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Spin, { variant: "dot", color: "error" }), /* @__PURE__ */ import_react.default.createElement("span", null, "dot")), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, null, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Spin, { variant: "ring", color: "error" }), /* @__PURE__ */ import_react.default.createElement("span", null, "ring")), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, null, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Spin, { variant: "spokes", color: "error" }), /* @__PURE__ */ import_react.default.createElement("span", null, "spokes")));
+  return /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { direction: "vertical" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, null, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Spin, { variant: "dot" }), /* @__PURE__ */ import_react.default.createElement("span", null, "dot")), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, null, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Spin, { variant: "ring" }), /* @__PURE__ */ import_react.default.createElement("span", null, "ring")), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, null, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Spin, { variant: "spokes" }), /* @__PURE__ */ import_react.default.createElement("span", null, "spokes")), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, null, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Spin, { variant: "bounce" }), /* @__PURE__ */ import_react.default.createElement("span", null, "bounce")), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, null, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Spin, { variant: "pulse" }), /* @__PURE__ */ import_react.default.createElement("span", null, "pulse")), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, null, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Spin, { variant: "wheel" }), /* @__PURE__ */ import_react.default.createElement("span", null, "wheel")));
 };

package/dist/cjs/Spin/indicator.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SpinProps } from './interface';
 interface IndicatorProps extends SpinProps {
-    variant?: 'dot' | 'ring' | 'spokes';
+    variant?: 'dot' | 'ring' | 'spokes' | 'bounce' | 'pulse' | 'wheel';
 }
 declare const Indicator: React.FC<IndicatorProps>;
 export default Indicator;

package/dist/cjs/Spin/indicator.js

@@ -227,6 +227,141 @@ var DotSpinner = (props) => {
       `)
   );
 };
+var BounceSpinner = (props) => {
+  const {
+    prefixCls = "yee-spin",
+    size = "default",
+    classNames,
+    styles,
+    width,
+    height,
+    color
+  } = props;
+  const containerSize = sizeMap[size];
+  const dotSizeMap = { small: 4, default: 6, large: 10 };
+  const dotSize = dotSizeMap[size];
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_clsx.default)(
+        `${prefixCls}-indicator`,
+        `${prefixCls}-indicator-bounce`,
+        classNames == null ? void 0 : classNames.indicator
+      ),
+      style: __spreadValues({
+        width: width || containerSize,
+        height: height || containerSize
+      }, styles == null ? void 0 : styles.indicator)
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-bounce` }, [0, 1, 2].map((i) => /* @__PURE__ */ import_react.default.createElement(
+      "span",
+      {
+        key: i,
+        className: `${prefixCls}-bounce-dot`,
+        style: {
+          width: dotSize,
+          height: dotSize,
+          animationDelay: `${i * 0.15}s`,
+          backgroundColor: color
+        }
+      }
+    )))
+  );
+};
+var PulseSpinner = (props) => {
+  const {
+    prefixCls = "yee-spin",
+    size = "default",
+    classNames,
+    styles,
+    width,
+    height,
+    color
+  } = props;
+  const containerSize = sizeMap[size];
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_clsx.default)(
+        `${prefixCls}-indicator`,
+        `${prefixCls}-indicator-pulse`,
+        classNames == null ? void 0 : classNames.indicator
+      ),
+      style: __spreadValues({
+        width: width || containerSize,
+        height: height || containerSize
+      }, styles == null ? void 0 : styles.indicator)
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "span",
+      {
+        className: `${prefixCls}-pulse-circle`,
+        style: { backgroundColor: color }
+      }
+    ),
+    /* @__PURE__ */ import_react.default.createElement(
+      "span",
+      {
+        className: `${prefixCls}-pulse-circle ${prefixCls}-pulse-circle-delay`,
+        style: { backgroundColor: color }
+      }
+    )
+  );
+};
+var WheelSpinner = (props) => {
+  const {
+    prefixCls = "yee-spin",
+    size = "default",
+    classNames,
+    styles,
+    width,
+    height,
+    color
+  } = props;
+  const containerSize = sizeMap[size];
+  const count = 10;
+  const innerRadius = 0.38;
+  const spokeLength = containerSize * 0.22;
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_clsx.default)(
+        `${prefixCls}-indicator`,
+        `${prefixCls}-indicator-wheel`,
+        classNames == null ? void 0 : classNames.indicator
+      ),
+      style: __spreadValues({
+        width: width || containerSize,
+        height: height || containerSize
+      }, styles == null ? void 0 : styles.indicator)
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-wheel-spokes` }, Array.from({ length: count }, (_, i) => {
+      const angle = i * 360 / count;
+      const rad = angle * Math.PI / 180;
+      const cx = containerSize / 2;
+      const cy = containerSize / 2;
+      const x = cx + innerRadius * containerSize * Math.sin(rad);
+      const y = cy - innerRadius * containerSize * Math.cos(rad);
+      return /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          key: i,
+          className: `${prefixCls}-wheel-spoke`,
+          style: {
+            top: y,
+            left: x,
+            height: spokeLength,
+            marginLeft: -1,
+            transform: `rotate(${angle}deg)`,
+            transformOrigin: "top center",
+            animationDelay: `${i * 1.2 / count}s`,
+            backgroundColor: color
+          }
+        }
+      );
+    }))
+  );
+};
 var Indicator = (_a) => {
   var _b = _a, { variant = "dot" } = _b, props = __objRest(_b, ["variant"]);
   if (variant === "ring") {
@@ -235,6 +370,15 @@ var Indicator = (_a) => {
   if (variant === "spokes") {
     return /* @__PURE__ */ import_react.default.createElement(SpokesSpinner, __spreadValues({}, props));
   }
+  if (variant === "bounce") {
+    return /* @__PURE__ */ import_react.default.createElement(BounceSpinner, __spreadValues({}, props));
+  }
+  if (variant === "pulse") {
+    return /* @__PURE__ */ import_react.default.createElement(PulseSpinner, __spreadValues({}, props));
+  }
+  if (variant === "wheel") {
+    return /* @__PURE__ */ import_react.default.createElement(WheelSpinner, __spreadValues({}, props));
+  }
   return /* @__PURE__ */ import_react.default.createElement(DotSpinner, __spreadValues({}, props));
 };
 var indicator_default = Indicator;

package/dist/cjs/Spin/interface.d.ts

@@ -66,7 +66,7 @@ export type SpinProps = DataAttributeProps & {
     /**
      * Indicator variant
      * */
-    variant?: 'dot' | 'ring' | 'spokes';
+    variant?: 'dot' | 'ring' | 'spokes' | 'bounce' | 'pulse' | 'wheel';
     /**
      * Loading indicator
      */

package/dist/cjs/Spin/style/index.less

@@ -69,6 +69,64 @@
         animation: yee-spin-spokes-fade 1.2s linear infinite;
       }
     }
+
+    &-bounce {
+      @{pls}-bounce {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        gap: 3px;
+      }
+
+      @{pls}-bounce-dot {
+        display: inline-block;
+        background-color: var(--m-indicator-dot-bg-color);
+        border-radius: 50%;
+        animation: yee-spin-bounce 0.6s ease-in-out infinite alternate;
+      }
+    }
+
+    &-pulse {
+      @{pls}-pulse-circle {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        background-color: var(--m-indicator-dot-bg-color);
+        opacity: 0.6;
+        animation: yee-spin-pulse 1.5s ease-in-out infinite;
+
+        &-delay {
+          animation-delay: 0.5s;
+        }
+      }
+    }
+
+    &-wheel {
+      @{pls}-wheel-hub {
+        display: none;
+      }
+
+      @{pls}-wheel-spokes {
+        position: relative;
+        width: 100%;
+        height: 100%;
+      }
+
+      @{pls}-wheel-spoke {
+        position: absolute;
+        left: 50%;
+        width: 2px;
+        margin-left: -1px;
+        background-color: var(--m-indicator-dot-bg-color);
+        border-radius: 1px;
+        animation: yee-spin-spokes-fade 1.2s linear infinite;
+      }
+    }
   }
 
   &-tip {
@@ -168,3 +226,31 @@
     opacity: 0.15;
   }
 }
+
+@keyframes yee-spin-bounce {
+  0% {
+    transform: translateY(25%);
+    opacity: 0.4;
+  }
+
+  100% {
+    transform: translateY(-25%);
+    opacity: 1;
+  }
+}
+
+@keyframes yee-spin-pulse {
+  0% {
+    transform: scale(0);
+    opacity: 0.6;
+  }
+
+  50% {
+    opacity: 0.3;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}

package/dist/cjs/Table/demo/fixed.d.ts

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

package/dist/cjs/Table/demo/fixed.js

@@ -0,0 +1,123 @@
+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/Table/demo/fixed.tsx
+var fixed_exports = {};
+__export(fixed_exports, {
+  default: () => fixed_default
+});
+module.exports = __toCommonJS(fixed_exports);
+var import_yee_c = require("../..");
+var import_react = __toESM(require("react"));
+var columns = [
+  {
+    title: "Name",
+    dataIndex: "name",
+    key: "name",
+    fixed: "left",
+    width: 140
+  },
+  {
+    title: "Age",
+    dataIndex: "age",
+    key: "age",
+    fixed: "left",
+    width: 100
+  },
+  {
+    title: "Address",
+    dataIndex: "address",
+    key: "address",
+    width: 240
+  },
+  {
+    title: "Company",
+    dataIndex: "company",
+    key: "company",
+    width: 180
+  },
+  {
+    title: "Department",
+    dataIndex: "department",
+    key: "department",
+    width: 180
+  },
+  {
+    title: "Email",
+    dataIndex: "email",
+    key: "email",
+    width: 240
+  },
+  {
+    title: "Action",
+    key: "action",
+    fixed: "right",
+    width: 100,
+    render: (record) => /* @__PURE__ */ import_react.default.createElement("a", { onClick: () => console.log(record) }, "View")
+  }
+];
+var dataSource = [
+  {
+    key: "1",
+    name: "John Brown",
+    age: 32,
+    address: "New York No. 1 Lake Park",
+    company: "Acme Inc.",
+    department: "Engineering",
+    email: "john.brown@example.com"
+  },
+  {
+    key: "2",
+    name: "Jim Green",
+    age: 42,
+    address: "London No. 1 Lake Park",
+    company: "Globex",
+    department: "Marketing",
+    email: "jim.green@example.com"
+  },
+  {
+    key: "3",
+    name: "Joe Black",
+    age: 28,
+    address: "Sidney No. 1 Lake Park",
+    company: "Initech",
+    department: "Product",
+    email: "joe.black@example.com"
+  }
+];
+var fixed_default = () => /* @__PURE__ */ import_react.default.createElement(
+  import_yee_c.Table,
+  {
+    columns,
+    dataSource,
+    rowKey: "key",
+    pagination: false,
+    scroll: { x: 1180 },
+    tableLayout: "fixed"
+  }
+);

package/dist/cjs/Table/hooks/useColumns.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 import type { ColumnProps, ExpandableType, RowSelectionType, WrapedColumnProps } from '../interface';
-export default function useColumns({ children, columns, rowSelection, expandable, }: {
+export default function useColumns({ children, columns, rowSelection, expandable, measuredColumnWidths, }: {
     children?: React.ReactElement<ColumnProps> | React.ReactElement<ColumnProps>[];
     columns: ColumnProps[];
     rowSelection?: RowSelectionType;
     expandable?: ExpandableType;
+    measuredColumnWidths?: number[];
 }): {
     wrapedColumns: WrapedColumnProps[];
     headerRows: import("../interface").HeaderCell[][];

package/dist/cjs/Table/hooks/useColumns.js

@@ -63,7 +63,8 @@ function useColumns({
   children,
   columns,
   rowSelection,
-  expandable
+  expandable,
+  measuredColumnWidths
 }) {
   const childColumns = (0, import_react.useMemo)(() => {
     return children ? getColumnsFromChild(children) : null;
@@ -72,10 +73,10 @@ function useColumns({
     const base = (0, import_deepClone.default)(childColumns || columns || []) || [];
     const tree = (0, import_header.injectSelectionExpand)(base, rowSelection, expandable);
     const leaves = (0, import_header.flattenLeafColumns)(tree);
-    const wraped = (0, import_util.handleColumns)(leaves);
+    const wraped = (0, import_util.handleColumns)(leaves, measuredColumnWidths);
     const rows = (0, import_header.parseHeaderRows)(tree, wraped);
     return { wrapedColumns: wraped, headerRows: rows };
-  }, [childColumns, columns, rowSelection, expandable]);
+  }, [childColumns, columns, rowSelection, expandable, measuredColumnWidths]);
   return {
     wrapedColumns,
     headerRows

package/dist/cjs/Table/style/index.less

@@ -85,15 +85,34 @@
     overflow: auto;
 
     &-wrapper {
-      overflow: auto;
       width: 100%;
 
       &-scroll-left @{pls}-cell-fixed-left-last {
-        box-shadow: 6px 0 6px -4px var(--yee-table-fixed-left-after-bs-color);
+        &::after {
+          content: '';
+          pointer-events: none;
+          position: absolute;
+          display: block;
+          height: 100%;
+          width: 15px;
+          right: -15px;
+          top: 0;
+          box-shadow: inset 4px 0 8px -4px var(--yee-table-fixed-left-after-bs-color);
+        }
       }
 
       &-scroll-right @{pls}-cell-fixed-right-first {
-        box-shadow: -6px 0 6px -4px var(--yee-table-fixed-right-after-bs-color);
+        &::after {
+          content: '';
+          pointer-events: none;
+          position: absolute;
+          display: block;
+          height: 100%;
+          width: 15px;
+          left: -15px;
+          top: 0;
+          box-shadow: inset -4px 0 8px -4px var(--yee-table-fixed-right-after-bs-color);
+        }
       }
     }
 
@@ -156,6 +175,7 @@
     &-fixed-left,
     &-fixed-right {
       position: sticky;
+      z-index: 1;
       background-color: var(--yee-table-fixed-column-bg-color);
     }
   }