From 0a6c9a08381feae148286ab2075497dc347ce587 Mon Sep 17 00:00:00 2001 From: mbauchet <90607026+mbauchet@users.noreply.github.com> Date: Mon, 20 May 2024 17:34:29 +0200 Subject: [PATCH] fix: select wrong alignment (#1053) * add relative div for select elements * fix searchSelect error --------- Co-authored-by: Maxime BAUCHET Co-authored-by: severinlandolt --- .github/ISSUE_TEMPLATE/bug-report.yaml | 2 +- .github/ISSUE_TEMPLATE/config.yaml | 2 +- .github/workflows/build.yaml | 6 +- pnpm-lock.yaml | 16 +- .../MultiSelect/MultiSelect.tsx | 434 +++++++++--------- .../SearchSelect/SearchSelect.tsx | 288 ++++++------ .../input-elements/Select/Select.tsx | 254 +++++----- src/components/input-elements/selectUtils.ts | 2 +- 8 files changed, 507 insertions(+), 497 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/bug-report.yaml b/.github/ISSUE_TEMPLATE/bug-report.yaml index 09f752089..0b8f9c72e 100644 --- a/.github/ISSUE_TEMPLATE/bug-report.yaml +++ b/.github/ISSUE_TEMPLATE/bug-report.yaml @@ -75,4 +75,4 @@ body: - type: markdown attributes: value: | - This bug report template was inspired by the issue template from [vuejs](https://github.com/vuejs/core) \ No newline at end of file + This bug report template was inspired by the issue template from [vuejs](https://github.com/vuejs/core) diff --git a/.github/ISSUE_TEMPLATE/config.yaml b/.github/ISSUE_TEMPLATE/config.yaml index 6cbba17d2..35d9b5fe0 100644 --- a/.github/ISSUE_TEMPLATE/config.yaml +++ b/.github/ISSUE_TEMPLATE/config.yaml @@ -2,4 +2,4 @@ blank_issues_enabled: true contact_links: - name: Slack Community url: https://join.slack.com/t/tremor-community/shared_invite/zt-1u8jqmcmq-Fdr9B6MbnO7u8FkGh~2Ylg - about: Please ask and answer usage questions here. \ No newline at end of file + about: Please ask and answer usage questions here. diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml index 9c63d5501..3de29b138 100644 --- a/.github/workflows/build.yaml +++ b/.github/workflows/build.yaml @@ -8,8 +8,8 @@ on: - synchronize push: branches: - - '**' - - '!main' + - "**" + - "!main" jobs: build: @@ -32,4 +32,4 @@ jobs: - name: unit tests run: npm run tests - name: build - run: npm run build \ No newline at end of file + run: npm run build diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0605980ee..0ac4aab87 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2040,14 +2040,14 @@ packages: peerDependencies: tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1' - '@tanstack/react-virtual@3.0.1': - resolution: {integrity: sha512-IFOFuRUTaiM/yibty9qQ9BfycQnYXIDHGP2+cU+0LrFFGNhVxCXSQnaY6wkX8uJVteFEBjUondX0Hmpp7TNcag==} + '@tanstack/react-virtual@3.5.0': + resolution: {integrity: sha512-rtvo7KwuIvqK9zb0VZ5IL7fiJAEnG+0EiFZz8FUOs+2mhGqdGmjKIaT1XU7Zq0eFqL0jonLlhbayJI/J2SA/Bw==} peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - '@tanstack/virtual-core@3.0.0': - resolution: {integrity: sha512-SYXOBTjJb05rXa2vl55TTwO40A6wKu0R5i1qQwhJYNDIqaIGF7D0HsLw+pJAyi2OvntlEIVusx3xtbbgSUi6zg==} + '@tanstack/virtual-core@3.5.0': + resolution: {integrity: sha512-KnPRCkQTyqhanNC0K63GBG3wA8I+D1fQuVnAvcBF8f13akOKeQp1gSbu6f77zCxhEk727iV5oQnbHLYzHrECLg==} '@testing-library/dom@9.3.3': resolution: {integrity: sha512-fB0R+fa3AUqbLHWyxXa2kGVtf1Fe1ZZFr0Zp6AIbIAzXb2mKbEXl+PCQNUOaq5lbTab5tfctfXRNsWXxa2f7Aw==} @@ -8461,7 +8461,7 @@ snapshots: '@headlessui/react@1.7.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@tanstack/react-virtual': 3.0.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@tanstack/react-virtual': 3.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) client-only: 0.0.1 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) @@ -10108,13 +10108,13 @@ snapshots: mini-svg-data-uri: 1.4.4 tailwindcss: 3.4.3 - '@tanstack/react-virtual@3.0.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@tanstack/react-virtual@3.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@tanstack/virtual-core': 3.0.0 + '@tanstack/virtual-core': 3.5.0 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - '@tanstack/virtual-core@3.0.0': {} + '@tanstack/virtual-core@3.5.0': {} '@testing-library/dom@9.3.3': dependencies: diff --git a/src/components/input-elements/MultiSelect/MultiSelect.tsx b/src/components/input-elements/MultiSelect/MultiSelect.tsx index a25ea6582..28b7f66c2 100644 --- a/src/components/input-elements/MultiSelect/MultiSelect.tsx +++ b/src/components/input-elements/MultiSelect/MultiSelect.tsx @@ -80,80 +80,146 @@ const MultiSelect = React.forwardRef((props,
- - { - onValueChange?.(values); - setSelectedValue(values); - }) as any - } - disabled={disabled} - id={id} - multiple - {...other} - > - {({ value }) => ( - <> - 0, disabled, error), - )} - ref={listboxButtonRef} - > - {Icon && ( - + + { + onValueChange?.(values); + setSelectedValue(values); + }) as any + } + disabled={disabled} + id={id} + multiple + {...other} + > + {({ value }) => ( + <> + 0, disabled, error), + )} + ref={listboxButtonRef} + > + {Icon && ( + + + + )} +
+ {value.length > 0 ? ( +
+ {optionsAvailable + .filter((option) => value.includes(option.props.value)) + .map((option, index) => { + return ( +
+
+ {option.props.children ?? option.props.value} +
+
{ + e.preventDefault(); + const newValue = value.filter((v) => v !== option.props.value); + onValueChange?.(newValue); + setSelectedValue(newValue); + }} + > + +
+
+ ); + })} +
+ ) : ( + {placeholder} )} +
+ - ((props, )} /> - )} -
- {value.length > 0 ? ( -
- {optionsAvailable - .filter((option) => value.includes(option.props.value)) - .map((option, index) => { - return ( -
-
- {option.props.children ?? option.props.value} -
-
{ - e.preventDefault(); - const newValue = value.filter((v) => v !== option.props.value); - onValueChange?.(newValue); - setSelectedValue(newValue); - }} - > - -
-
- ); - })} -
- ) : ( - {placeholder} - )} -
- - - - + - {hasSelection && !disabled ? ( - - ) : null} - - { + e.preventDefault(); + handleReset(); + }} + > + + + ) : null} + -
- - + + + + { + if (e.code === "Space" && (e.target as HTMLInputElement).value !== "") { + e.stopPropagation(); + } + }} + onChange={(e) => setSearchQuery(e.target.value)} + value={searchQuery} /> - - { - if (e.code === "Space" && (e.target as HTMLInputElement).value !== "") { - e.stopPropagation(); - } - }} - onChange={(e) => setSearchQuery(e.target.value)} - value={searchQuery} - /> -
- - {filteredOptions} - - - - - )} - +
+ + {filteredOptions} + + + + + )} + + {error && errorMessage ? (

{errorMessage} diff --git a/src/components/input-elements/SearchSelect/SearchSelect.tsx b/src/components/input-elements/SearchSelect/SearchSelect.tsx index 24e5e84f1..faca05bf8 100644 --- a/src/components/input-elements/SearchSelect/SearchSelect.tsx +++ b/src/components/input-elements/SearchSelect/SearchSelect.tsx @@ -83,164 +83,168 @@ const SearchSelect = React.forwardRef((prop

- - { - onValueChange?.(value); - setSelectedValue(value); - }) as any - } - disabled={disabled} - id={id} - {...other} - > - {({ value }) => ( - <> - - {Icon && ( - + + { + onValueChange?.(value); + setSelectedValue(value); + }) as any + } + disabled={disabled} + id={id} + {...other} + > + {({ value }) => ( + <> + + {Icon && ( + + + + )} + + { + onSearchValueChange?.(event.target.value); + setSearchQuery(event.target.value); + }} + displayValue={(value: string) => valueToNameMapping.get(value) ?? ""} + autoComplete={autoComplete} + /> +
- +
+ + + {enableClear && selectedValue ? ( + - ) : null} - {filteredOptions.length > 0 && ( - - + ) : null} + {filteredOptions.length > 0 && ( + - {filteredOptions} - - - )} - - )} - + + {filteredOptions} + + + )} + + )} + +
{error && errorMessage ? (

{errorMessage} diff --git a/src/components/input-elements/Select/Select.tsx b/src/components/input-elements/Select/Select.tsx index b4a242233..b2fdf15f4 100644 --- a/src/components/input-elements/Select/Select.tsx +++ b/src/components/input-elements/Select/Select.tsx @@ -63,78 +63,98 @@ const Select = React.forwardRef((props, ref) => {

- - { - onValueChange?.(value); - setSelectedValue(value); - }) as any - } - disabled={disabled} - id={id} - {...other} - > - {({ value }) => ( - <> - - {Icon && ( +
+ + { + onValueChange?.(value); + setSelectedValue(value); + }) as any + } + disabled={disabled} + id={id} + {...other} + > + {({ value }) => ( + <> + + {Icon && ( + + + + )} + + {value ? valueToNameMapping.get(value) ?? placeholder : placeholder} + - ((props, ref) => { )} /> - )} - - {value ? valueToNameMapping.get(value) ?? placeholder : placeholder} - - - - - - {enableClear && selectedValue ? ( - + ) : null} + - - - ) : null} - - - {children} - - - - )} - + > + {children} + + + + )} + +
{error && errorMessage ? (

{errorMessage} diff --git a/src/components/input-elements/selectUtils.ts b/src/components/input-elements/selectUtils.ts index c20c41b16..5d016b027 100644 --- a/src/components/input-elements/selectUtils.ts +++ b/src/components/input-elements/selectUtils.ts @@ -44,7 +44,7 @@ export const getSelectButtonColors = ( ? "text-tremor-content-emphasis dark:text-dark-tremor-content-emphasis" : "text-tremor-content dark:text-dark-tremor-content", isDisabled && "text-tremor-content-subtle dark:text-dark-tremor-content-subtle", - hasError && "text-red-500", + hasError && "text-red-500 placeholder:text-red-500", hasError ? "border-red-500" : "border-tremor-border dark:border-dark-tremor-border", ); };