@rainbow-oh/yee-c 0.4.3 → 0.4.4

package/src/Input/style/index.less

@@ -69,6 +69,25 @@
     }
   }
 
+  // size
+  &-small {
+    height: var(--yee-input-small-height, 24px);
+    padding: var(--yee-input-small-padding, 0 6px);
+    font-size: var(--yee-input-small-font-size);
+    line-height: var(--yee-input-small-line-height);
+
+    &::placeholder {
+      font-size: var(--yee-input-small-font-size);
+    }
+  }
+
+  &-large {
+    height: var(--yee-input-large-height, 40px);
+    padding: var(--yee-input-large-padding, 4px 12px);
+    font-size: var(--yee-input-large-font-size);
+    line-height: var(--yee-input-large-line-height);
+  }
+
   &-password {
     flex: 1;
     outline: none;

package/src/Popover/style/index.less

@@ -6,6 +6,7 @@
   color: var(--yee-color-text);
   background-color: var(--yee-popover-bg-color);
   border-radius: var(--yee-popover-border-radius);
+  overflow: hidden;
 
   &-header {
     margin-bottom: var(--yee-popover-header-margin-bottom);

package/src/Select/interface.ts

@@ -105,3 +105,90 @@ 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/src/Select/option.tsx

@@ -1,11 +1,13 @@
 import clsx from 'clsx';
+import { Check } from 'lucide-react';
 import React, { useContext } from 'react';
 
+import type { OptionProps } from './interface';
 import { OptionsCtx } from './options';
 
-const Option = (props: any) => {
+const Option = (props: OptionProps) => {
   const { label, value, disabled, title, dataTestId } = props;
-  const { prefixCls, selectedKeys, focusedKey, onSelect } =
+  const { prefixCls, selectedKeys, focusedKey, multiple, onSelect } =
     useContext(OptionsCtx);
 
   const handleClick = (e: React.MouseEvent | React.KeyboardEvent) => {
@@ -20,10 +22,12 @@ const Option = (props: any) => {
       ? label
       : undefined;
 
+  const selected = selectedKeys.includes(value);
+
   return (
     <div
       className={clsx(`${prefixCls}-option`, {
-        [`${prefixCls}-option-selected`]: selectedKeys.includes(value),
+        [`${prefixCls}-option-selected`]: selected,
         [`${prefixCls}-option-focused`]: focusedKey === value,
         [`${prefixCls}-option-disabled`]: disabled,
       })}
@@ -39,7 +43,12 @@ const Option = (props: any) => {
       title={htmlTitle}
       data-testid={dataTestId}
     >
-      {label}
+      <div className={`${prefixCls}-option-content`}>{label}</div>
+      {multiple && selected && (
+        <span className={`${prefixCls}-option-state`}>
+          <Check size={16} />
+        </span>
+      )}
     </div>
   );
 };

package/src/Select/options.tsx

@@ -1,54 +1,60 @@
 import clsx from 'clsx';
 import React, { createContext, forwardRef, useRef } from 'react';
 import { useLocale } from '../locale';
+import type { OptionsContextValue, OptionsProps } from './interface';
 import Option from './option';
 
-export const OptionsCtx = createContext({} as any);
+export const OptionsCtx = createContext<OptionsContextValue>(
+  {} as OptionsContextValue,
+);
 
-const Options = forwardRef((props: any, ref: React.Ref<HTMLDivElement>) => {
-  const { locale } = useLocale();
-  const { select } = locale;
+const Options = forwardRef<HTMLDivElement, OptionsProps>(
+  (props, ref: React.Ref<HTMLDivElement>) => {
+    const { locale } = useLocale();
+    const { select } = locale;
 
-  const {
-    prefixCls,
-    options,
-    popupClassName,
-    popupStyle,
-    selectedKeys,
-    focusedKey,
-    dataTestId,
-    onSelect,
-    ...rest
-  } = props;
+    const {
+      prefixCls,
+      options,
+      popupClassName,
+      popupStyle,
+      selectedKeys,
+      focusedKey,
+      dataTestId,
+      multiple,
+      onSelect,
+      ...rest
+    } = props;
 
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const componentRef = ref || useRef<HTMLDivElement>(null);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const componentRef = ref || useRef<HTMLDivElement>(null);
 
-  return (
-    <div
-      {...rest}
-      className={clsx(`${prefixCls}-popup`, popupClassName)}
-      style={popupStyle}
-      ref={componentRef}
-      tabIndex={-1}
-    >
-      {options.length === 0 ? (
-        <div className={`${prefixCls}-empty`}>{select.noData}</div>
-      ) : (
-        <OptionsCtx.Provider
-          value={{ prefixCls, selectedKeys, focusedKey, onSelect }}
-        >
-          {options.map((option: any, index: number) => (
-            <Option
-              {...option}
-              key={option.value}
-              dataTestId={`${dataTestId}-${index}`}
-            />
-          ))}
-        </OptionsCtx.Provider>
-      )}
-    </div>
-  );
-});
+    return (
+      <div
+        {...rest}
+        className={clsx(`${prefixCls}-popup`, popupClassName)}
+        style={popupStyle}
+        ref={componentRef}
+        tabIndex={-1}
+      >
+        {options.length === 0 ? (
+          <div className={`${prefixCls}-empty`}>{select.noData}</div>
+        ) : (
+          <OptionsCtx.Provider
+            value={{ prefixCls, selectedKeys, focusedKey, multiple, onSelect }}
+          >
+            {options.map((option, index: number) => (
+              <Option
+                {...option}
+                key={option.value}
+                dataTestId={`${dataTestId}-${index}`}
+              />
+            ))}
+          </OptionsCtx.Provider>
+        )}
+      </div>
+    );
+  },
+);
 
 export default Options;

package/src/Select/select.tsx

@@ -65,7 +65,10 @@ const Select = (baseprops: SelectProps) => {
     return options.find((opt) => opt.value === keys);
   };
 
-  const handleSelect = (key: string | number, e?: React.MouseEvent) => {
+  const handleSelect = (
+    key: string | number,
+    e?: React.MouseEvent | React.KeyboardEvent,
+  ) => {
     let keys;
     if (single) {
       setMergedValue([key]);
@@ -137,12 +140,12 @@ const Select = (baseprops: SelectProps) => {
   const popup = (
     <Options
       prefixCls={prefixCls}
+      multiple={mode === 'multiple' || mode === 'tags'}
       options={filteredOpts}
       focusedKey={focusedKey}
       selectedKeys={mergedValue}
       dataTestId={rest['data-testid']}
       onSelect={handleSelect}
-      onClose={() => setOpen(false)}
       ref={popupRef}
     />
   );

package/src/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/src/Selector/interface.ts

@@ -39,6 +39,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/src/Selector/selector.tsx

@@ -44,6 +44,7 @@ const Selector = React.forwardRef(
       value,
       open,
       loading,
+      size = 'default',
       onSearch,
       onRemove,
       onClear,
@@ -104,6 +105,7 @@ const Selector = React.forwardRef(
 
     const cls = clsx(
       prefixCls,
+      [`${prefixCls}-${size}`],
       [`${prefixCls}-searchable`],
       [`${prefixCls}-${mode || 'single'}`],
       {

package/src/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/src/Table/hooks/useFilter.ts

@@ -18,7 +18,7 @@ export default function useFilter({
   const [filterRecords, setFilterRecords] = useState<Array<FilterRecord>>([]);
   const onFilter = ({ value, dataIndex }: FilterOptions) => {
     let newFilterMap = [...filterRecords];
-    if (!value) {
+    if (!value || (Array.isArray(value) && !value.length)) {
       newFilterMap = newFilterMap.filter(
         (item) => item.dataIndex !== dataIndex,
       );

package/src/Table/interface.ts

@@ -520,6 +520,10 @@ export interface TableProps
    * 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/src/Table/style/index.less

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

package/src/Table/theader/filter.tsx

@@ -175,8 +175,7 @@ const HeaderFilter = React.memo((props: any) => {
               <Search size={14} strokeWidth={1.5} />
             )
           }
-          // variant={selectNodes.length ? 'filled' : undefined}
-          color="info"
+          variant={selectNodes.length ? 'filled' : undefined}
           type="text"
           size="small"
         />
@@ -188,6 +187,7 @@ const HeaderFilter = React.memo((props: any) => {
     <Popover
       trigger="click"
       placement="bottomRight"
+      className={clsx(`${prefixCls}-filter`)}
       content={popup}
       arrow
       open={open}