perf(ui:select): optimize performance

Author: xiejay97

.versionrc

@@ -2,11 +2,11 @@
   "types": [
     { "type": "feat", "section": "Features" },
     { "type": "fix", "section": "Bug Fixes" },
-    { "type": "chore", "section": "Miscellaneous Chores", "hidden": false },
-    { "type": "docs", "section": "Miscellaneous Chores", "hidden": false },
-    { "type": "style", "section": "Miscellaneous Chores", "hidden": false },
-    { "type": "refactor", "section": "Miscellaneous Chores", "hidden": false },
-    { "type": "perf", "section": "Miscellaneous Chores", "hidden": false },
-    { "type": "test", "section": "Miscellaneous Chores", "hidden": false }
+    { "type": "chore", "hidden": true },
+    { "type": "docs", "hidden": true },
+    { "type": "style", "hidden": true },
+    { "type": "refactor", "hidden": true },
+    { "type": "perf", "hidden": true },
+    { "type": "test", "hidden": true }
   ]
 }

package.json

@@ -28,7 +28,7 @@
     "check-update": "yarn upgrade-interactive --latest"
   },
   "dependencies": {
-    "core-js": "^3.20.2",
+    "core-js": "^3.20.3",
     "highlight.js": "^11.4.0",
     "i18next": "^21.6.6",
     "immer": "^9.0.12",
@@ -46,16 +46,16 @@
   "devDependencies": {
     "@commitlint/cli": "^16.0.2",
     "@commitlint/config-conventional": "^16.0.0",
-    "@nrwl/cli": "^13.4.4",
-    "@nrwl/cypress": "^13.4.4",
-    "@nrwl/eslint-plugin-nx": "^13.4.4",
-    "@nrwl/jest": "^13.4.4",
-    "@nrwl/linter": "^13.4.4",
+    "@nrwl/cli": "^13.4.5",
+    "@nrwl/cypress": "^13.4.5",
+    "@nrwl/eslint-plugin-nx": "^13.4.5",
+    "@nrwl/jest": "^13.4.5",
+    "@nrwl/linter": "^13.4.5",
     "@nrwl/nx-cloud": "13.0.2",
-    "@nrwl/react": "^13.4.4",
-    "@nrwl/tao": "^13.4.4",
-    "@nrwl/web": "^13.4.4",
-    "@nrwl/workspace": "^13.4.4",
+    "@nrwl/react": "^13.4.5",
+    "@nrwl/tao": "^13.4.5",
+    "@nrwl/web": "^13.4.5",
+    "@nrwl/workspace": "^13.4.5",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "13.0.0-alpha.5",
     "@testing-library/react-hooks": "^7.0.2",
@@ -71,7 +71,7 @@
     "babel-jest": "^27.4.6",
     "cypress": "^9.2.1",
     "dotenv": "^11.0.0",
-    "eslint": "^8.6.0",
+    "eslint": "^8.7.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-import": "^2.25.4",
@@ -97,7 +97,7 @@
     "stylelint-config-standard": "^24.0.0",
     "stylelint-order": "^5.0.0",
     "stylelint-scss": "^4.1.0",
-    "ts-jest": "^27.1.2",
+    "ts-jest": "^27.1.3",
     "ts-node": "^10.4.0",
     "typescript": "~4.5.2",
     "yaml-front-matter": "^4.1.1"

packages/ui/src/components/_select-box/SelectBox.tsx

@@ -14,6 +14,7 @@ export interface DSelectBoxProps extends React.HTMLAttributes<HTMLDivElement> {
   dClearIcon?: React.ReactNode;
   dSize?: 'smaller' | 'larger';
   dPlaceholder?: string;
+  dContentTitle?: string;
   dDisabled?: boolean;
   dLoading?: boolean;
   onClear?: () => void;
@@ -29,6 +30,7 @@ const SelectBox: React.ForwardRefRenderFunction<HTMLDivElement, DSelectBoxProps>
     dClearIcon,
     dSize,
     dPlaceholder,
+    dContentTitle,
     dDisabled = false,
     dLoading = false,
     onClear,
@@ -136,7 +138,9 @@ const SelectBox: React.ForwardRefRenderFunction<HTMLDivElement, DSelectBoxProps>
           onChange={handleSearchChange}
         ></input>
       ) : (
-        <div className={`${dPrefix}select-box__content`}>{children}</div>
+        <div className={`${dPrefix}select-box__content`} title={dContentTitle}>
+          {children}
+        </div>
       )}
       <div className={`${dPrefix}select-box__suffix`}>{dSuffix}</div>
       {!(dSearchable && dExpanded) && !children && dPlaceholder && (