@navinc/base-react-components/dist/wayfinder/select/select.js

Nav's Pattern Library

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as SelectPrimitive from '@radix-ui/react-select';
import { forwardRef } from 'react';
import { Icon } from '../icon/icon.js';
import { addClassNameTo } from '../../add-classname-to.js';
import { styledBackwardsCompatibility } from '../../styled-backwards-compatibility.js';
const Center = addClassNameTo('div', /* cn */ 'flex items-center justify-center');
/** All internal styled components used to build the Select to allow fine-grained overrides */
export const SelectInternal = {
    SelectArrow: styledBackwardsCompatibility(SelectPrimitive.SelectArrow),
    Root: SelectPrimitive.Root, // No DOM element, so no styled-components
    Trigger: addClassNameTo(SelectPrimitive.Trigger, 
    /* cn */ 'body1 group/select-trigger font-[inherit] leading-[inherit] outline-none flex items-center gap-100 justify-between border border-solid border-outlineVariant bg-surface text-onSurface min-h-[48px] py-0 px-150 rounded-300 hover:border-outline focus:border-primary data-[state=open]:border-primary disabled:bg-surfaceDim disabled:text-onSurfaceVariant disabled:border-outlineVariant disabled:pointer-events-none'),
    Value: styledBackwardsCompatibility(SelectPrimitive.Value),
    Icon: addClassNameTo(SelectPrimitive.Icon, /* cn */ 'flex items-center justify-center'),
    Portal: SelectPrimitive.Portal, // No DOM element, so no styled-components
    Content: addClassNameTo(SelectPrimitive.Content, 
    /* cn */ 'flex py-100 px-0 flex-col items-stretch gap-0 rounded-300 bg-surface text-onSurface shadow-elevation2 min-w-[var(--radix-select-trigger-width)] max-h-[var(--radix-select-content-available-height)] z-[1000]'),
    Viewport: styledBackwardsCompatibility(SelectPrimitive.Viewport),
    Group: styledBackwardsCompatibility(SelectPrimitive.Group),
    Label: styledBackwardsCompatibility(SelectPrimitive.Label),
    Item: addClassNameTo(SelectPrimitive.Item, 
    /* cn */ 'outline-none flex min-h-[44px] p-150 mx-100 gap-100 items-center rounded-100 hover:bg-onSurface/[0.055] data-[highlighted]:bg-onSurface/[0.055] data-[state=checked]:bg-onSurface/[0.055]'),
    ItemText: addClassNameTo(SelectPrimitive.ItemText, 'body1 text-onSurface'),
    ItemIndicator: styledBackwardsCompatibility(SelectPrimitive.ItemIndicator),
    ScrollUpButton: styledBackwardsCompatibility(SelectPrimitive.ScrollUpButton),
    ScrollDownButton: styledBackwardsCompatibility(SelectPrimitive.ScrollDownButton),
    Separator: addClassNameTo(SelectPrimitive.Separator, /* cn */ 'h-[1px] bg-outlineVariant my-50'),
    Arrow: styledBackwardsCompatibility(SelectPrimitive.Arrow),
    UpIcon: styledBackwardsCompatibility(() => (_jsx(Center, { children: _jsx(Icon, { name: "arrow_drop_up", size: "large" }) }))),
    DownIcon: styledBackwardsCompatibility(() => (_jsx(Center, { children: _jsx(Icon, { name: "arrow_drop_down", size: "large" }) }))),
    PlaceholderText: addClassNameTo('span', /* cn */ 'text-onSurfaceDim'),
};
/** Wayfinder Select
 *
 * @example
 * ```tsx
 * <Select value={value} onValueChange={setValue} placeholder="Some Placeholder">
 *   <SelectItem value="first">Option 1</SelectItem>
 *   <SelectItem value="second">Option 2</SelectItem>
 * </Select>
 * ```
 */
export const Select = styledBackwardsCompatibility(forwardRef((_a, forwardedRef) => {
    var { children, placeholder, contentOverlayStyle, 
    // typical form library handlers
    onChange, 
    // SelectInternal.Root props
    value, defaultValue, onValueChange, open, defaultOpen, onOpenChange, dir, name, autoComplete, disabled, required } = _a, 
    // end of SelectInternal.Root props
    props = __rest(_a, ["children", "placeholder", "contentOverlayStyle", "onChange", "value", "defaultValue", "onValueChange", "open", "defaultOpen", "onOpenChange", "dir", "name", "autoComplete", "disabled", "required"]);
    return (_jsxs(SelectInternal.Root, { value,
        defaultValue,
        onValueChange: (value) => {
            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(value);
            onChange === null || onChange === void 0 ? void 0 : onChange({ target: { name, value } });
        },
        open,
        defaultOpen,
        onOpenChange,
        dir,
        name,
        autoComplete,
        disabled,
        required, children: [_jsxs(SelectInternal.Trigger, Object.assign({ ref: forwardedRef, name: name }, props, { children: [_jsx(SelectInternal.Value, { placeholder: typeof placeholder === 'string' ? (_jsx(SelectInternal.PlaceholderText, { children: placeholder })) : (placeholder) }), _jsx(SelectInternal.Icon, { children: _jsx(Icon, { name: "arrow_drop_down", size: "large", className: "group-disabled/select-trigger:text-onSurfaceDim" }) })] })), _jsx(SelectInternal.Portal, { children: _jsxs(SelectInternal.Content, { "data-testid": "wf-select-content", position: "popper", sideOffset: 8, style: contentOverlayStyle, children: [_jsx(SelectInternal.ScrollUpButton, { children: _jsx(SelectInternal.UpIcon, {}) }), _jsx(SelectInternal.Viewport, { children: children }), _jsx(SelectInternal.ScrollDownButton, { children: _jsx(SelectInternal.DownIcon, {}) })] }) })] }));
}));
export const SelectItem = styledBackwardsCompatibility(forwardRef((_a, forwardedRef) => {
    var { children } = _a, props = __rest(_a, ["children"]);
    return (_jsx(SelectInternal.Item, Object.assign({}, props, { ref: forwardedRef, children: _jsx(SelectInternal.ItemText, { children: children }) })));
}));
//# sourceMappingURL=select.js.map