Files
cloudbeaver/common-react/@dbeaver/ui-kit/src/Select/Select.tsx
T
Sychev Andrey 584e5bb260 103 create radio and radio group components (#3313)
* refactor: rename css variable in order to be more descriptive and stick to the naming convention

* refactor: unify controls, add new global control css variables

* feat: add radio component

* docs: add radio stories

* docs: add input docs story

* docs: add simple form story

* refactor: change default radio dot size

* refactor: change class name for radio children wrapper

* refactor: don't reexport inner radio elements

* refactor: simplify RadioGroup interface by removing items props, make label(any) required

The radiogroup must have an accessible name either by a visible label referenced by aria-labelledby or has a label specified with aria-label.
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/radiogroup_role

* refactor: use label wrapper for input component to simplify structure

* refactor: add classname for radio group container
2025-03-21 18:52:39 +08:00

80 lines
2.1 KiB
TypeScript

/*
* CloudBeaver - Cloud Database Manager
* Copyright (C) 2020-2025 DBeaver Corp and others
*
* Licensed under the Apache License, Version 2.0.
* you may not use this file except in compliance with the License.
*/
import {
SelectProvider as AriaSelectProvider,
Select as AriaSelect,
SelectPopover as AriaSelectPopover,
SelectItem as AriaSelectItem,
SelectLabel as AriaSelectLabel,
SelectValue as AriaSelectValue,
SelectArrow as AriaSelectArrow,
type SelectProviderProps,
type SelectProps,
type SelectLabelProps,
type SelectPopoverProps,
type SelectItemProps,
type SelectValueProps,
type SelectArrowProps,
useSelectContext,
useSelectStore,
} from '@ariakit/react';
import './Select.css';
export function SelectProvider({ children, ...props }: SelectProviderProps) {
return <AriaSelectProvider {...props}>{children}</AriaSelectProvider>;
}
export function Select({ className, ...props }: SelectProps) {
return <AriaSelect className={`dbv-kit-select ${className || ''}`} {...props} />;
}
export function SelectPopover({ children, className, ...props }: SelectPopoverProps) {
return (
<AriaSelectPopover className={`dbv-kit-select__popover ${className || ''}`} sameWidth={props.sameWidth ?? true} {...props}>
{children}
</AriaSelectPopover>
);
}
export function SelectItem({ children, className, ...props }: SelectItemProps) {
return (
<AriaSelectItem className={`dbv-kit-select__item ${className || ''}`} {...props}>
{children}
</AriaSelectItem>
);
}
export function SelectLabel({ children, className, ...props }: SelectLabelProps) {
return (
<AriaSelectLabel className={`dbv-kit-select__label ${className || ''}`} {...props}>
{children}
</AriaSelectLabel>
);
}
export {
useSelectContext,
useSelectStore,
type SelectProviderProps,
type SelectProps,
type SelectLabelProps,
type SelectPopoverProps,
type SelectItemProps,
type SelectValueProps,
type SelectArrowProps,
};
Select.Provider = SelectProvider;
Select.Popover = SelectPopover;
Select.Item = SelectItem;
Select.Label = SelectLabel;
Select.Value = AriaSelectValue;
Select.Arrow = AriaSelectArrow;