Merged in chore/sw-3145-move-deprecated-select (pull request #2518)
chore(SW-3145): Move DeprecatedSelect to design-system * Move DeprecatedSelect to design-system Approved-by: Linus Flood
This commit is contained in:
Anton Gunnarsson
@@ -0,0 +1,7 @@
|
||||
.chevron {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
div[data-rac][data-open='true'] .chevron {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import { IconProps } from '../../Icons'
|
||||
import { MaterialIcon } from '../../Icons/MaterialIcon'
|
||||
import styles from './chevron.module.css'
|
||||
|
||||
export default function SelectChevron(props: IconProps) {
|
||||
return (
|
||||
<span aria-hidden="true" className={styles.chevron}>
|
||||
<MaterialIcon
|
||||
icon="keyboard_arrow_down"
|
||||
color={props.color ?? 'Icon/Default'}
|
||||
size={20}
|
||||
/>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
164
packages/design-system/lib/components/DeprecatedSelect/index.tsx
Normal file
164
packages/design-system/lib/components/DeprecatedSelect/index.tsx
Normal file
@@ -0,0 +1,164 @@
|
||||
'use client'
|
||||
import { ReactElement, useState } from 'react'
|
||||
import {
|
||||
Button,
|
||||
type Key,
|
||||
ListBox,
|
||||
ListBoxItem,
|
||||
Popover,
|
||||
Select as ReactAriaSelect,
|
||||
SelectValue,
|
||||
} from 'react-aria-components'
|
||||
|
||||
import SelectChevron from './SelectChevron'
|
||||
|
||||
import styles from './select.module.css'
|
||||
import Body from '../Body'
|
||||
import { Label } from '../Label'
|
||||
|
||||
interface SelectProps
|
||||
extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'onSelect'> {
|
||||
defaultSelectedKey?: Key
|
||||
items: { label: string; value: Key }[]
|
||||
label: string
|
||||
name: string
|
||||
onSelect: (key: Key) => void
|
||||
value?: string | number
|
||||
maxHeight?: number
|
||||
showRadioButton?: boolean
|
||||
discreet?: boolean
|
||||
isNestedInModal?: boolean
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
optionsIcon?: ReactElement<any>
|
||||
}
|
||||
|
||||
type SelectPortalContainer = HTMLDivElement | undefined
|
||||
type SelectPortalContainerArgs = HTMLDivElement | null
|
||||
|
||||
/**
|
||||
* @deprecated Do not use.
|
||||
*/
|
||||
export default function Select({
|
||||
className = '',
|
||||
'aria-label': ariaLabel,
|
||||
defaultSelectedKey,
|
||||
items,
|
||||
label,
|
||||
name,
|
||||
onSelect,
|
||||
disabled,
|
||||
required = false,
|
||||
tabIndex,
|
||||
value,
|
||||
maxHeight,
|
||||
showRadioButton = false,
|
||||
discreet = false,
|
||||
isNestedInModal = false,
|
||||
optionsIcon,
|
||||
}: SelectProps) {
|
||||
const [rootDiv, setRootDiv] = useState<SelectPortalContainer>(undefined)
|
||||
const setOverflowVisible = useSetOverflowVisibleOnRA(isNestedInModal)
|
||||
|
||||
function setRef(node: SelectPortalContainerArgs) {
|
||||
if (node) {
|
||||
setRootDiv(node)
|
||||
}
|
||||
}
|
||||
|
||||
function handleOnSelect(key: Key) {
|
||||
onSelect(key)
|
||||
}
|
||||
|
||||
let chevronProps = {}
|
||||
|
||||
if (discreet) {
|
||||
chevronProps = { color: 'baseButtonTextOnFillNormal' }
|
||||
} else if (disabled) {
|
||||
chevronProps = { color: 'disabled' }
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`${styles.container} ${className}`} ref={setRef}>
|
||||
<ReactAriaSelect
|
||||
aria-label={ariaLabel}
|
||||
className={`${styles.select} ${discreet ? styles.discreet : ''} select-container`}
|
||||
defaultSelectedKey={defaultSelectedKey}
|
||||
name={name}
|
||||
onSelectionChange={handleOnSelect}
|
||||
selectedKey={value as Key}
|
||||
onOpenChange={setOverflowVisible}
|
||||
isDisabled={disabled}
|
||||
>
|
||||
<Body asChild fontOnly>
|
||||
<Button
|
||||
className={`${styles.input} select-button`}
|
||||
data-testid={name}
|
||||
>
|
||||
<SelectValue tabIndex={tabIndex}>
|
||||
{({ selectedText }) => (
|
||||
<>
|
||||
<Label
|
||||
required={required}
|
||||
size={discreet ? 'discreet' : 'regular'}
|
||||
>
|
||||
{label}
|
||||
{discreet && `:`}
|
||||
</Label>
|
||||
{selectedText && (
|
||||
<Body className={optionsIcon ? styles.iconLabel : ''}>
|
||||
{optionsIcon ? optionsIcon : null}
|
||||
{selectedText}
|
||||
</Body>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</SelectValue>
|
||||
<SelectChevron {...chevronProps} />
|
||||
</Button>
|
||||
</Body>
|
||||
<Body asChild fontOnly>
|
||||
<Popover
|
||||
className={styles.popover}
|
||||
placement="bottom"
|
||||
shouldFlip={false}
|
||||
/**
|
||||
* react-aria uses portals to render Popover in body
|
||||
* unless otherwise specified. We need it to be contained
|
||||
* by this component to both access css variables assigned
|
||||
* on the container as well as to not overflow it at any time.
|
||||
*/
|
||||
UNSTABLE_portalContainer={rootDiv}
|
||||
maxHeight={maxHeight}
|
||||
>
|
||||
<ListBox className={styles.listBox}>
|
||||
{items.map((item) => (
|
||||
<ListBoxItem
|
||||
aria-label={item.label}
|
||||
className={`${styles.listBoxItem} ${showRadioButton && styles.showRadioButton} ${optionsIcon && styles.iconLabel}`}
|
||||
id={item.value}
|
||||
key={`${item.value}_${item.label}`}
|
||||
data-testid={item.label}
|
||||
>
|
||||
{optionsIcon ? optionsIcon : null}
|
||||
{item.label}
|
||||
</ListBoxItem>
|
||||
))}
|
||||
</ListBox>
|
||||
</Popover>
|
||||
</Body>
|
||||
</ReactAriaSelect>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function useSetOverflowVisibleOnRA(isNestedInModal?: boolean) {
|
||||
function setOverflowVisible(isOpen: boolean) {
|
||||
if (isOpen) {
|
||||
document.body.style.overflow = 'visible'
|
||||
} else if (!isNestedInModal) {
|
||||
document.body.style.overflow = ''
|
||||
}
|
||||
}
|
||||
|
||||
return setOverflowVisible
|
||||
}
|
||||
@@ -0,0 +1,125 @@
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.select {
|
||||
border: 1px solid var(--Base-Border-Normal);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x-half);
|
||||
}
|
||||
|
||||
.select[data-focused='true'] {
|
||||
border: 1px solid var(--Border-Interactive-Focus);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.select[data-focused='true'].discreet {
|
||||
border: 1px solid transparent;
|
||||
outline: none;
|
||||
}
|
||||
.select[data-focus-visible='true'].discreet {
|
||||
border: 1px solid var(--Border-Interactive-Focus);
|
||||
}
|
||||
|
||||
.select.discreet {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.select.discreet .input {
|
||||
background-color: unset;
|
||||
color: var(--Base-Text-High-contrast);
|
||||
gap: var(--Spacing-x1);
|
||||
}
|
||||
|
||||
.select[data-disabled],
|
||||
.select[data-disabled] .input {
|
||||
background-color: var(--UI-Input-Controls-Surface-Disabled);
|
||||
border: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.iconLabel {
|
||||
display: flex;
|
||||
gap: var(--Spacing-x-half);
|
||||
}
|
||||
|
||||
.input {
|
||||
align-items: center;
|
||||
background-color: var(--UI-Opacity-White-100);
|
||||
border: none;
|
||||
border-radius: var(--Corner-radius-md);
|
||||
color: var(--UI-Text-High-contrast);
|
||||
display: flex;
|
||||
gap: var(--Spacing-x-half);
|
||||
height: 60px;
|
||||
outline: none;
|
||||
padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
|
||||
text-align: left;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.input :global(.react-aria-SelectValue) {
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 0 0;
|
||||
}
|
||||
|
||||
.select.discreet :global(.react-aria-SelectValue) {
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
flex-direction: row;
|
||||
font-weight: 500;
|
||||
gap: var(--Spacing-x-half);
|
||||
}
|
||||
|
||||
.popover {
|
||||
background-color: var(--Main-Grey-White);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x1);
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.listBox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x1);
|
||||
padding: var(--Spacing-x2);
|
||||
}
|
||||
|
||||
.listBoxItem {
|
||||
padding: var(--Spacing-x1);
|
||||
}
|
||||
|
||||
.listBoxItem[data-focused='true'],
|
||||
.listBoxItem[data-selected='true'] {
|
||||
background: var(--UI-Input-Controls-Surface-Hover);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.listBoxItem.showRadioButton {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.listBoxItem.showRadioButton:before {
|
||||
flex-shrink: 0;
|
||||
content: '';
|
||||
margin-right: var(--Spacing-x-one-and-half);
|
||||
background-color: white;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
box-shadow: inset 0 0 0 2px var(--Base-Border-Normal);
|
||||
}
|
||||
|
||||
.listBoxItem[data-selected='true'].showRadioButton:before {
|
||||
box-shadow: inset 0 0 0 8px var(--Surface-UI-Fill-Active);
|
||||
}
|
||||
@@ -11,6 +11,7 @@
|
||||
"./ChipButton": "./dist/components/ChipButton/index.js",
|
||||
"./ChipLink": "./dist/components/ChipLink/index.js",
|
||||
"./Chips": "./dist/components/Chips/index.js",
|
||||
"./DeprecatedSelect": "./dist/components/DeprecatedSelect/index.js",
|
||||
"./Divider": "./dist/components/Divider/index.js",
|
||||
"./Footnote": "./dist/components/Footnote/index.js",
|
||||
"./Form/Checkbox": "./dist/components/Form/Checkbox/index.js",
|
||||
|
||||
Reference in New Issue
Block a user