Merge branch 'beta'

packages/button/src/style.ts

@@ -590,6 +590,9 @@ export function applyFontStyle(size: ButtonSize): SerializedStyles {
         font-style: normal;
         line-height: 20px;
         letter-spacing: normal;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
       `
     case "medium":
     case "large":
@@ -600,6 +603,9 @@ export function applyFontStyle(size: ButtonSize): SerializedStyles {
         font-style: normal;
         line-height: 22px;
         letter-spacing: normal;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
       `
   }
 }

packages/date-picker/src/interface.ts

@@ -62,6 +62,7 @@ export interface PublicDatePickerProps extends BoxProps {
   utcOffset?: number
   timezone?: string
   inputSuffix?: ReactNode
+  readonly?: boolean
 }
 
 export interface SinglePickerProps extends PublicDatePickerProps {

packages/date-picker/src/range-date-picker.tsx

@@ -74,6 +74,7 @@ export const RangeDatePicker = forwardRef<HTMLDivElement, RangeDatePickerProps>(
       size = "medium",
       colorScheme = "blue",
       extra,
+      readonly = false,
     } = props
 
     const weekStart = 0
@@ -764,7 +765,7 @@ export const RangeDatePicker = forwardRef<HTMLDivElement, RangeDatePickerProps>(
           }
           trigger="click"
           position={position}
-          disabled={triggerDisabled}
+          disabled={triggerDisabled || readonly}
           onVisibleChange={visibleChange}
           popupVisible={mergedPopupVisible}
           colorScheme="white"
@@ -793,7 +794,7 @@ export const RangeDatePicker = forwardRef<HTMLDivElement, RangeDatePickerProps>(
               onPressEnter={onPressEnter}
               onClear={onClear}
               allowClear={allowClear}
-              editable={editable}
+              editable={editable || !readonly}
               suffixIcon={suffixIcon}
             />
           </div>

packages/date-picker/src/signle-date-picker.tsx

@@ -64,6 +64,7 @@ export const SingleDatePicker = forwardRef<
     showTime,
     showNowBtn = true,
     onOk,
+    readonly = false,
   } = props
 
   const refInput = useRef<HTMLInputElement>(null)
@@ -438,7 +439,7 @@ export const SingleDatePicker = forwardRef<
         }
         trigger="click"
         position={position}
-        disabled={disabled}
+        disabled={disabled || readonly}
         onVisibleChange={visibleChange}
         popupVisible={mergedPopupVisible}
         colorScheme="white"
@@ -463,7 +464,7 @@ export const SingleDatePicker = forwardRef<
             onPressEnter={onPressEnter}
             onClear={onClear}
             allowClear={allowClear}
-            editable={editable}
+            editable={editable || !readonly}
             suffixIcon={suffixIcon}
           />
         </div>

packages/date-picker/src/signle-year-picker.tsx

@@ -55,6 +55,7 @@ export const SingleYearPicker = forwardRef<
     size = "medium",
     colorScheme = "blue",
     inputSuffix,
+    readonly = false,
   } = props
 
   const refInput = useRef<HTMLInputElement>(null)
@@ -295,7 +296,7 @@ export const SingleYearPicker = forwardRef<
         }
         trigger="click"
         position={position}
-        disabled={disabled}
+        disabled={disabled || readonly}
         onVisibleChange={visibleChange}
         popupVisible={mergedPopupVisible}
         colorScheme="white"
@@ -320,7 +321,7 @@ export const SingleYearPicker = forwardRef<
             onPressEnter={onPressEnter}
             onClear={onClear}
             allowClear={allowClear}
-            editable={editable}
+            editable={editable || !readonly}
             suffixIcon={suffixIcon}
           />
         </div>

packages/date-picker/src/single-month-picker.tsx

@@ -60,6 +60,7 @@ export const SingleMonthPicker = forwardRef<
     colorScheme = "blue",
     inputSuffix,
     onOk,
+    readonly = false,
   } = props
 
   const refInput = useRef<HTMLInputElement>(null)
@@ -345,7 +346,7 @@ export const SingleMonthPicker = forwardRef<
         }
         trigger="click"
         position={position}
-        disabled={disabled}
+        disabled={disabled || readonly}
         onVisibleChange={visibleChange}
         popupVisible={mergedPopupVisible}
         colorScheme="white"
@@ -370,7 +371,7 @@ export const SingleMonthPicker = forwardRef<
             onPressEnter={onPressEnter}
             onClear={onClear}
             allowClear={allowClear}
-            editable={editable}
+            editable={editable || !readonly}
             suffixIcon={suffixIcon}
           />
         </div>

packages/date-picker/src/single-quarter-picker.tsx

@@ -60,6 +60,7 @@ export const SingleQuarterPicker = forwardRef<
     colorScheme = "blue",
     inputSuffix,
     onOk,
+    readonly = false,
   } = props
 
   const refInput = useRef<HTMLInputElement>(null)
@@ -345,7 +346,7 @@ export const SingleQuarterPicker = forwardRef<
         }
         trigger="click"
         position={position}
-        disabled={disabled}
+        disabled={disabled || readonly}
         onVisibleChange={visibleChange}
         popupVisible={mergedPopupVisible}
         colorScheme="white"
@@ -370,7 +371,7 @@ export const SingleQuarterPicker = forwardRef<
             onPressEnter={onPressEnter}
             onClear={onClear}
             allowClear={allowClear}
-            editable={editable}
+            editable={editable || !readonly}
             suffixIcon={suffixIcon}
           />
         </div>

packages/date-picker/src/single-week-picker.tsx

@@ -60,6 +60,7 @@ export const SingleWeekPicker = forwardRef<
     colorScheme = "blue",
     inputSuffix,
     onOk,
+    readonly = false,
   } = props
 
   const refInput = useRef<HTMLInputElement>(null)
@@ -343,7 +344,7 @@ export const SingleWeekPicker = forwardRef<
         }
         trigger="click"
         position={position}
-        disabled={disabled}
+        disabled={disabled || readonly}
         onVisibleChange={visibleChange}
         popupVisible={mergedPopupVisible}
         colorScheme="white"
@@ -368,7 +369,7 @@ export const SingleWeekPicker = forwardRef<
             onPressEnter={onPressEnter}
             onClear={onClear}
             allowClear={allowClear}
-            editable={editable}
+            editable={editable || !readonly}
             suffixIcon={suffixIcon}
           />
         </div>

packages/divider/src/style.ts

@@ -113,5 +113,6 @@ export function applyTextStyle(
     margin-left: 16px;
     margin-right: 16px;
     font-size: ${fs};
+    white-space: nowrap;
   `
 }

packages/icon/src/icons/caret-right.tsx

@@ -3,14 +3,7 @@ import { createIcon } from "../create-icon"
 export const CaretRightIcon = createIcon({
   title: "CaretRightIcon",
   viewBox: "0 0 8 8",
-  path: (
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M1.954 6.727A.3.3 0 0 1 1.5 6.47V1.53a.3.3 0 0 1 .454-.257l3.974 2.384a.4.4 0 0 1 0 .686L1.954 6.727z"
-      fill="currentColor"
-    />
-  ),
+  path: <path d="M2.5 6V2L5.5 4L2.5 6Z" fill="currentColor" />,
 })
 
 CaretRightIcon.displayName = "CaretRightIcon"

packages/icon/src/icons/configuration.tsx

@@ -0,0 +1,48 @@
+import { createIcon } from "../create-icon"
+
+export const ConfigurationIcon = createIcon({
+  title: "configuration",
+  viewBox: "0 0 16 16",
+  path: (
+    <>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.83854 3H2.75C2.33579 3 2 3.33579 2 3.75C2 4.16421 2.33579 4.5 2.75 4.5H9.83854C9.63094 4.31676 9.5 4.04867 9.5 3.75C9.5 3.45133 9.63094 3.18324 9.83854 3ZM11.1615 4.5C11.3691 4.31676 11.5 4.04867 11.5 3.75C11.5 3.45133 11.3691 3.18324 11.1615 3H13.25C13.6642 3 14 3.33579 14 3.75C14 4.16421 13.6642 4.5 13.25 4.5H11.1615Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.83854 7.25H2.75C2.33579 7.25 2 7.58579 2 8C2 8.41421 2.33579 8.75 2.75 8.75H4.83854C4.63094 8.56676 4.5 8.29867 4.5 8C4.5 7.70133 4.63094 7.43324 4.83854 7.25ZM6.16146 8.75C6.36906 8.56676 6.5 8.29867 6.5 8C6.5 7.70133 6.36906 7.43324 6.16146 7.25H13.25C13.6642 7.25 14 7.58579 14 8C14 8.41421 13.6642 8.75 13.25 8.75H6.16146Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.83854 11.5H2.75C2.33579 11.5 2 11.8358 2 12.25C2 12.6642 2.33579 13 2.75 13H9.83854C9.63094 12.8168 9.5 12.5487 9.5 12.25C9.5 11.9513 9.63094 11.6832 9.83854 11.5ZM11.1615 13C11.3691 12.8168 11.5 12.5487 11.5 12.25C11.5 11.9513 11.3691 11.6832 11.1615 11.5H13.25C13.6642 11.5 14 11.8358 14 12.25C14 12.6642 13.6642 13 13.25 13H11.1615Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.5 2.75C9.94772 2.75 9.5 3.19772 9.5 3.75C9.5 4.30228 9.94772 4.75 10.5 4.75C11.0523 4.75 11.5 4.30228 11.5 3.75C11.5 3.19772 11.0523 2.75 10.5 2.75ZM8.5 3.75C8.5 2.64543 9.39543 1.75 10.5 1.75C11.6046 1.75 12.5 2.64543 12.5 3.75C12.5 4.85457 11.6046 5.75 10.5 5.75C9.39543 5.75 8.5 4.85457 8.5 3.75Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.5 10.25C9.39543 10.25 8.5 11.1454 8.5 12.25C8.5 13.3546 9.39543 14.25 10.5 14.25C11.6046 14.25 12.5 13.3546 12.5 12.25C12.5 11.1454 11.6046 10.25 10.5 10.25ZM9.5 12.25C9.5 11.6977 9.94772 11.25 10.5 11.25C11.0523 11.25 11.5 11.6977 11.5 12.25C11.5 12.8023 11.0523 13.25 10.5 13.25C9.94772 13.25 9.5 12.8023 9.5 12.25Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.5 7C4.94772 7 4.5 7.44772 4.5 8C4.5 8.55228 4.94772 9 5.5 9C6.05228 9 6.5 8.55228 6.5 8C6.5 7.44772 6.05228 7 5.5 7ZM3.5 8C3.5 6.89543 4.39543 6 5.5 6C6.60457 6 7.5 6.89543 7.5 8C7.5 9.10457 6.60457 10 5.5 10C4.39543 10 3.5 9.10457 3.5 8Z"
+        fill="currentColor"
+      />
+    </>
+  ),
+})
+
+ConfigurationIcon.displayName = "ConfigurationIcon"

packages/icon/src/icons/copy.tsx

@@ -14,9 +14,8 @@ export const CopyIcon = createIcon({
         stroke="currentColor"
       />
       <path
-        d="M5.5 3.5H11.5C12.0523 3.5 12.5 3.94772 12.5 4.5V10.5"
+        d="M6 3.5H10.5C11.6046 3.5 12.5 4.39543 12.5 5.5V10"
         stroke="currentColor"
-        strokeLinecap="round"
       />
     </>
   ),

packages/icon/src/icons/docs.tsx

@@ -2,12 +2,12 @@ import { createIcon } from "../create-icon"
 
 export const DocsIcon = createIcon({
   title: "DocsIcon",
-  viewBox: "0 0 12 12",
+  viewBox: "0 0 16 16",
   path: (
     <path
       fillRule="evenodd"
       clipRule="evenodd"
-      d="M6.5 5a.5.5 0 0 1-.5-.5V2H3v8h6V5H6.5zm3.5-.5v6a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h4l.5.5L9.5 4l.5.5zM8.086 4 7 2.914V4h1.086zM4 7V6h4v1H4zm0 2h3V8H4v1z"
+      d="M8.5 7C8.22386 7 8 6.77614 8 6.5V4L5 4L5 12L11 12L11 7L8.5 7ZM12 6.5V7L12 12.5C12 12.7761 11.7761 13 11.5 13L4.5 13C4.22386 13 4 12.7761 4 12.5L4 3.5C4 3.22386 4.22386 3 4.5 3L8 3L8.5 3L9 3.5L11.5 6L12 6.5ZM10.0858 6L9 4.91421V6H10.0858ZM6 9V8L10 8V9H6ZM6 11H9V10H6V11Z"
       fill="currentColor"
     />
   ),

packages/icon/src/index.ts

@@ -9,6 +9,7 @@ export * from "./icons/image-default"
 export * from "./icons/image-error"
 export * from "./icons/loading"
 export * from "./icons/copy"
+export * from "./icons/configuration"
 export * from "./icons/eye-on"
 export * from "./icons/eye-off"
 export * from "./icons/error-circle"

packages/link/src/style.ts

@@ -38,12 +38,12 @@ export function applyLinkContainer(
     transition: background-color 200ms ease-in-out;
     vertical-align: middle;
     border-radius: 4px;
-    display: inline-flex;
-    align-items: center;
-    flex-direction: row;
     padding: 1px 4px;
     font-size: 14px;
     line-height: 22px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
     ${hoverCss};
   `
 }

packages/select/src/multiple-select.tsx

@@ -222,9 +222,7 @@ export const MultipleSelect = forwardRef<HTMLDivElement, SelectProps>(
               inputTagRef.current?.focus()
             }}
             onClickItem={(key) => {
-              const option = finalOptions.find(
-                (option) => String(option.value) === key,
-              )
+              const option = finalOptions.find((option) => option.value === key)
               if (option) {
                 if (labelInValue) {
                   let selectedValue = (finalValue as SelectOptionObject[]).find(

packages/select/src/single-select.tsx

@@ -240,9 +240,7 @@ export const SingleSelect = forwardRef<HTMLInputElement, SelectProps>(
           <DropList
             maxH="264px"
             onClickItem={(key, children) => {
-              const option = finalOptions.find(
-                (option) => String(option.value) === key,
-              )
+              const option = finalOptions.find((option) => option.value === key)
               if (option !== undefined) {
                 if (labelInValue) {
                   if (value === undefined) {