@rainbow-oh/yee-c 0.8.1 → 0.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rainbow-oh/yee-c",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "description": "yee basic components",
   "keywords": [
     "react",

package/src/Anchor/anchor.tsx

@@ -139,8 +139,8 @@ const Anchor = forwardRef<HTMLDivElement, AnchorProps>((baseprops, ref) => {
 
     // Scrolled above the first anchor — reset to the top item.
     if (nextActiveKey === undefined) {
-      const first = currentItems.find(
-        (item) => document.getElementById(item.key),
+      const first = currentItems.find((item) =>
+        document.getElementById(item.key),
       );
       nextActiveKey = first?.key;
     }

package/src/Carousel/carousel.tsx

@@ -256,8 +256,7 @@ const Carousel = React.forwardRef(
             .fill(0)
             .map((i, index: number) => {
               const isActive =
-                current === index + 1 ||
-                (current === 0 && index === count - 1);
+                current === index + 1 || (current === 0 && index === count - 1);
               return (
                 <li
                   className={clsx({

package/src/Cascader/cascader.tsx

@@ -446,7 +446,11 @@ const Cascader = (baseprops: CascaderProps) => {
 
   const renderPopup = () => {
     return (
-      <div className={clsx(prefixCls)} role="group" aria-label="Cascader options">
+      <div
+        className={clsx(prefixCls)}
+        role="group"
+        aria-label="Cascader options"
+      >
         {isFilter ? (
           <SearchList
             prefixCls={prefixCls}

package/src/Cascader/column.tsx

@@ -11,7 +11,11 @@ export interface ColumnProps {
 const Column = (props: ColumnProps) => {
   const { prefixCls, data, index } = props;
   return (
-    <ul className={`${prefixCls}-menu`} role="listbox" aria-label={`Level ${index + 1} options`}>
+    <ul
+      className={`${prefixCls}-menu`}
+      role="listbox"
+      aria-label={`Level ${index + 1} options`}
+    >
       {Array.isArray(data) &&
         data.map((item, idx: number) => {
           return (

package/src/Cascader/search-list.tsx

@@ -32,10 +32,15 @@ const SearchList = (props: SearchListProps) => {
   const { prefixCls, items, onClick } = props;
 
   return (
-    <ul className={`${prefixCls}-filter-menu`} role="listbox" aria-label="Search results">
+    <ul
+      className={`${prefixCls}-filter-menu`}
+      role="listbox"
+      aria-label="Search results"
+    >
       {items.length ? (
         items.map((item) => {
-          const title = item.data.$source?.title || item.data.labelPath.join(' / ');
+          const title =
+            item.data.$source?.title || item.data.labelPath.join(' / ');
 
           return (
             <li
@@ -58,7 +63,9 @@ const SearchList = (props: SearchListProps) => {
           );
         })
       ) : (
-        <li role="option" aria-disabled="true">{'No result'}</li>
+        <li role="option" aria-disabled="true">
+          {'No result'}
+        </li>
       )}
     </ul>
   );

package/src/Cascader/utils/index.ts

@@ -340,7 +340,8 @@ export const changeToView = (
  * conversions share one collision-safe format.
  * @param val - The path array
  */
-export const formatKey = (val: Array<string | number>): string => pathToUid(val);
+export const formatKey = (val: Array<string | number>): string =>
+  pathToUid(val);
 
 /**
  * Check if a path has the same prefix as another path
@@ -441,11 +442,7 @@ export const flattenOptions = (
       });
       if (hasChild(node, children)) {
         seen.add(node);
-        dfs(
-          node[children] as Array<Record<string, unknown>>,
-          path,
-          labelPath,
-        );
+        dfs(node[children] as Array<Record<string, unknown>>, path, labelPath);
         seen.delete(node);
       }
     });

package/src/Checkbox/checkbox-group.tsx

@@ -63,7 +63,12 @@ const CheckboxGroup = (baseprops: CheckboxGroupProps) => {
   };
 
   return (
-    <div className={cls} style={style} role="group" aria-disabled={disabled || undefined}>
+    <div
+      className={cls}
+      style={style}
+      role="group"
+      aria-disabled={disabled || undefined}
+    >
       <CheckboxGroupCtx.Provider
         value={{ name, buttonStyle, onChange: handleChange }}
       >

package/src/Dialog/dialog.tsx

@@ -197,9 +197,13 @@ const Dialog = (baseprops: DialogProps) => {
               className={clsx(`${prefixCls}-header`, classNames?.header)}
               style={styles?.header}
             >
-              <div className={`${prefixCls}-title`} id={titleId}>
-                {title}
-              </div>
+              {typeof title === 'string' ? (
+                <div className={`${prefixCls}-title`} id={titleId}>
+                  {title}
+                </div>
+              ) : (
+                title
+              )}
             </div>
           ) : null}
           <div

package/src/Dialog/interface.ts

@@ -54,7 +54,7 @@ export interface DialogProps extends DataAttributeProps {
   /**
    * Title
    */
-  title?: string;
+  title?: string | React.ReactNode;
   /**
    * Cancel button text
    * @default Cancel

package/src/Dialog/style/index.less

@@ -37,7 +37,8 @@
   }
 
   &-title {
-    font-weight: 600;
+    font-size: var(--yee-dialog-title-font-size);
+    font-weight: var(--yee-dialog-title-font-weight);
   }
 
   &-content {

package/src/Drawer/drawer.tsx

@@ -206,7 +206,13 @@ const Drawer = (baseprops: DrawerProps) => {
                 className={clsx(`${prefixCls}-header`, classNames?.header)}
                 style={styles?.header}
               >
-                <div className={clsx(`${prefixCls}-title`, classNames?.title)} style={styles?.title} id={titleId}>{title}</div>
+                <div
+                  className={clsx(`${prefixCls}-title`, classNames?.title)}
+                  style={styles?.title}
+                  id={titleId}
+                >
+                  {title}
+                </div>
               </div>
             ) : null}
             <div

package/src/Form/Group.tsx

@@ -9,10 +9,10 @@ import React, {
   useRef,
 } from 'react';
 import Grid from '../Grid';
-import { runValidator } from './utils/validate';
 import FieldContext from './FieldContext';
 import FormContext from './FormContext';
 import type { FieldGroupProps, NamePath, ValidateMessage } from './interface';
+import { runValidator } from './utils/validate';
 
 const Group: React.FC<FieldGroupProps> = (props) => {
   const { label, required, rules, cols, children, style, className } = props;
@@ -39,9 +39,7 @@ const Group: React.FC<FieldGroupProps> = (props) => {
   const [, forceValidate] = useReducer((x) => x + 1, 0); // eslint-disable-line @typescript-eslint/no-unused-vars
 
   // Group validation
-  const validate = async (
-    force: boolean,
-  ): Promise<ValidateMessage[]> => {
+  const validate = async (force: boolean): Promise<ValidateMessage[]> => {
     if (!required && (!rules || rules.length === 0)) return [];
 
     // Skip if not touched and not forced validation

package/src/Form/demo/tooltip.tsx

@@ -1,11 +1,4 @@
-import {
-  Button,
-  Form,
-  Grid,
-  Input,
-  Space,
-  TextArea,
-} from '@rainbow-oh/yee-c';
+import { Button, Form, Grid, Input, Space, TextArea } from '@rainbow-oh/yee-c';
 import { Info } from 'lucide-react';
 import React from 'react';
 
@@ -29,9 +22,7 @@ export default () => {
             name="username"
             label="Username"
             tooltip="Used for login. 4-20 characters."
-            rules={[
-              { required: true, message: 'Please input your username!' },
-            ]}
+            rules={[{ required: true, message: 'Please input your username!' }]}
           >
             <Input placeholder="Please input your username" />
           </Form.Field>

package/src/Form/utils/validate.ts

@@ -134,10 +134,7 @@ export async function runValidator(
  * Returns { passed, message? }. Sync rules short-circuit; the custom validator
  * is awaited so async validators are supported.
  */
-async function validate(
-  rule: Rule,
-  value: unknown,
-): Promise<ValidateResult> {
+async function validate(rule: Rule, value: unknown): Promise<ValidateResult> {
   if (rule.required && isEmpty(value)) {
     return { passed: false };
   }

package/src/List/hooks/useListKeyboard.ts

@@ -31,9 +31,9 @@ export default function useListKeyboard({
   onFocusChange,
   onClick,
 }: UseListKeyboardParams) {
-  const [internalFocusedKey, setInternalFocusedKey] = useState<
-    string | number
-  >('');
+  const [internalFocusedKey, setInternalFocusedKey] = useState<string | number>(
+    '',
+  );
 
   const isControlled = controlledFocusedKey !== undefined;
   const focusedKey = isControlled ? controlledFocusedKey : internalFocusedKey;

package/src/List/list.tsx

@@ -33,7 +33,8 @@ const List = forwardRef<HTMLUListElement, ListProps>((baseprops, ref) => {
   } = props;
 
   const multiColumn = columns > 1;
-  const useVirtual = virtual && height !== null && height !== undefined && Array.isArray(items);
+  const useVirtual =
+    virtual && height !== null && height !== undefined && Array.isArray(items);
   const safeItems = Array.isArray(items) ? items : [];
 
   // Keyboard navigation

package/src/Menu/menu.tsx

@@ -41,7 +41,11 @@ const MenuGroup = ({
   renderItems: (items: MenuItemType[]) => React.ReactNode[];
 }) => (
   <li className={`${prefixCls}-item-group`} role="none">
-    <div className={`${prefixCls}-item-group-title`} role="presentation" id={`${prefixCls}-group-${String(item.label)}`}>
+    <div
+      className={`${prefixCls}-item-group-title`}
+      role="presentation"
+      id={`${prefixCls}-group-${String(item.label)}`}
+    >
       {item.label}
     </div>
     <ul
@@ -118,11 +122,18 @@ const Menu = (props: InnerMenuProps) => {
   const rootStyle = root ? { ...style } : {};
 
   return (
-    <ul {...dataAttrs} className={cls} style={rootStyle} role={root && mode === 'horizontal' ? 'menubar' : 'menu'}>
+    <ul
+      {...dataAttrs}
+      className={cls}
+      style={rootStyle}
+      role={root && mode === 'horizontal' ? 'menubar' : 'menu'}
+    >
       <MenuCtx.Provider value={{ level, mode, classNames, styles }}>
         {getChildFromItems(items)}
         {level === 0 && footer && (
-          <li className={`${prefixCls}-footer`} role="none">{footer}</li>
+          <li className={`${prefixCls}-footer`} role="none">
+            {footer}
+          </li>
         )}
       </MenuCtx.Provider>
     </ul>

package/src/Pagination/items.tsx

@@ -86,14 +86,20 @@ const Items: React.FC<PaginationItemsProps> = (props) => {
             >
               {components?.jumpPrev ?? (
                 <>
-                  <span className={`${prefixCls}-jump-prev-ellipsis`} aria-hidden="true">
+                  <span
+                    className={`${prefixCls}-jump-prev-ellipsis`}
+                    aria-hidden="true"
+                  >
                     <Ellipsis
                       className="ellipsis"
                       size={18}
                       strokeWidth={1.5}
                     />
                   </span>
-                  <span className={`${prefixCls}-jump-prev-icon`} aria-hidden="true">
+                  <span
+                    className={`${prefixCls}-jump-prev-icon`}
+                    aria-hidden="true"
+                  >
                     <ChevronsLeft
                       className="turn"
                       size={18}
@@ -122,14 +128,20 @@ const Items: React.FC<PaginationItemsProps> = (props) => {
             >
               {components?.jumpNext ?? (
                 <>
-                  <span className={`${prefixCls}-jump-next-ellipsis`} aria-hidden="true">
+                  <span
+                    className={`${prefixCls}-jump-next-ellipsis`}
+                    aria-hidden="true"
+                  >
                     <Ellipsis
                       className="ellipsis"
                       size={18}
                       strokeWidth={1.5}
                     />
                   </span>
-                  <span className={`${prefixCls}-jump-next-icon`} aria-hidden="true">
+                  <span
+                    className={`${prefixCls}-jump-next-icon`}
+                    aria-hidden="true"
+                  >
                     <ChevronsRight
                       className="turn"
                       size={18}

package/src/Pagination/pagination.tsx

@@ -184,7 +184,9 @@ const Pagination = React.forwardRef(
           aria-disabled={mergedCurrent === 1 || undefined}
           key="prev"
         >
-          {components?.prev ?? <ChevronLeft size={20} strokeWidth={1.5} aria-hidden="true" />}
+          {components?.prev ?? (
+            <ChevronLeft size={20} strokeWidth={1.5} aria-hidden="true" />
+          )}
         </li>
       );
     };
@@ -212,7 +214,9 @@ const Pagination = React.forwardRef(
           aria-disabled={mergedCurrent === pageCount || undefined}
           key="next"
         >
-          {components?.next ?? <ChevronRight size={20} strokeWidth={1.5} aria-hidden="true" />}
+          {components?.next ?? (
+            <ChevronRight size={20} strokeWidth={1.5} aria-hidden="true" />
+          )}
         </li>
       );
     };
@@ -255,13 +259,23 @@ const Pagination = React.forwardRef(
     }
 
     return (
-      <ul {...rest} className={cls} style={style} ref={ref} role="navigation" aria-label="Pagination" aria-disabled={disabled || undefined}>
+      <ul
+        {...rest}
+        className={cls}
+        style={style}
+        ref={ref}
+        role="navigation"
+        aria-label="Pagination"
+        aria-disabled={disabled || undefined}
+      >
         {renderTotal()}
         {renderPrevious()}
         {simple ? (
           <li className={`${prefixCls}-simple`}>
             {renderNumber(false)}
-            <span className="split" aria-hidden="true">/</span>
+            <span className="split" aria-hidden="true">
+              /
+            </span>
             <span className="total-page">{pageCount}</span>
           </li>
         ) : (

package/src/PickerPanel/panels/DatePanel/DateBody.tsx

@@ -2,8 +2,8 @@ import clsx from 'clsx';
 import { Dayjs } from 'dayjs';
 import React from 'react';
 import useEvent from '../../../hooks/useEvent';
-import type { PanelSharedProps } from '../../interface';
 import panelConfig from '../../configs';
+import type { PanelSharedProps } from '../../interface';
 import pickerUtils from '../../utils/pickerUtils';
 import PanelBody from '../PanelBody';
 

package/src/PickerPanel/panels/DateTimePanel/index.tsx

@@ -1,6 +1,6 @@
 import { Dayjs } from 'dayjs';
 import * as React from 'react';
-import type { PickerType, PanelSharedProps } from '../../interface';
+import type { PanelSharedProps, PickerType } from '../../interface';
 import DatePanel from '../DatePanel';
 import TimePanel from '../TimePanel';
 

package/src/PickerPanel/panels/MonthPanel/MonthHeader.tsx

@@ -6,8 +6,13 @@ import pickerUtils from '../../utils/pickerUtils';
 import Header from '../Header';
 
 export default function MonthHeader(props: PanelSharedProps) {
-  const { prefixCls, viewDate, offsetYear = 0, onViewDateChange, onPanelChange } =
-    props;
+  const {
+    prefixCls,
+    viewDate,
+    offsetYear = 0,
+    onViewDateChange,
+    onPanelChange,
+  } = props;
 
   const year = pickerUtils.getYear(viewDate) + offsetYear;
 

package/src/PickerPanel/panels/PanelBody.tsx

@@ -1,8 +1,8 @@
 import clsx from 'clsx';
 import { Dayjs } from 'dayjs';
 import * as React from 'react';
-import pickerUtils from '../utils/pickerUtils';
 import type { PickerType } from '../interface';
+import pickerUtils from '../utils/pickerUtils';
 
 export interface PanelBodyProps {
   prefixCls?: string;

package/src/PickerPanel/panels/QuarterPanel/QuarterHeader.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import Button from '../../../Button';
 import useEvent from '../../../hooks/useEvent';
-import Header from '../Header';
 import type { PanelSharedProps } from '../../interface';
+import Header from '../Header';
 
 import pickerUtils from '../../utils/pickerUtils';
 

package/src/PickerPanel/panels/RangePanel/index.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 
 import { Dayjs } from 'dayjs';
 import type { PickerPanelProps } from '../../interface';
-import type { RangePanelProps } from './interface';
 import PickerPanel from '../../picker-panel';
 import pickerUtils from '../../utils/pickerUtils';
+import type { RangePanelProps } from './interface';
 
 function RangePanel(props: RangePanelProps) {
   const {

package/src/PickerPanel/panels/TimePanel/TimeBody.tsx

@@ -1,7 +1,7 @@
 import { Dayjs } from 'dayjs';
 import * as React from 'react';
-import type { PanelSharedProps, TimeUnit } from '../../interface';
 import panelConfig from '../../configs';
+import type { PanelSharedProps, TimeUnit } from '../../interface';
 import pickerUtils from '../../utils/pickerUtils';
 import TimeColumn from './TimeColumn';
 

package/src/PickerPanel/panels/YearPanel/YearHeader.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import Button from '../../../Button';
 import useEvent from '../../../hooks/useEvent';
-import Header from '../Header';
 import type { PanelSharedProps } from '../../interface';
+import Header from '../Header';
 
 import pickerUtils from '../../utils/pickerUtils';
 

package/src/PickerPanel/utils/pickerUtils.ts

@@ -26,7 +26,8 @@ type PickerType =
 
 const d = {
   dayjs: dayjs,
-  init: (date?: dayjs.ConfigType, option?: dayjs.OptionType) => dayjs(date, option),
+  init: (date?: dayjs.ConfigType, option?: dayjs.OptionType) =>
+    dayjs(date, option),
   getNow: () => {
     return d.init(undefined);
   },

package/src/RangePicker/range-picker-mobile.tsx

@@ -306,9 +306,7 @@ const RangePickerMobile: FC<RangePickerProps> = (props) => {
               </Space>
             )}
             <Button block type="primary" onClick={handleTabConfirm}>
-              {activeTab === 'start'
-                ? rangepicker.next
-                : rangepicker.confirm}
+              {activeTab === 'start' ? rangepicker.next : rangepicker.confirm}
             </Button>
           </div>
         }

package/src/Rate/star.tsx

@@ -66,7 +66,10 @@ const Star: React.FC<StarProps> = (props) => {
                 {renderCharacter()}
               </span>
             ) : (
-              <StarHalf className={`${prefixCls}-star-half`} aria-hidden="true" />
+              <StarHalf
+                className={`${prefixCls}-star-half`}
+                aria-hidden="true"
+              />
             )}
           </div>
           <div
@@ -87,7 +90,10 @@ const Star: React.FC<StarProps> = (props) => {
                 {renderCharacter()}
               </span>
             ) : (
-              <StarFull className={`${prefixCls}-star-full`} aria-hidden="true" />
+              <StarFull
+                className={`${prefixCls}-star-full`}
+                aria-hidden="true"
+              />
             )}
           </div>
         </li>
@@ -114,9 +120,15 @@ const Star: React.FC<StarProps> = (props) => {
               {renderCharacter()}
             </span>
           ) : active ? (
-            <StarFull className={`${prefixCls}-star-active`} aria-hidden="true" />
+            <StarFull
+              className={`${prefixCls}-star-active`}
+              aria-hidden="true"
+            />
           ) : (
-            <StarFull className={`${prefixCls}-star-inactive`} aria-hidden="true" />
+            <StarFull
+              className={`${prefixCls}-star-inactive`}
+              aria-hidden="true"
+            />
           )}
         </li>
       )}

package/src/Segmented/demo/variant.tsx

@@ -9,8 +9,16 @@ export default () => (
       <Segmented variant="pill" options={['Daily', 'Weekly', 'Monthly']} />
     </Space>
     <Space block>
-      <Segmented variant="pill" size="small" options={['Small', 'Default', 'Large']} />
-      <Segmented variant="pill" size="large" options={['Small', 'Default', 'Large']} />
+      <Segmented
+        variant="pill"
+        size="small"
+        options={['Small', 'Default', 'Large']}
+      />
+      <Segmented
+        variant="pill"
+        size="large"
+        options={['Small', 'Default', 'Large']}
+      />
     </Space>
     <div style={{ width: 480 }}>
       <Segmented

package/src/Segmented/index.ts

@@ -1,12 +1,12 @@
 import InternalSegmented from './segmented';
 
 export type {
-  SegmentedOption,
   SegmentedLabeledOption,
+  SegmentedOption,
+  SegmentedProps,
   SegmentedRawOption,
   SegmentedSemanticDOM,
   SegmentedValue,
-  SegmentedProps,
 } from './interface';
 
 export default InternalSegmented;

package/src/Segmented/segmented.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
-import React, { useContext, useId, useMemo } from 'react';
 import { motion } from 'motion/react';
+import React, { useContext, useId, useMemo } from 'react';
 import { GlobalContext } from '../Config-Provider';
 import useMergedState from '../hooks/useMergedState';
 import mergeContextToProps from '../utils/mergeContextToProps';
@@ -13,9 +13,7 @@ import type {
 
 import './style/index.less';
 
-const normalizeOption = (
-  option: SegmentedOption,
-): SegmentedLabeledOption => {
+const normalizeOption = (option: SegmentedOption): SegmentedLabeledOption => {
   if (typeof option === 'string' || typeof option === 'number') {
     return { label: String(option), value: option };
   }
@@ -47,10 +45,7 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
       ...rest
     } = props;
 
-    const items = useMemo(
-      () => options.map(normalizeOption),
-      [options],
-    );
+    const items = useMemo(() => options.map(normalizeOption), [options]);
 
     const firstValue = items[0]?.value;
 
@@ -104,9 +99,7 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
               ) : null}
               <span className={`${prefixCls}-item-inner`}>
                 {item.icon ? (
-                  <span className={`${prefixCls}-item-icon`}>
-                    {item.icon}
-                  </span>
+                  <span className={`${prefixCls}-item-icon`}>{item.icon}</span>
                 ) : null}
                 {item.label !== undefined && item.label !== null ? (
                   <span className={`${prefixCls}-item-label`}>

package/src/Select/interface.ts

@@ -277,4 +277,3 @@ export interface OptionsProps extends Omit<
     e?: React.MouseEvent | React.KeyboardEvent,
   ) => void;
 }
-