@navinc/base-react-components/dist/wayfinder/dropdown-menu/dropdown.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 { styled } from 'styled-components';
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
import { Icon } from '../icon/icon.js';
import { elevation2 } from '../../themes/elevation.js';
import { percentageToHexOpacity } from '@navinc/utils';
import { cn } from '../../cn.js';
import { styledBackwardsCompatibility } from '../../styled-backwards-compatibility.js';
const StyleDropdownMenuRoot = styledBackwardsCompatibility(DropdownMenu.Root);
export const DropdownMenuRoot = StyleDropdownMenuRoot;
export const DropdownMenuTrigger = styledBackwardsCompatibility(DropdownMenu.Trigger);
const StyledDropdownMenuSeparator = styled(DropdownMenu.Separator).withConfig({ displayName: "brc-sc-StyledDropdownMenuSeparator", componentId: "brc-sc-yq2oxi" }) `
  height: 1px;
  background-color: ${({ theme }) => theme.outlineVariant};
`;
export const DropdownMenuSeparator = (_a) => {
    var props = __rest(_a, []);
    return _jsx(StyledDropdownMenuSeparator, Object.assign({}, props));
};
const StyledBaseDropdownMenuItem = styled(DropdownMenu.Item).withConfig({ displayName: "brc-sc-StyledBaseDropdownMenuItem", componentId: "brc-sc-1ujzssa" }) `
  padding: ${({ theme }) => theme.spacing.space150};
  height: ${({ theme }) => theme.spacing.space600};
  border-radius: ${({ theme }) => theme.radius.radius100};
  align-items: center;
  color: ${({ theme, disabled }) => disabled && theme.onSurfaceDim};

  &:hover,
  &:focus,
  &:active {
    cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
    pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
  }

  &:hover,
  &:focus {
    background: ${({ theme, disabled }) => (disabled ? 'none' : `${theme.onSurface}${percentageToHexOpacity(4)}`)};
  }

  &:active {
    background: ${({ theme, disabled }) => (disabled ? 'none' : `${theme.onSurface}${percentageToHexOpacity(8)}`)};
  }

  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- css-focus-visible is not supported by Safari iOS 11 */
  &:focus-visible {
    outline: none;
  }
`;
const StyledDropdownMenuItem = styled(StyledBaseDropdownMenuItem).withConfig({ displayName: "brc-sc-StyledDropdownMenuItem", componentId: "brc-sc-13c5gh0" }) `
  display: grid;
  grid-template: 1fr / 24px repeat(2, auto);
  grid-template-areas: 'icon mainLabel subLabel';
  grid-column-gap: ${({ theme }) => theme.spacing.space100};

  & > ${Icon} {
    grid-area: icon;
  }
`;
export const DropdownMenuItem = (_a) => {
    var { children, icon, subLabel } = _a, props = __rest(_a, ["children", "icon", "subLabel"]);
    const $expandMainLabel = !icon || !subLabel;
    return (_jsxs(StyledDropdownMenuItem, Object.assign({ "$expandMainLabel": $expandMainLabel }, props, { children: [icon && icon, children && (_jsx("p", { className: cn('body1', $expandMainLabel ? '[grid-column:span_2]' : '[grid-area:mainLabel]', props.disabled ? 'text-onSurfaceDim' : 'text-onSurfaceVariant'), children: children })), subLabel && (_jsx("p", { className: cn('body2 justify-self-end [grid-area:subLabel]', props.disabled ? 'text-onSurfaceDim' : 'text-onSurfaceVariant'), children: subLabel }))] })));
};
export const BaseDropdownMenuItem = (_a) => {
    var { children } = _a, props = __rest(_a, ["children"]);
    return (_jsx(StyledBaseDropdownMenuItem, Object.assign({}, props, { children: children })));
};
const StyledDropdownMenuPortal = styledBackwardsCompatibility(DropdownMenu.Portal);
const StyledDropdownMenuContent = styled(DropdownMenu.Content).withConfig({ displayName: "brc-sc-StyledDropdownMenuContent", componentId: "brc-sc-7y5boe" }) `
  border-radius: ${({ theme }) => theme.radius.radius300};
  background: ${({ theme }) => theme.surface};
  padding: ${({ theme }) => theme.spacing.space100} 0;

  ${elevation2}

  & > ${StyledDropdownMenuSeparator} {
    margin: ${({ theme }) => theme.spacing.space50} 0;
  }
  & > ${StyledDropdownMenuItem} {
    margin: 0 ${({ theme }) => theme.spacing.space100};
  }
`;
export const DropdownMenuPortalContent = (_a) => {
    var { children, sideOffset = 5 } = _a, props = __rest(_a, ["children", "sideOffset"]);
    return (_jsx(StyledDropdownMenuPortal, { children: _jsx(StyledDropdownMenuContent, Object.assign({ sideOffset: sideOffset }, props, { children: children })) }));
};
//# sourceMappingURL=dropdown.js.map