@antscorp/antsomi-ui 1.3.7-beta.67 → 1.3.7-beta.69

package/es/components/molecules/Select/Select.js

@@ -9,7 +9,7 @@ import Icon from '@antscorp/icons';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 // Styled
-import { StyledTag, TagCloseBtn } from './styled';
+import { StyledSelect, StyledTag, TagCloseBtn } from './styled';
 const tagRender = (props) => {
     const { label, closable, onClose } = props;
     const onPreventMouseDown = (event) => {
@@ -22,7 +22,7 @@ const tagRender = (props) => {
 };
 const CustomSelect = props => {
     const { label, labelProps, ...rest } = props;
-    return (_jsxs(Flex, { vertical: true, gap: 4, children: [typeof label === 'string' ? _jsx(Text, { ...labelProps, children: label }) : label, _jsx(AntdSelect, { ...rest })] }));
+    return (_jsxs(Flex, { vertical: true, gap: 4, children: [typeof label === 'string' ? _jsx(Text, { ...labelProps, children: label }) : label, _jsx(StyledSelect, { ...rest })] }));
 };
 const Select = CustomSelect;
 Select.OptGroup = AntdSelect.OptGroup;

package/es/components/molecules/Select/styled.d.ts

@@ -1,4 +1,6 @@
-/// <reference types="react" />
+import type { ComponentType } from 'react';
+import { type SelectProps as AntdSelectProps } from 'antd';
+export declare const StyledSelect: import("styled-components").StyledComponent<ComponentType<AntdSelectProps<any, import("rc-select/lib/Select").DefaultOptionType>>, any, {}, never>;
 export declare const StyledTag: import("styled-components").StyledComponent<import("antd/lib").TagType & {
     List: import("react").FC<import("../../atoms/Tag/Tag").TagListProps>;
 }, any, {}, never>;

package/es/components/molecules/Select/styled.js

@@ -1,9 +1,55 @@
 // Libraries
 import styled from 'styled-components';
+import { Select as AntdSelect } from 'antd';
 // Components
 import { Tag } from '../../atoms/Tag';
 // Constants
 import { THEME } from '../../../constants';
+export const StyledSelect = styled(AntdSelect) `
+  &.antsomi-select-single {
+    min-height: 34px;
+  }
+
+  &.antsomi-select-multiple .antsomi-select-selector {
+    min-height: 34px;
+  }
+
+  &.antsomi-select-multiple:has(.antsomi-select-selection-overflow-item-rest) {
+    .antsomi-select-selection-overflow {
+      gap: 0;
+      flex-wrap: nowrap;
+    }
+
+    .antsomi-select-selection-overflow-item:not(.antsomi-select-selection-overflow-item-suffix) {
+      padding-right: 5px;
+    }
+
+    .antsomi-select-selection-overflow-item-rest .antsomi-select-selection-item {
+      height: auto;
+      margin: 0;
+      padding: 3px 10px;
+      border: 0;
+      border-radius: 15px;
+      background: ${THEME.token?.blue2};
+      font-size: ${THEME.token?.fontSize}px;
+      line-height: 1.8;
+    }
+
+    .antsomi-select-selection-overflow-item-rest .antsomi-select-selection-item-content {
+      margin: 0;
+    }
+
+    .antsomi-select-selection-overflow-item-suffix {
+      max-width: calc(100% - 80px);
+    }
+
+    .antsomi-select-selection-search,
+    .antsomi-select-selection-search-input {
+      min-width: 0;
+      max-width: 100%;
+    }
+  }
+`;
 export const StyledTag = styled(Tag) `
   position: relative;
   background-color: ${THEME.token?.blue2} !important;
@@ -14,6 +60,7 @@ export const StyledTag = styled(Tag) `
   font-size: ${THEME.token?.fontSize}px !important;
 
   .antsomi-tag-close-icon {
+    right: 6px !important;
     opacity: 0;
     transition: all 0.3s;
   }
@@ -25,16 +72,13 @@ export const StyledTag = styled(Tag) `
   }
 `;
 export const TagCloseBtn = styled.div `
-  position: absolute;
-  top: 3px;
-  right: 3px;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 16px;
-  height: 16px;
+  width: 20px;
+  height: 20px;
   border-radius: 100%;
-  border: 2.5px solid ${p => (p.borderColor ? p.borderColor : '#cae5fe')};
+  border: 2px solid ${p => (p.borderColor ? p.borderColor : '#cae5fe')};
   background-color: #fff;
   color: ${THEME.token?.colorPrimary};
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.7-beta.67",
+  "version": "1.3.7-beta.69",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -19,7 +19,6 @@
   "unpkg": "dist/index.js",
   "types": "es/index.d.ts",
   "scripts": {
-    "prepublishOnly": "yarn && yarn build:es",
     "build:es": "npm run clean && npm run copy-files && npm run ts-compile",
     "clean": "rimraf dist lib es",
     "dev": "vite",
@@ -180,11 +179,12 @@
     "@babel/preset-typescript": "^7.23.3",
     "@commitlint/cli": "17.5.0",
     "@commitlint/config-conventional": "17.4.4",
-    "@storybook/addon-docs": "^9.1.10",
-    "@storybook/addon-links": "^9.1.10",
-    "@storybook/addon-styling-webpack": "^2.0.0",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
-    "@storybook/react-webpack5": "^9.1.10",
+    "@storybook/addon-docs": "10.5.10",
+    "@storybook/addon-links": "10.5.10",
+    "@storybook/addon-mcp": "0.7.0",
+    "@storybook/addon-styling-webpack": "3.0.2",
+    "@storybook/addon-webpack5-compiler-babel": "4.0.1",
+    "@storybook/react-webpack5": "10.5.10",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.0",
@@ -235,7 +235,7 @@
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^9.1.10",
+    "eslint-plugin-storybook": "10.5.10",
     "file-loader": "^6.2.0",
     "googleapis": "^142.0.0",
     "husky": "^8.0.3",
@@ -252,7 +252,7 @@
     "react-router-dom": "5.1.0 || 6.14.2",
     "sass": "^1.77.8",
     "sass-loader": "^16.0.1",
-    "storybook": "^9.1.10",
+    "storybook": "10.5.10",
     "style-loader": "^4.0.0",
     "styled-components": "^5.3.9",
     "terser-webpack-plugin": "^5.3.10",