@primer/components 0.0.0-2021109221452 → 0.0.0-2021109223232

package/lib/ActionList/Group.jsx

@@ -1,23 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Group = void 0;
-const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const sx_1 = __importDefault(require("../sx"));
-const Header_1 = require("./Header");
-const StyledGroup = styled_components_1.default.div `
-  ${sx_1.default}
-`;
-/**
- * Collects related `Items` in an `ActionList`.
- */
-function Group({ header, items, ...props }) {
-    return (<StyledGroup {...props}>
-      {header && <Header_1.Header {...header}/>}
-      {items}
-    </StyledGroup>);
-}
-exports.Group = Group;

package/lib/ActionList/Header.jsx

@@ -1,66 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Header = exports.StyledHeader = void 0;
-const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importStar(require("styled-components"));
-const constants_1 = require("../constants");
-const sx_1 = __importDefault(require("../sx"));
-exports.StyledHeader = styled_components_1.default.div `
-   {
-    /* 6px vertical padding + 20px line height = 32px total height
-     *
-     * TODO: When rem-based spacing on a 4px scale lands, replace
-     * hardcoded '6px' with 'calc((${constants_1.get('space.s32')} - ${constants_1.get('space.20')}) / 2)'.
-     */
-  }
-  padding: 6px ${constants_1.get('space.3')};
-  font-size: ${constants_1.get('fontSizes.0')};
-  font-weight: ${constants_1.get('fontWeights.bold')};
-  color: ${constants_1.get('colors.fg.muted')};
-
-  ${({ variant }) => variant === 'filled' &&
-    styled_components_1.css `
-      background: ${constants_1.get('colors.canvas.subtle')};
-      margin: ${constants_1.get('space.2')} 0;
-      border-top: 1px solid ${constants_1.get('colors.neutral.muted')};
-      border-bottom: 1px solid ${constants_1.get('colors.neutral.muted')};
-
-      &:first-child {
-        margin-top: 0;
-      }
-    `}
-
-  ${sx_1.default}
-`;
-/**
- * Displays the name and description of a `Group`.
- */
-function Header({ variant = 'subtle', title, auxiliaryText, children: _children, ...props }) {
-    return (<exports.StyledHeader role="heading" variant={variant} {...props}>
-      {title}
-      {auxiliaryText && <span>{auxiliaryText}</span>}
-    </exports.StyledHeader>);
-}
-exports.Header = Header;

package/lib/ActionList/Item.jsx

@@ -1,301 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Item = exports.TextContainer = void 0;
-const octicons_react_1 = require("@primer/octicons-react");
-const react_1 = __importStar(require("react"));
-const constants_1 = require("../constants");
-const sx_1 = __importDefault(require("../sx"));
-const Truncate_1 = __importDefault(require("../Truncate"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const Header_1 = require("./Header");
-const Divider_1 = require("./Divider");
-const ThemeProvider_1 = require("../ThemeProvider");
-const focusZone_1 = require("../behaviors/focusZone");
-const ssr_1 = require("@react-aria/ssr");
-/**
- * These colors are not yet in our default theme.  Need to remove this once they are added.
- */
-const customItemThemes = {
-    default: {
-        hover: {
-            light: 'rgba(46, 77, 108, 0.06)',
-            dark: 'rgba(201, 206, 212, 0.12)',
-            dark_dimmed: 'rgba(201, 206, 212, 0.12)'
-        },
-        focus: {
-            light: 'rgba(54, 77, 100, 0.16)',
-            dark: 'rgba(201, 206, 212, 0.24)',
-            dark_dimmed: 'rgba(201, 206, 212, 0.24)'
-        }
-    },
-    danger: {
-        hover: {
-            light: 'rgba(234, 74, 90, 0.08)',
-            dark: 'rgba(248, 81, 73, 0.16)',
-            dark_dimmed: 'rgba(248, 81, 73, 0.16)'
-        },
-        focus: {
-            light: 'rgba(234, 74, 90, 0.14)',
-            dark: 'rgba(248, 81, 73, 0.24)',
-            dark_dimmed: 'rgba(248, 81, 73, 0.24)'
-        }
-    }
-};
-const getItemVariant = (variant = 'default', disabled) => {
-    if (disabled) {
-        return {
-            color: constants_1.get('colors.primer.fg.disabled'),
-            iconColor: constants_1.get('colors.primer.fg.disabled'),
-            annotationColor: constants_1.get('colors.primer.fg.disabled'),
-            hoverCursor: 'default'
-        };
-    }
-    switch (variant) {
-        case 'danger':
-            return {
-                color: constants_1.get('colors.danger.fg'),
-                iconColor: constants_1.get('colors.danger.fg'),
-                annotationColor: constants_1.get('colors.fg.muted'),
-                hoverCursor: 'pointer'
-            };
-        default:
-            return {
-                color: constants_1.get('colors.fg.default'),
-                iconColor: constants_1.get('colors.fg.muted'),
-                annotationColor: constants_1.get('colors.fg.muted'),
-                hoverCursor: 'pointer'
-            };
-    }
-};
-const DividedContent = styled_components_1.default.div `
-  display: flex;
-  min-width: 0;
-
-  /* Required for dividers */
-  position: relative;
-  flex-grow: 1;
-`;
-const MainContent = styled_components_1.default.div `
-  align-items: baseline;
-  display: flex;
-  min-width: 0;
-  flex-direction: var(--main-content-flex-direction);
-  flex-grow: 1;
-`;
-const StyledItem = styled_components_1.default.div `
-  /* 6px vertical padding + 20px line height = 32px total height
-   *
-   * TODO: When rem-based spacing on a 4px scale lands, replace
-   * hardcoded '6px' with 'calc((${constants_1.get('space.s32')} - ${constants_1.get('space.20')}) / 2)'.
-   */
-  padding: 6px ${constants_1.get('space.2')};
-  display: flex;
-  border-radius: ${constants_1.get('radii.2')};
-  color: ${({ variant, item }) => getItemVariant(variant, item?.disabled).color};
-  // 2 frames on a 60hz monitor
-  transition: background 33.333ms linear;
-  text-decoration: none;
-
-  @media (hover: hover) and (pointer: fine) {
-    :hover {
-      // allow override in case another item in the list is active/focused
-      background: var(--item-hover-bg-override, ${({ hoverBackground }) => hoverBackground});
-      cursor: ${({ variant, item }) => getItemVariant(variant, item?.disabled).hoverCursor};
-    }
-  }
-
-  // Item dividers
-  :not(:first-of-type):not(${Divider_1.StyledDivider} + &):not(${Header_1.StyledHeader} + &) {
-    margin-top: ${({ showDivider }) => (showDivider ? `1px` : '0')};
-
-    ${DividedContent}::before {
-      content: ' ';
-      display: block;
-      position: absolute;
-      width: 100%;
-      top: -7px;
-      // NB: This 'get' won’t execute if it’s moved into the arrow function below.
-      border: 0 solid ${constants_1.get('colors.border.muted')};
-      border-top-width: ${({ showDivider }) => (showDivider ? `1px` : '0')};
-    }
-  }
-
-  // Item dividers should not be visible:
-  // - above Hovered
-  &:hover ${DividedContent}::before,
-  // - below Hovered
-  // '*' instead of '&' because '&' maps to separate class names depending on 'variant'
-  :hover + * ${DividedContent}::before {
-    // allow override in case another item in the list is active/focused
-    border-color: var(--item-hover-divider-border-color-override, transparent) !important;
-  }
-
-  // - above Focused
-  &:focus ${DividedContent}::before,
-  // - below Focused
-  // '*' instead of '&' because '&' maps to separate class names depending on 'variant'
-  :focus + * ${DividedContent}::before,
-  // - above Active Descendent
-  &[${focusZone_1.isActiveDescendantAttribute}] ${DividedContent}::before,
-  // - below Active Descendent
-  [${focusZone_1.isActiveDescendantAttribute}] + & ${DividedContent}::before {
-    // '!important' because all the ':not's above give higher specificity
-    border-color: transparent !important;
-  }
-
-  // Active Descendant
-  &[${focusZone_1.isActiveDescendantAttribute}='${focusZone_1.activeDescendantActivatedDirectly}'] {
-    background: ${({ focusBackground }) => focusBackground};
-  }
-  &[${focusZone_1.isActiveDescendantAttribute}='${focusZone_1.activeDescendantActivatedIndirectly}'] {
-    background: ${({ hoverBackground }) => hoverBackground};
-  }
-
-  &:focus {
-    background: ${({ focusBackground }) => focusBackground};
-    outline: none;
-  }
-
-  &:active {
-    background: ${({ focusBackground }) => focusBackground};
-  }
-
-  ${sx_1.default}
-`;
-exports.TextContainer = styled_components_1.default.span ``;
-const BaseVisualContainer = styled_components_1.default.div `
-  // Match visual height to adjacent text line height.
-  // TODO: When rem-based spacing on a 4px scale lands, replace
-  // hardcoded '20px' with '${constants_1.get('space.s20')}'.
-  height: 20px;
-  width: ${constants_1.get('space.3')};
-  margin-right: ${constants_1.get('space.2')};
-`;
-const ColoredVisualContainer = styled_components_1.default(BaseVisualContainer) `
-  svg {
-    fill: ${({ variant, disabled }) => getItemVariant(variant, disabled).iconColor};
-    font-size: ${constants_1.get('fontSizes.0')};
-  }
-`;
-const LeadingVisualContainer = styled_components_1.default(ColoredVisualContainer) `
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-`;
-const TrailingContent = styled_components_1.default(ColoredVisualContainer) `
-  color: ${({ variant, disabled }) => getItemVariant(variant, disabled).annotationColor}};
-  margin-left: ${constants_1.get('space.2')};
-  margin-right: 0;
-  width: auto;
-  div:nth-child(2) {
-    margin-left: ${constants_1.get('space.2')};
-  }
-`;
-const DescriptionContainer = styled_components_1.default.span `
-  color: ${constants_1.get('colors.fg.muted')};
-  font-size: ${constants_1.get('fontSizes.0')};
-  // TODO: When rem-based spacing on a 4px scale lands, replace
-  // hardcoded '16px' with '${constants_1.get('lh-12')}'.
-  line-height: 16px;
-  margin-left: var(--description-container-margin-left);
-  min-width: 0;
-  flex-grow: 1;
-  flex-basis: var(--description-container-flex-basis);
-`;
-const MultiSelectInput = styled_components_1.default.input `
-  pointer-events: none;
-`;
-/**
- * An actionable or selectable `Item` with an optional icon and description.
- */
-exports.Item = react_1.default.forwardRef((itemProps, ref) => {
-    const { as: Component, text, description, descriptionVariant = 'inline', selected, selectionVariant, leadingVisual: LeadingVisual, trailingIcon: TrailingIcon, trailingVisual: TrailingVisual, trailingText, variant = 'default', showDivider, disabled, onAction, onKeyPress, children, onClick, id, ...props } = itemProps;
-    const labelId = ssr_1.useSSRSafeId();
-    const descriptionId = ssr_1.useSSRSafeId();
-    const keyPressHandler = react_1.useCallback(event => {
-        if (disabled) {
-            return;
-        }
-        onKeyPress?.(event);
-        const isCheckbox = event.target instanceof HTMLInputElement && event.target.type === 'checkbox';
-        if (isCheckbox && event.key === ' ') {
-            // space key on a checkbox will also trigger a click event.  Ignore the space key so we don't get double events
-            return;
-        }
-        if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
-            onAction?.(itemProps, event);
-        }
-    }, [onAction, disabled, itemProps, onKeyPress]);
-    const clickHandler = react_1.useCallback(event => {
-        if (disabled) {
-            return;
-        }
-        onClick?.(event);
-        if (!event.defaultPrevented) {
-            onAction?.(itemProps, event);
-        }
-    }, [onAction, disabled, itemProps, onClick]);
-    const customItemTheme = customItemThemes[variant];
-    const hoverBackground = ThemeProvider_1.useColorSchemeVar(customItemTheme.hover, 'inherit');
-    const focusBackground = ThemeProvider_1.useColorSchemeVar(customItemTheme.focus, 'inherit');
-    const { theme } = ThemeProvider_1.useTheme();
-    return (<StyledItem ref={ref} as={Component} tabIndex={disabled ? undefined : -1} variant={variant} showDivider={showDivider} aria-selected={selected} aria-labelledby={text ? labelId : undefined} aria-describedby={description ? descriptionId : undefined} {...props} data-id={id} onKeyPress={keyPressHandler} onClick={clickHandler} hoverBackground={disabled ? 'inherit' : hoverBackground} focusBackground={disabled ? 'inherit' : focusBackground}>
-      {!!selected === selected && (<BaseVisualContainer>
-          {selectionVariant === 'multiple' ? (<>
-              {/*
-                 * readOnly is required because we are doing a one-way bind to `checked`.
-                 * aria-readonly="false" tells screen that they can still interact with the checkbox
-                 */}
-              <MultiSelectInput disabled={disabled} tabIndex={-1} type="checkbox" checked={selected} aria-label={text} readOnly aria-readonly="false"/>
-            </>) : (selected && <octicons_react_1.CheckIcon fill={theme?.colors.fg.default}/>)}
-        </BaseVisualContainer>)}
-      {LeadingVisual && (<LeadingVisualContainer variant={variant} disabled={disabled}>
-          <LeadingVisual />
-        </LeadingVisualContainer>)}
-      <DividedContent>
-        <MainContent style={{ '--main-content-flex-direction': descriptionVariant === 'inline' ? 'row' : 'column' }}>
-          {children}
-          {text ? <exports.TextContainer id={labelId}>{text}</exports.TextContainer> : null}
-          {description ? (<DescriptionContainer id={descriptionId} style={{
-                '--description-container-margin-left': descriptionVariant === 'inline' ? constants_1.get('space.2')(theme) : 0,
-                '--description-container-flex-basis': descriptionVariant === 'inline' ? 0 : 'auto'
-            }}>
-              {descriptionVariant === 'block' ? (description) : (<Truncate_1.default title={description} inline={true} maxWidth="100%">
-                  {description}
-                </Truncate_1.default>)}
-            </DescriptionContainer>) : null}
-        </MainContent>
-        {/* backward compatibility: prefer TrailingVisual but fallback to TrailingIcon */}
-        {TrailingVisual ? (<TrailingContent variant={variant} disabled={disabled}>
-            {typeof TrailingVisual === 'function' ? <TrailingVisual /> : TrailingVisual}
-          </TrailingContent>) : TrailingIcon || trailingText ? (<TrailingContent variant={variant} disabled={disabled}>
-            {trailingText}
-            {TrailingIcon && <TrailingIcon />}
-          </TrailingContent>) : null}
-      </DividedContent>
-    </StyledItem>);
-});
-exports.Item.displayName = 'ActionList.Item';

package/lib/ActionList/List.jsx

@@ -1,138 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.List = void 0;
-const react_1 = __importDefault(require("react"));
-const Group_1 = require("./Group");
-const Item_1 = require("./Item");
-const Divider_1 = require("./Divider");
-const styled_components_1 = __importDefault(require("styled-components"));
-const constants_1 = require("../constants");
-const focusZone_1 = require("../behaviors/focusZone");
-/**
- * Asserts that the given value fulfills the `GroupedListProps` contract.
- * @param props A value which fulfills either the `ListPropsBase` or the `GroupedListProps` contract.
- */
-function isGroupedListProps(props) {
-    return 'groupMetadata' in props;
-}
-const StyledList = styled_components_1.default.div `
-  font-size: ${constants_1.get('fontSizes.1')};
-  /* 14px font-size * 1.428571429 = 20px line height
-   *
-   * TODO: When rem-based spacing on a 4px scale lands, replace
-   * hardcoded '20px'
-   */
-  line-height: 20px;
-
-  &[${focusZone_1.hasActiveDescendantAttribute}], &:focus-within {
-    --item-hover-bg-override: none;
-    --item-hover-divider-border-color-override: ${constants_1.get('colors.border.muted')};
-  }
-`;
-/**
- * Returns `sx` prop values for `List` children matching the given `List` style variation.
- * @param variant `List` style variation.
- */
-function useListVariant(variant = 'inset') {
-    switch (variant) {
-        case 'full':
-            return {
-                headerStyle: { paddingX: constants_1.get('space.2') },
-                itemStyle: { borderRadius: 0 }
-            };
-        default:
-            return {
-                firstGroupStyle: { marginTop: constants_1.get('space.2') },
-                lastGroupStyle: { marginBottom: constants_1.get('space.2') },
-                itemStyle: { marginX: constants_1.get('space.2') }
-            };
-    }
-}
-/**
- * Lists `Item`s, either grouped or ungrouped, with a `Divider` between each `Group`.
- */
-exports.List = react_1.default.forwardRef((props, forwardedRef) => {
-    // Get `sx` prop values for `List` children matching the given `List` style variation.
-    const { firstGroupStyle, lastGroupStyle, headerStyle, itemStyle } = useListVariant(props.variant);
-    /**
-     * Render a `Group` using the first of the following renderers that is defined:
-     * A `Group`-level or `List`-level custom `Group` renderer, or
-     * the default `Group` renderer.
-     */
-    const renderGroup = (groupProps) => {
-        const GroupComponent = (('renderGroup' in groupProps && groupProps.renderGroup) ?? props.renderGroup) || Group_1.Group;
-        return <GroupComponent {...groupProps} key={groupProps.groupId}/>;
-    };
-    /**
-     * Render an `Item` using the first of the following renderers that is defined:
-     * An `Item`-level, `Group`-level, or `List`-level custom `Item` renderer,
-     * or the default `Item` renderer.
-     */
-    const renderItem = (itemProps, item, itemIndex) => {
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-        const ItemComponent = ('renderItem' in itemProps && itemProps.renderItem) || props.renderItem || Item_1.Item;
-        const key = ('key' in itemProps ? itemProps.key : undefined) ?? itemProps.id?.toString() ?? itemIndex.toString();
-        return (<ItemComponent showDivider={props.showItemDividers} selectionVariant={props.selectionVariant} {...itemProps} key={key} sx={{ ...itemStyle, ...itemProps.sx }} item={item}/>);
-    };
-    /**
-     * An array of `Group`s, each with an associated `Header` and with an array of `Item`s belonging to that `Group`.
-     */
-    let groups = [];
-    // Collect rendered `Item`s into `Group`s, avoiding excess iteration over the lists of `items` and `groupMetadata`:
-    if (!isGroupedListProps(props)) {
-        // When no `groupMetadata`s is provided, collect rendered `Item`s into a single anonymous `Group`.
-        groups = [{ items: props.items.map((item, index) => renderItem(item, item, index)), groupId: '0' }];
-    }
-    else {
-        // When `groupMetadata` is provided, collect rendered `Item`s into their associated `Group`s.
-        /**
-         * A map of group identifiers to `Group`s, each with an associated array of `Item`s belonging to that `Group`.
-         */
-        const groupMap = props.groupMetadata.reduce((groupAccumulator, groupMetadata) => groupAccumulator.set(groupMetadata.groupId, groupMetadata), new Map());
-        for (const itemProps of props.items) {
-            // Look up the group associated with the current item.
-            const group = groupMap.get(itemProps.groupId);
-            const itemIndex = group?.items?.length ?? 0;
-            // Upsert the group to include the current item (rendered).
-            groupMap.set(itemProps.groupId, {
-                ...group,
-                items: [
-                    ...(group?.items ?? []),
-                    renderItem({
-                        showDivider: group?.showItemDividers,
-                        ...(group && 'renderItem' in group && { renderItem: group.renderItem }),
-                        ...itemProps
-                    }, itemProps, itemIndex)
-                ]
-            });
-        }
-        groups = [...groupMap.values()];
-    }
-    return (<StyledList {...props} ref={forwardedRef}>
-      {groups.map(({ header, ...groupProps }, index) => {
-            const hasFilledHeader = header?.variant === 'filled';
-            const shouldShowDivider = index > 0 && !hasFilledHeader;
-            return (<react_1.default.Fragment key={groupProps.groupId}>
-            {shouldShowDivider ? <Divider_1.Divider key={`${groupProps.groupId}-divider`}/> : null}
-            {renderGroup({
-                    sx: {
-                        ...(index === 0 && firstGroupStyle),
-                        ...(index === groups.length - 1 && lastGroupStyle),
-                        ...(index > 0 && !shouldShowDivider && { mt: 2 })
-                    },
-                    ...(header && {
-                        header: {
-                            ...header,
-                            sx: { ...headerStyle, ...header.sx }
-                        }
-                    }),
-                    ...groupProps
-                })}
-          </react_1.default.Fragment>);
-        })}
-    </StyledList>);
-});
-exports.List.displayName = 'ActionList';

package/lib/ActionMenu.jsx

@@ -1,73 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActionMenu = void 0;
-const List_1 = require("./ActionList/List");
-const Item_1 = require("./ActionList/Item");
-const Divider_1 = require("./ActionList/Divider");
-const Button_1 = __importDefault(require("./Button"));
-const react_1 = __importStar(require("react"));
-const AnchoredOverlay_1 = require("./AnchoredOverlay");
-const useProvidedStateOrCreate_1 = require("./hooks/useProvidedStateOrCreate");
-const hooks_1 = require("./hooks");
-const ActionMenuItem = (props) => <Item_1.Item role="menuitem" {...props}/>;
-ActionMenuItem.displayName = 'ActionMenu.Item';
-const ActionMenuBase = ({ anchorContent, renderAnchor = (props) => <Button_1.default {...props}/>, anchorRef: externalAnchorRef, onAction, open, setOpen, overlayProps, items, ...listProps }) => {
-    const [combinedOpenState, setCombinedOpenState] = useProvidedStateOrCreate_1.useProvidedStateOrCreate(open, setOpen, false);
-    const anchorRef = hooks_1.useProvidedRefOrCreate(externalAnchorRef);
-    const onOpen = react_1.useCallback(() => setCombinedOpenState(true), [setCombinedOpenState]);
-    const onClose = react_1.useCallback(() => setCombinedOpenState(false), [setCombinedOpenState]);
-    const renderMenuAnchor = react_1.useMemo(() => {
-        if (renderAnchor === null) {
-            return null;
-        }
-        return (props) => {
-            return renderAnchor({
-                'aria-label': 'menu',
-                children: anchorContent,
-                ...props
-            });
-        };
-    }, [anchorContent, renderAnchor]);
-    const itemsToRender = react_1.useMemo(() => {
-        return items.map(item => {
-            return {
-                ...item,
-                role: 'menuitem',
-                onAction: (props, event) => {
-                    const actionCallback = item.onAction ?? onAction;
-                    actionCallback?.(props, event);
-                    if (!event.defaultPrevented) {
-                        onClose();
-                    }
-                }
-            };
-        });
-    }, [items, onAction, onClose]);
-    return (<AnchoredOverlay_1.AnchoredOverlay renderAnchor={renderMenuAnchor} anchorRef={anchorRef} open={combinedOpenState} onOpen={onOpen} onClose={onClose} overlayProps={overlayProps}>
-      <List_1.List {...listProps} role="menu" items={itemsToRender}/>
-    </AnchoredOverlay_1.AnchoredOverlay>);
-};
-ActionMenuBase.displayName = 'ActionMenu';
-exports.ActionMenu = Object.assign(ActionMenuBase, { Divider: Divider_1.Divider, Item: ActionMenuItem });