farhan/feat: Dropdown Component (binary-com#10723)

* feat: created dropdown component

* chore: remove icon right padding, cleaning styles

* chore: add transition to icon

* refactor: styles

* chore: default selected item prop

* chore: make onselect required

* chore: changes dropdown styles

* chore: change types create a util

packages/wallets/package.json

@@ -16,6 +16,7 @@
         "@deriv/utils": "^1.0.0",
         "@tanstack/react-table": "^8.10.3",
         "classnames": "^2.2.6",
+        "downshift": "^8.2.2",
         "embla-carousel-react": "^8.0.0-rc12",
         "formik": "^2.1.4",
         "moment": "^2.29.2",
@@ -28,6 +29,7 @@
         "usehooks-ts": "^2.7.0"
     },
     "devDependencies": {
+        "@types/css-modules": "^1.0.2",
         "@types/react-dom": "^18.0.0",
         "@typescript-eslint/eslint-plugin": "5.45.0",
         "@typescript-eslint/parser": "5.45.0",
@@ -38,9 +40,8 @@
         "eslint-plugin-sort-destructure-keys": "^1.5.0",
         "eslint-plugin-typescript-sort-keys": "^2.3.0",
         "typescript": "^4.6.3",
-        "@types/css-modules": "^1.0.2",
         "webpack": "^5.81.0",
-        "webpack-cli": "^4.7.2",
-        "webpack-bundle-analyzer": "^4.3.0"
+        "webpack-bundle-analyzer": "^4.3.0",
+        "webpack-cli": "^4.7.2"
     }
 }

packages/wallets/src/components/Base/WalletDropdown/WalletDropdown.scss

@@ -0,0 +1,129 @@
+.wallets-dropdown {
+    min-width: 12rem;
+    max-width: 28rem;
+    position: relative;
+
+    &__button {
+        all: unset;
+        margin: auto;
+        transform: rotate(0);
+        transform-origin: 50% 45%;
+        transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
+
+        &--active {
+            transform: rotate(180deg);
+        }
+    }
+
+    &__content {
+        height: 4rem;
+        width: 100%;
+        border-radius: 0.4rem;
+        padding: 1rem 1.6rem;
+        border: 0.1rem solid var(--system-light-5-active-background, #d6dadb);
+        background: var(--system-light-8-primary-background, #fff);
+        display: flex;
+        gap: 0.8rem;
+        align-items: center;
+    }
+
+    &__content:has(&__field:focus) {
+        border: 0.1rem solid var(--brand-blue, #85acb0);
+    }
+
+    &__field {
+        font-family: inherit;
+        outline: 0;
+        font-size: 1.4rem;
+        color: var(--system-light-2-general-text, #333);
+        transition: border-color 0.2s;
+    }
+
+    &__field::placeholder {
+        color: transparent;
+    }
+
+    &__field:placeholder-shown ~ &__label {
+        font-size: 1.4rem;
+        cursor: text;
+        top: 30%;
+        padding: 0;
+    }
+
+    &__field:placeholder-shown ~ &__label--with-icon {
+        left: 4.4rem;
+    }
+
+    label,
+    &__field:focus ~ &__label {
+        position: absolute;
+        top: -10%;
+        display: block;
+        transition: 0.2s;
+        font-size: 1rem;
+        color: var(--system-light-3-less-prominent-text, #999);
+        background: var(--system-light-8-primary-background, #fff);
+        padding-inline: 0.4rem;
+        left: 1.6rem;
+    }
+
+    &__field:focus ~ &__label {
+        color: var(--brand-blue, #85acb0);
+    }
+
+    &__items {
+        position: absolute;
+        top: 100%;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        z-index: 2;
+        margin-top: 0.4rem;
+        border-radius: 0.4rem;
+        background: var(--system-light-8-primary-background, #fff);
+        box-shadow: 0 3.2rem 6.4rem 0 rgba(14, 14, 14, 0.14);
+        overflow-y: auto;
+
+        & > :first-child {
+            border-radius: 0.4rem 0.4rem 0 0;
+        }
+
+        & > :last-child {
+            border-radius: 0 0 0.4rem 0.4rem;
+        }
+
+        &--sm {
+            max-height: 22rem;
+        }
+
+        &--md {
+            max-height: 42rem;
+        }
+
+        &--lg {
+            max-height: 66rem;
+        }
+    }
+
+    &__icon {
+        width: 1.6rem;
+        height: 1.6rem;
+        margin-left: 0.4rem;
+    }
+
+    &__item {
+        padding: 10px 16px;
+        width: 100%;
+        z-index: 2;
+
+        &:hover:not(&--active) {
+            cursor: pointer;
+            background: var(--system-light-6-hover-background, #e6e9e9);
+        }
+
+        &--active {
+            background: var(--system-light-5-active-background, #d6dadb);
+        }
+    }
+}