Develop

packages/input-number/src/input-number.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from "react"
+import { forwardRef, useCallback } from "react"
 import { InputNumberProps } from "./interface"
 import { Input } from "@illa-design/input"
 import { DownIcon, MinusIcon, PlusIcon, UpIcon } from "@illa-design/icon"
@@ -29,7 +29,7 @@ export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
       prefix,
       suffix,
       defaultValue,
-      value = "",
+      value,
       icons,
       formatter,
       onChange,
@@ -41,7 +41,7 @@ export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
       value: value,
     })
 
-    const plusStep = (): void => {
+    const plusStep = useCallback((): void => {
       if (finalValue === "") {
         if (0 <= max && 0 >= min) {
           if (value === undefined) {
@@ -57,8 +57,8 @@ export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
           onChange?.(finalValue + step)
         }
       }
-    }
-    const minusStep = (): void => {
+    }, [finalValue, max, min, onChange, setFinalValue, step, value])
+    const minusStep = useCallback((): void => {
       if (finalValue === "") {
         if (0 <= max && 0 >= min) {
           if (value === undefined) {
@@ -74,7 +74,7 @@ export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
           onChange?.(finalValue - step)
         }
       }
-    }
+    }, [finalValue, max, min, onChange, setFinalValue, step, value])
 
     const control = (
       <div className="control" css={controlContainerStyle}>
@@ -101,18 +101,24 @@ export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
       <Input
         ref={ref}
         css={hoverControlStyle}
-        type="number"
         size={size}
-        value={formatter ? formatter(finalValue) : finalValue.toString()}
+        value={formatter ? formatter(finalValue) : finalValue}
         onChange={(v) => {
+          if (isNaN(Number(v))) {
+            return
+          }
           if (value === undefined) {
-            if (precision && precision >= step) {
+            if (v === "") {
+              setFinalValue("")
+            } else if (precision && precision >= step) {
               setFinalValue(Number(Number(v).toFixed(precision)))
             } else {
               setFinalValue(Number(v))
             }
           }
-          if (precision && precision >= step) {
+          if (v === "") {
+            onChange?.(undefined)
+          } else if (precision && precision >= step) {
             onChange?.(Number(Number(v).toFixed(precision)))
           } else {
             onChange?.(Number(v))

packages/input-number/src/interface.ts

@@ -47,7 +47,7 @@ export interface InputNumberProps
     plus?: ReactNode
     minus?: ReactNode
   }
-  onChange?: (value: number) => void
+  onChange?: (value: number | undefined) => void
   onKeyDown?: (e: SyntheticEvent) => void
   formatter?: (value: number | string) => string
 }

packages/input/src/style.ts

@@ -12,7 +12,7 @@ function getPaddingStyle(size: InputSize): SerializedStyles {
       break
     case "medium":
       pdStyle = css`
-        padding: 3px 16px;
+        padding: 5px 16px;
       `
       break
     case "large":
@@ -160,7 +160,6 @@ export function applyInputStyle(
     ${getPaddingStyle(size)};
     ${bdLeftStyle};
     ${bdRightStyle};
-    z-index: ${zIndex.input};
 
     &:hover {
       border-color: ${variant === "outline"
@@ -237,7 +236,6 @@ export function applyInputDisabledStyle(
           ? getColor("red", "03")
           : getColor("grayBlue", "08")
         : "transparent"};
-    z-index: ${zIndex.input};
     ${getPaddingStyle(size)};
     ${bdLeftStyle};
     ${bdRightStyle};

packages/modal/package.json

@@ -45,7 +45,7 @@
     "@illa-design/system": "workspace:*",
     "@illa-design/theme": "workspace:*",
     "@illa-design/trigger": "workspace:*",
-    "react-hotkeys-hook": "^3.4.6",
+    "react-hotkeys-hook": "^4.4.0",
     "react-focus-lock": "^2.8.1",
     "uuid": "^8.3.2",
     "framer-motion": "^7.6.12"

packages/modal/src/modal.tsx

@@ -85,7 +85,7 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>((props, ref) => {
       }
     },
     {
-      enableOnTags: ["INPUT"],
+      enableOnFormTags: ["INPUT"],
     },
     [visible],
   )

packages/pagination/src/interface.ts

@@ -32,4 +32,6 @@ export interface PaginationProps
   onChange?: (pageNumber: number, pageSize: number) => void
   onPageSizeChange?: (size: number, current: number) => void
   showTotal?: boolean | ((total: number, range: number[]) => ReactNode)
+  inputBorderColorScheme?: string
+  activeColorScheme?: string
 }

packages/pagination/src/pagination.tsx

@@ -53,6 +53,8 @@ export const Pagination = forwardRef<HTMLDivElement, PaginationProps>(
       onChange,
       onPageSizeChange,
       showTotal,
+      inputBorderColorScheme,
+      activeColorScheme,
       ...otherProps
     } = props
 
@@ -131,7 +133,7 @@ export const Pagination = forwardRef<HTMLDivElement, PaginationProps>(
             <div css={jumperContainerStyle}>
               <span css={applyJumperStyle(disabled)}>{locale.go}</span>
               <input
-                css={applySelectorInputStyle(size)}
+                css={applySelectorInputStyle(size, inputBorderColorScheme)}
                 value={jumperValue}
                 type="number"
                 min={1}
@@ -160,6 +162,7 @@ export const Pagination = forwardRef<HTMLDivElement, PaginationProps>(
     }, [
       changeCurrent,
       disabled,
+      inputBorderColorScheme,
       jumperValue,
       locale.go,
       showJumper,
@@ -258,6 +261,7 @@ export const Pagination = forwardRef<HTMLDivElement, PaginationProps>(
                   `,
                   size,
                   disabled,
+                  activeColorScheme,
                   active,
                 )}
                 onClick={() => {
@@ -427,6 +431,7 @@ export const Pagination = forwardRef<HTMLDivElement, PaginationProps>(
                 label: finalPageSize + "/" + locale.page,
                 value: finalPageSize.toString(),
               }}
+              colorScheme={inputBorderColorScheme}
               onChange={(value) => {
                 if (value !== null) {
                   let v = Number(value)
@@ -451,6 +456,7 @@ export const Pagination = forwardRef<HTMLDivElement, PaginationProps>(
       disabled,
       finalCurrent,
       finalPageSize,
+      inputBorderColorScheme,
       locale.page,
       onPageSizeChange,
       pageSize,

packages/pagination/src/style.ts

@@ -66,21 +66,32 @@ export function applyDirectorIconStyle(
   marginStyle?: SerializedStyles,
   size?: PaginationSize,
   disabled?: boolean,
+  activeColorScheme?: string | undefined,
   active?: boolean,
 ): SerializedStyles {
   let textColor = css`
-    color: ${active ? getColor("blue", "01") : getColor("grayBlue", "02")};
+    color: ${active
+      ? getColor(activeColorScheme ?? "blue", "01")
+      : getColor("grayBlue", "02")};
   `
   let bgColor = css`
-    background-color: ${active ? getColor("blue", "07") : "unset"};
+    background-color: ${active
+      ? getColor(activeColorScheme ?? "blue", "07")
+      : "unset"};
   `
 
   if (disabled) {
     textColor = css`
-      color: ${active ? getColor("blue", "05") : getColor("grayBlue", "07")};
+      color: ${active
+        ? getColor(activeColorScheme ?? "blue", "05")
+        : getColor("grayBlue", "07")};
     `
     bgColor = css`
-      background-color: ${active ? getColor("grayBlue", "09") : "unset"};
+      background-color: ${active
+        ? activeColorScheme
+          ? getColor(activeColorScheme, "07")
+          : getColor("grayBlue", "09")
+        : "unset"};
     `
   }
 
@@ -126,6 +137,7 @@ export function applyDirectorIconStyle(
 
 export function applySelectorInputStyle(
   size: PaginationSize,
+  inputBorderColorScheme?: string,
 ): SerializedStyles {
   let s = "32px"
 
@@ -161,7 +173,10 @@ export function applySelectorInputStyle(
     &:focus-within {
       outline: none;
       background: none;
-      border: 1px solid ${getColor("blue", "03")};
+      border: 1px solid
+        ${inputBorderColorScheme
+          ? getColor(inputBorderColorScheme, "01")
+          : getColor("blue", "01")};
       box-shadow: 0 0 8px 0 ${getColorShadow("blue", "01")};
     }
 

packages/pagination/stories/pagination.stories.tsx

@@ -7,7 +7,22 @@ export default {
 } as Meta
 
 const Template: StoryFn<PaginationProps> = (args) => {
-  return <Pagination {...args} />
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "50px" }}>
+      <Pagination {...args} total={100} pageSize={10} />
+      <Pagination {...args} total={100} pageSize={10} showJumper={true} />
+      <Pagination {...args} total={100} pageSize={10} showMore={true} />
+      <Pagination {...args} total={100} pageSize={10} simple={true} />
+      <Pagination
+        {...args}
+        total={100}
+        pageSize={10}
+        simple={true}
+        sizeCanChange
+      />
+      <Pagination {...args} total={100} pageSize={10} showTotal />
+    </div>
+  )
 }
 
 export const Basic = Template.bind({})

packages/select/src/multiple-select.tsx

@@ -7,7 +7,7 @@ import { getColor } from "@illa-design/theme"
 import { Empty } from "@illa-design/empty"
 import { InputTag, TagObject } from "@illa-design/input-tag"
 import { Checkbox } from "@illa-design/checkbox"
-import { dropListItemStyle } from "./style"
+import { dropListItemStyle, dropLabelStyle } from "./style"
 import { InputTagRefHandler } from "@illa-design/input-tag/src"
 
 export const MultipleSelect = forwardRef<HTMLDivElement, SelectProps>(
@@ -245,6 +245,7 @@ export const MultipleSelect = forwardRef<HTMLDivElement, SelectProps>(
                   <div css={dropListItemStyle}>
                     <Checkbox
                       colorScheme={colorScheme}
+                      flex="none"
                       mr="8px"
                       checked={
                         labelInValue
@@ -256,7 +257,7 @@ export const MultipleSelect = forwardRef<HTMLDivElement, SelectProps>(
                             ) !== undefined
                       }
                     />
-                    {option.label}
+                    <span css={dropLabelStyle}>{option.label}</span>
                   </div>
                 </DropListItem>
               )

packages/select/src/single-select.tsx

@@ -23,6 +23,7 @@ import { useMergeValue } from "@illa-design/system"
 import { DownIcon, LoadingIcon, UpIcon } from "@illa-design/icon"
 import { getColor } from "@illa-design/theme"
 import { Empty } from "@illa-design/empty"
+import { dropLabelStyle, dropListItemStyle } from "./style"
 
 export const SingleSelect = forwardRef<HTMLInputElement, SelectProps>(
   (props, ref) => {
@@ -78,7 +79,8 @@ export const SingleSelect = forwardRef<HTMLInputElement, SelectProps>(
           | SelectOptionObject[]
           | string[]
           | number
-          | number[],
+          | number[]
+          | ReactNode,
       ) => {
         let dV: number | string | ReactNode | undefined = undefined
         if (dealValue === undefined) {
@@ -115,6 +117,9 @@ export const SingleSelect = forwardRef<HTMLInputElement, SelectProps>(
               }
             }
           }
+          if (dV === undefined) {
+            dV = dealValue as ReactNode
+          }
         }
         return dV
       },
@@ -255,11 +260,13 @@ export const SingleSelect = forwardRef<HTMLInputElement, SelectProps>(
                     <DropListItem
                       key={option.value.toString()}
                       value={option.value}
+                      css={dropListItemStyle}
                       colorScheme={colorScheme}
-                      title={option.label}
                       selected={option.value === finalSelectValue}
                       disabled={option.disabled}
-                    />
+                    >
+                      <span css={dropLabelStyle}>{option.label}</span>
+                    </DropListItem>
                   )
                 })
               : Children.map(children, (child) => {

packages/select/src/style.ts

@@ -5,3 +5,11 @@ export const dropListItemStyle = css`
   flex-direction: row;
   align-items: center;
 `
+export const dropLabelStyle = css`
+  display: inline-block;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`

packages/tabs/src/headers/tab-line-header.tsx

@@ -150,7 +150,6 @@ export const TabLineHeader = forwardRef<HTMLDivElement, TabHeaderProps>(
         childRef.current,
       )?.reduce((a, b) => a + b, 0)
       const offsetSize = getOffsetSize(_isHorizontalLayout, scrollRef)
-
       setNeedScroll(childrenSize > offsetSize)
     }, [_isHorizontalLayout, width, height, tabHeaderChild?.length])
 
@@ -161,7 +160,7 @@ export const TabLineHeader = forwardRef<HTMLDivElement, TabHeaderProps>(
       )
     }, [_isHorizontalLayout, selectedIndex])
 
-    const dividerSize = () => {
+    const dividerSize = useMemo(() => {
       const sizeArr = getChildrenSize(_isHorizontalLayout, childRef.current)
       let size = 0
       const len = sizeArr?.length
@@ -171,7 +170,7 @@ export const TabLineHeader = forwardRef<HTMLDivElement, TabHeaderProps>(
       return size > getOffsetSize(_isHorizontalLayout, scrollRef)
         ? size
         : getOffsetSize(_isHorizontalLayout, scrollRef)
-    }
+    },[_isHorizontalLayout])
 
     let [
       headerContainer,
@@ -232,7 +231,7 @@ export const TabLineHeader = forwardRef<HTMLDivElement, TabHeaderProps>(
           >
             <div css={headerContainer} ref={ref}>
               {!_isAhead && (
-                <div css={applyLineCss(childRef && dividerSize())}>
+                <div css={applyLineCss(childRef && dividerSize)}>
                   <div
                     css={applyBlueLineCss(
                       blueLineWidth,
@@ -264,7 +263,7 @@ export const TabLineHeader = forwardRef<HTMLDivElement, TabHeaderProps>(
                   })}
               </div>
               {isAhead(tabPosition) && (
-                <div css={applyLineCss(childRef && dividerSize())}>
+                <div css={applyLineCss(childRef && dividerSize)}>
                   <div
                     css={applyBlueLineCss(
                       blueLineWidth,

packages/theme/src/z-index.ts

@@ -2,7 +2,6 @@ export const zIndex = {
   auto: "auto",
   hide: -1,
   base: 0,
-  input: 1,
   inputFocus: 2,
   tabs: 2,
   button: 2,