@baseplate-dev/ui-components
Version:
Shared UI component library
50 lines • 3.71 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ScrollArea as ScrollAreaPrimitive, Select as SelectPrimitive, } from 'radix-ui';
import { MdCheck, MdUnfoldMore } from 'react-icons/md';
import { selectCheckVariants, selectContentVariants, selectItemVariants, selectTriggerVariants, } from '#src/styles/index.js';
import { cn } from '#src/utils/index.js';
import { ScrollBar } from '../scroll-area/scroll-area.js';
/**
* Select component
*
* - Adapted styles to make full width to match input styles
* - Added max height to the content
* - Use scroll area to make the content scrollable rather than buttons
*
* https://ui.shadcn.com/docs/components/select
*/
function Select({ ...props }) {
return _jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
}
function SelectGroup({ ...props }) {
return _jsx(SelectPrimitive.Group, { "data-slot": "select-group", ...props });
}
function SelectValue({ ...props }) {
return _jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
}
function SelectTrigger({ className, size = 'default', children, ...props }) {
return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn(selectTriggerVariants(), className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(MdUnfoldMore, { className: "size-4 opacity-50" }) })] }));
}
function SelectContent({ className, children, position = 'popper', maxHeight = '320px', ...props }) {
return (_jsx(SelectPrimitive.Portal, { children: _jsx(SelectPrimitive.Content, { "data-slot": "select-content", className: cn(selectContentVariants({
popper: position === 'popper' ? 'active' : 'none',
}), className), position: position, ...props, children: _jsxs(ScrollAreaPrimitive.Root, { type: "auto", className: "relative overflow-hidden", children: [_jsx(SelectPrimitive.Viewport, { asChild: true, children: _jsx(ScrollAreaPrimitive.Viewport, { className: cn('h-full w-full rounded-[inherit] p-1', position === 'popper'
? 'max-h-[min(var(--max-popper-height),var(--radix-select-content-available-height))] w-full min-w-(--radix-select-trigger-width)'
: 'max-h-(--max-popper-height)'), style: {
'--max-popper-height': maxHeight,
// Resolves React warning: https://github.com/radix-ui/primitives/issues/2059
overflowY: undefined,
}, children: children }) }), _jsx(ScrollBar, {}), _jsx(ScrollAreaPrimitive.Corner, {})] }) }) }));
}
function SelectLabel({ className, ...props }) {
return (_jsx(SelectPrimitive.Label, { "data-slot": "select-label", className: cn('px-2 py-1.5 text-xs text-muted-foreground', className), ...props }));
}
function SelectItem({ className, children, ...props }) {
return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn(selectItemVariants({ withFocus: 'highlight' }), className), ...props, children: [_jsx("span", { className: selectCheckVariants(), children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(MdCheck, { className: "size-4" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] }));
}
function SelectSeparator({ className, ...props }) {
return (_jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: cn('pointer-events-none -mx-1 my-1 h-px bg-border', className), ...props }));
}
export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, };
//# sourceMappingURL=select.js.map