@rainbow-oh/yee-c 0.4.3 → 0.4.4

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

@@ -95,3 +95,80 @@ export interface SelectProps extends DataAttributeProps {
      */
     onFilter?: (value: string, options: Array<Option>) => Array<Option>;
 }
+/**
+ * Props for the internal Option component (renders a single dropdown option).
+ */
+export interface OptionProps {
+    /**
+     * Display label
+     */
+    label: string;
+    /**
+     * Value
+     */
+    value: string | number;
+    /**
+     * Whether disabled
+     */
+    disabled?: boolean;
+    /**
+     * Native title attribute
+     */
+    title?: string;
+    /**
+     * Test id forwarded to the option element
+     */
+    dataTestId?: string;
+}
+/**
+ * Context value shared between Options and each Option.
+ */
+export interface OptionsContextValue {
+    prefixCls: string;
+    selectedKeys: Array<string | number>;
+    focusedKey: string | number;
+    multiple: boolean;
+    onSelect: (key: string | number, e?: React.MouseEvent | React.KeyboardEvent) => void;
+}
+/**
+ * Props for the internal Options (popup list) component.
+ */
+export interface OptionsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    /**
+     * Custom class name prefix
+     */
+    prefixCls: string;
+    /**
+     * Dropdown options
+     */
+    options: Array<Option>;
+    /**
+     * Popup container class name
+     */
+    popupClassName?: string;
+    /**
+     * Popup container inline style
+     */
+    popupStyle?: React.CSSProperties;
+    /**
+     * Selected option values
+     */
+    selectedKeys: Array<string | number>;
+    /**
+     * Currently focused option value
+     */
+    focusedKey: string | number;
+    /**
+     * Test id prefix used to generate each option's test id.
+     * Accepts any `data-*` attribute value (see DataAttributeProps).
+     */
+    dataTestId?: string | number | boolean;
+    /**
+     * Whether multiple selection mode is active
+     */
+    multiple: boolean;
+    /**
+     * Callback when an option is selected
+     */
+    onSelect: (key: string | number, e?: React.MouseEvent | React.KeyboardEvent) => void;
+}

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

@@ -1,3 +1,4 @@
 import React from 'react';
-declare const Option: (props: any) => React.JSX.Element;
+import type { OptionProps } from './interface';
+declare const Option: (props: OptionProps) => React.JSX.Element;
 export default Option;

package/dist/cjs/Select/option.js

@@ -33,22 +33,24 @@ __export(option_exports, {
 });
 module.exports = __toCommonJS(option_exports);
 var import_clsx = __toESM(require("clsx"));
+var import_lucide_react = require("lucide-react");
 var import_react = __toESM(require("react"));
 var import_options = require("./options");
 var Option = (props) => {
   const { label, value, disabled, title, dataTestId } = props;
-  const { prefixCls, selectedKeys, focusedKey, onSelect } = (0, import_react.useContext)(import_options.OptionsCtx);
+  const { prefixCls, selectedKeys, focusedKey, multiple, onSelect } = (0, import_react.useContext)(import_options.OptionsCtx);
   const handleClick = (e) => {
     if (!disabled) {
       onSelect(value, e);
     }
   };
   const htmlTitle = title ? title : typeof label === "string" ? label : void 0;
+  const selected = selectedKeys.includes(value);
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
       className: (0, import_clsx.default)(`${prefixCls}-option`, {
-        [`${prefixCls}-option-selected`]: selectedKeys.includes(value),
+        [`${prefixCls}-option-selected`]: selected,
         [`${prefixCls}-option-focused`]: focusedKey === value,
         [`${prefixCls}-option-disabled`]: disabled
       }),
@@ -64,7 +66,8 @@ var Option = (props) => {
       title: htmlTitle,
       "data-testid": dataTestId
     },
-    label
+    /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-option-content` }, label),
+    multiple && selected && /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-option-state` }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Check, { size: 16 }))
   );
 };
 var option_default = Option;

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

@@ -1,4 +1,5 @@
 import React from 'react';
-export declare const OptionsCtx: React.Context<any>;
-declare const Options: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<HTMLDivElement>>;
+import type { OptionsContextValue, OptionsProps } from './interface';
+export declare const OptionsCtx: React.Context<OptionsContextValue>;
+declare const Options: React.ForwardRefExoticComponent<OptionsProps & React.RefAttributes<HTMLDivElement>>;
 export default Options;

package/dist/cjs/Select/options.js

@@ -66,51 +66,57 @@ var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
 var import_locale = require("../locale");
 var import_option = __toESM(require("./option"));
-var OptionsCtx = (0, import_react.createContext)({});
-var Options = (0, import_react.forwardRef)((props, ref) => {
-  const { locale } = (0, import_locale.useLocale)();
-  const { select } = locale;
-  const _a = props, {
-    prefixCls,
-    options,
-    popupClassName,
-    popupStyle,
-    selectedKeys,
-    focusedKey,
-    dataTestId,
-    onSelect
-  } = _a, rest = __objRest(_a, [
-    "prefixCls",
-    "options",
-    "popupClassName",
-    "popupStyle",
-    "selectedKeys",
-    "focusedKey",
-    "dataTestId",
-    "onSelect"
-  ]);
-  const componentRef = ref || (0, import_react.useRef)(null);
-  return /* @__PURE__ */ import_react.default.createElement(
-    "div",
-    __spreadProps(__spreadValues({}, rest), {
-      className: (0, import_clsx.default)(`${prefixCls}-popup`, popupClassName),
-      style: popupStyle,
-      ref: componentRef,
-      tabIndex: -1
-    }),
-    options.length === 0 ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-empty` }, select.noData) : /* @__PURE__ */ import_react.default.createElement(
-      OptionsCtx.Provider,
-      {
-        value: { prefixCls, selectedKeys, focusedKey, onSelect }
-      },
-      options.map((option, index) => /* @__PURE__ */ import_react.default.createElement(
-        import_option.default,
-        __spreadProps(__spreadValues({}, option), {
-          key: option.value,
-          dataTestId: `${dataTestId}-${index}`
-        })
-      ))
-    )
-  );
-});
+var OptionsCtx = (0, import_react.createContext)(
+  {}
+);
+var Options = (0, import_react.forwardRef)(
+  (props, ref) => {
+    const { locale } = (0, import_locale.useLocale)();
+    const { select } = locale;
+    const _a = props, {
+      prefixCls,
+      options,
+      popupClassName,
+      popupStyle,
+      selectedKeys,
+      focusedKey,
+      dataTestId,
+      multiple,
+      onSelect
+    } = _a, rest = __objRest(_a, [
+      "prefixCls",
+      "options",
+      "popupClassName",
+      "popupStyle",
+      "selectedKeys",
+      "focusedKey",
+      "dataTestId",
+      "multiple",
+      "onSelect"
+    ]);
+    const componentRef = ref || (0, import_react.useRef)(null);
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      __spreadProps(__spreadValues({}, rest), {
+        className: (0, import_clsx.default)(`${prefixCls}-popup`, popupClassName),
+        style: popupStyle,
+        ref: componentRef,
+        tabIndex: -1
+      }),
+      options.length === 0 ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-empty` }, select.noData) : /* @__PURE__ */ import_react.default.createElement(
+        OptionsCtx.Provider,
+        {
+          value: { prefixCls, selectedKeys, focusedKey, multiple, onSelect }
+        },
+        options.map((option, index) => /* @__PURE__ */ import_react.default.createElement(
+          import_option.default,
+          __spreadProps(__spreadValues({}, option), {
+            key: option.value,
+            dataTestId: `${dataTestId}-${index}`
+          })
+        ))
+      )
+    );
+  }
+);
 var options_default = Options;

package/dist/cjs/Select/select.js

@@ -190,12 +190,12 @@ var Select = (baseprops) => {
     import_options.default,
     {
       prefixCls,
+      multiple: mode === "multiple" || mode === "tags",
       options: filteredOpts,
       focusedKey,
       selectedKeys: mergedValue,
       dataTestId: rest["data-testid"],
       onSelect: handleSelect,
-      onClose: () => setOpen(false),
       ref: popupRef
     }
   );

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

@@ -9,12 +9,20 @@
   }
 
   &-option {
+    display: flex;
     padding: var(--yee-select-option-padding);
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     cursor: pointer;
 
+    &-content {
+      flex: 1;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
     &:not(&-disabled):hover {
       background-color: var(--yee-select-option-hover-bg-color);
     }

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

@@ -38,6 +38,10 @@ export interface PureSelectorProps {
      * In multiple or tags mode, the maximum number of selectable items
      */
     maxCount?: number;
+    /**
+     * size
+     * */
+    size?: 'small' | 'default' | 'large';
     /**
      * Selection mode
      */

package/dist/cjs/Selector/selector.js

@@ -105,6 +105,7 @@ var Selector = import_react.default.forwardRef(
       value,
       open,
       loading,
+      size = "default",
       onSearch,
       onRemove,
       onClear,
@@ -127,6 +128,7 @@ var Selector = import_react.default.forwardRef(
       "value",
       "open",
       "loading",
+      "size",
       "onSearch",
       "onRemove",
       "onClear",
@@ -165,6 +167,7 @@ var Selector = import_react.default.forwardRef(
     };
     const cls = (0, import_clsx.default)(
       prefixCls,
+      [`${prefixCls}-${size}`],
       [`${prefixCls}-searchable`],
       [`${prefixCls}-${mode || "single"}`],
       {

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

@@ -9,6 +9,14 @@
     var(--yee-selector-border-color);
   border-radius: var(--yee-selector-border-radius);
 
+  &-small {
+    padding: var(--yee-selector-small-padding);
+  }
+
+  &-large {
+    padding: var(--yee-selector-large-padding);
+  }
+
   &:focus-visible {
     outline: none;
   }
@@ -31,6 +39,13 @@
       line-height: var(--yee-selector-input-line-height);
     }
 
+    @{pls}-selection-item {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding-right: 16px;
+    }
+
     &:focus-within,
     &:focus {
       @{pls}-input-wrapper {
@@ -39,6 +54,10 @@
 
         &.with-input-value {
           opacity: 1;
+
+          & + @{pls}-selection-item {
+            opacity: 0;
+          }
         }
       }
 
@@ -188,122 +207,122 @@
   }
 }
 
-.yee-tags-searchable {
-  cursor: text;
-
-  .yee-tags-input-wrapper {
-    width: 100%;
-    padding: 0;
-    border: none;
-    outline: none;
-
-    &:focus {
-      border: none;
-      box-shadow: none;
-    }
-  }
-
-  .yee-tags-icon {
-    width: auto;
-  }
-}
-
-.yee-tags-single-mode {
-  height: var(--yee-tags-height);
-
-  .yee-tags-input-container {
-    position: absolute;
-    z-index: -1;
-    width: 100%;
-    font-size: var(--yee-tags-input-font-size);
-    line-height: var(--yee-tags-input-line-height);
-
-    input {
-      width: 100%;
-    }
-  }
-
-  &.yee-tags-searchable {
-    .yee-tags-single-option {
-      width: 100%;
-    }
-
-    .yee-tags-container {
-      &:focus-within,
-      &:focus {
-        .yee-tags-input-container {
-          z-index: 1;
-          opacity: var(--yee-tags-input-focus-opacity);
-
-          &.has-value {
-            opacity: 1;
-
-            + .yee-tags-single-option {
-              display: none;
-            }
-          }
-        }
-
-        .yee-tags-single-option {
-          opacity: var(--yee-tags-single-option-focus-opacity);
-        }
-      }
-    }
-  }
-}
-
-.yee-tags-multi-mode {
-  height: auto;
-  min-height: var(--yee-tags-multi-min-height);
-
-  &.yee-tags-searchable {
-    .yee-tag {
-      max-width: var(--yee-tags-multi-tag-max-width);
-      height: var(--yee-tags-multi-tag-height);
-    }
-  }
-
-  .yee-tags-container {
-    flex-wrap: wrap;
-  }
-
-  .yee-tags-input-container {
-    display: inline-grid;
-    // color: var(--yee-tags-input-container-font-color);
-    flex: 1 1 auto;
-    grid-area: 1 / 1 / 2 / 3;
-    grid-template-columns: 0 min-content;
-    box-sizing: border-box;
-    height: var(--yee-tags-multi-input-height);
-
-    &::after {
-      grid-area: 1 / 2 / auto / auto;
-      min-width: var(--yee-tags-multi-input-after-min-width);
-      margin: 0;
-      padding: 0;
-      font: inherit;
-      white-space: pre;
-      border: 0;
-      outline: 0;
-      visibility: hidden;
-      content: attr(data-value) ' ';
-    }
-
-    & > input {
-      grid-area: 1 / 2 / auto / auto;
-      width: 100%;
-      min-width: var(--yee-tags-multi-input-min-width);
-      height: var(--yee-tags-multi-input-height);
-      margin: 0;
-      padding: 0;
-      font: inherit;
-      background-color: transparent;
-      border: 0;
-      outline: 0;
-      opacity: 1;
-    }
-  }
-}
+// .yee-tags-searchable {
+//   cursor: text;
+
+//   .yee-tags-input-wrapper {
+//     width: 100%;
+//     padding: 0;
+//     border: none;
+//     outline: none;
+
+//     &:focus {
+//       border: none;
+//       box-shadow: none;
+//     }
+//   }
+
+//   .yee-tags-icon {
+//     width: auto;
+//   }
+// }
+
+// .yee-tags-single-mode {
+//   height: var(--yee-tags-height);
+
+//   .yee-tags-input-container {
+//     position: absolute;
+//     z-index: -1;
+//     width: 100%;
+//     font-size: var(--yee-tags-input-font-size);
+//     line-height: var(--yee-tags-input-line-height);
+
+//     input {
+//       width: 100%;
+//     }
+//   }
+
+//   &.yee-tags-searchable {
+//     .yee-tags-single-option {
+//       width: 100%;
+//     }
+
+//     .yee-tags-container {
+//       &:focus-within,
+//       &:focus {
+//         .yee-tags-input-container {
+//           z-index: 1;
+//           opacity: var(--yee-tags-input-focus-opacity);
+
+//           &.has-value {
+//             opacity: 1;
+
+//             + .yee-tags-single-option {
+//               display: none;
+//             }
+//           }
+//         }
+
+//         .yee-tags-single-option {
+//           opacity: var(--yee-tags-single-option-focus-opacity);
+//         }
+//       }
+//     }
+//   }
+// }
+
+// .yee-tags-multi-mode {
+//   height: auto;
+//   min-height: var(--yee-tags-multi-min-height);
+
+//   &.yee-tags-searchable {
+//     .yee-tag {
+//       max-width: var(--yee-tags-multi-tag-max-width);
+//       height: var(--yee-tags-multi-tag-height);
+//     }
+//   }
+
+//   .yee-tags-container {
+//     flex-wrap: wrap;
+//   }
+
+//   .yee-tags-input-container {
+//     display: inline-grid;
+//     // color: var(--yee-tags-input-container-font-color);
+//     flex: 1 1 auto;
+//     grid-area: 1 / 1 / 2 / 3;
+//     grid-template-columns: 0 min-content;
+//     box-sizing: border-box;
+//     height: var(--yee-tags-multi-input-height);
+
+//     &::after {
+//       grid-area: 1 / 2 / auto / auto;
+//       min-width: var(--yee-tags-multi-input-after-min-width);
+//       margin: 0;
+//       padding: 0;
+//       font: inherit;
+//       white-space: pre;
+//       border: 0;
+//       outline: 0;
+//       visibility: hidden;
+//       content: attr(data-value) ' ';
+//     }
+
+//     & > input {
+//       grid-area: 1 / 2 / auto / auto;
+//       width: 100%;
+//       min-width: var(--yee-tags-multi-input-min-width);
+//       height: var(--yee-tags-multi-input-height);
+//       margin: 0;
+//       padding: 0;
+//       font: inherit;
+//       background-color: transparent;
+//       border: 0;
+//       outline: 0;
+//       opacity: 1;
+//     }
+//   }
+// }
 
 // form error status
 .yee-form-item-error {

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

@@ -46,7 +46,7 @@ function useFilter({
   const [filterRecords, setFilterRecords] = (0, import_react.useState)([]);
   const onFilter = ({ value, dataIndex }) => {
     let newFilterMap = [...filterRecords];
-    if (!value) {
+    if (!value || Array.isArray(value) && !value.length) {
       newFilterMap = newFilterMap.filter(
         (item) => item.dataIndex !== dataIndex
       );

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

@@ -448,6 +448,10 @@ export interface TableProps extends FooterProps, Omit<HeaderProps, 'pageData'>,
      * Row class name, unlike classNames, this prop can be set dynamically via a function
      */
     rowClassName?: (record: object) => string;
+    /**
+     * Row style, unlike styles, this prop can be set dynamically via a function
+     */
+    rowStyle?: (record: object) => React.CSSProperties;
     /**
      * Pagination config
      */

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

@@ -47,6 +47,8 @@
   }
 
   &-filter {
+    padding: var(--yee-table-filter-popup-padding);
+
     &-trigger {
       display: inline-flex;
       cursor: pointer;

package/dist/cjs/Table/theader/filter.js

@@ -159,7 +159,7 @@ var HeaderFilter = import_react.default.memo((props) => {
       import_Button.default,
       {
         icon: items ? /* @__PURE__ */ import_react.default.createElement(import_lucide_react.ListFilter, { size: 14, strokeWidth: 1.5 }) : /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Search, { size: 14, strokeWidth: 1.5 }),
-        color: "info",
+        variant: selectNodes.length ? "filled" : void 0,
         type: "text",
         size: "small"
       }
@@ -171,6 +171,7 @@ var HeaderFilter = import_react.default.memo((props) => {
     {
       trigger: "click",
       placement: "bottomRight",
+      className: (0, import_clsx.default)(`${prefixCls}-filter`),
       content: popup,
       arrow: true,
       open,

package/dist/cjs/Tabs/demo/basic.js

@@ -122,5 +122,12 @@ var basic_default = () => {
       children: "Content of Tab Pane 17"
     }
   ];
-  return /* @__PURE__ */ import_react.default.createElement(import_yee_c.Tabs, { defaultActiveKey: "1", items });
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_yee_c.Tabs,
+    {
+      defaultActiveKey: "1",
+      items,
+      onChange: (key) => console.log(key)
+    }
+  );
 };

package/dist/cjs/Tabs/tabs.js

@@ -147,7 +147,9 @@ var Tabs = (baseprops) => {
       return;
     }
     setMergedActiveKey(key);
-    onChange == null ? void 0 : onChange(key);
+    if (key !== mergedActiveKey) {
+      onChange == null ? void 0 : onChange(key);
+    }
   };
   const contextValue = (0, import_react.useMemo)(
     () => ({