@primer/view-components 0.1.5-rc.fff95e52 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/app/assets/javascripts/primer_view_components.js +1 -1
- package/app/assets/javascripts/primer_view_components.js.map +1 -1
- package/app/assets/styles/primer_view_components.css +2 -2
- package/app/assets/styles/primer_view_components.css.map +1 -1
- package/app/components/primer/alpha/action_list.css +1 -1
- package/app/components/primer/alpha/action_list.css.json +4 -0
- package/app/components/primer/alpha/action_menu/action_menu_element.d.ts +22 -0
- package/app/components/primer/alpha/action_menu/action_menu_element.js +139 -0
- package/app/components/primer/alpha/overlay.css +1 -1
- package/app/components/primer/beta/button.css +1 -1
- package/app/components/primer/focus_group.d.ts +19 -0
- package/app/components/primer/focus_group.js +144 -0
- package/app/components/primer/primer.d.ts +2 -0
- package/app/components/primer/primer.js +2 -0
- package/package.json +3 -2
- package/static/arguments.json +105 -13
- package/static/audited_at.json +2 -0
- package/static/constants.json +42 -2
- package/static/info_arch.json +471 -141
- package/static/previews.json +103 -0
- package/static/statuses.json +2 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--primer-actionListContent-paddingBlock:var(--primer-control-medium-paddingBlock,6px)}.ActionListWrap{list-style:none}.ActionListWrap--inset{padding:var(--base-size-8,8px)}.ActionListWrap--divided .ActionListItem-label:before{height:1px}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before,.ActionListWrap--divided .ActionListItem-label:before{background:var(--color-action-list-item-inline-divider);content:"";display:block;position:absolute;top:calc(var(--primer-actionListContent-paddingBlock)*-1);width:100%}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before{height:var(--primer-borderWidth-thin,1px)}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline .ActionListItem-label:before{content:unset}.ActionList-sectionDivider+.ActionListItem .ActionListItem-descriptionWrap--inline:before,.ActionList-sectionDivider+.ActionListItem .ActionListItem-label:before,.ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline:before,.ActionListItem:first-of-type .ActionListItem-label:before,.ActionListWrap--divided .ActionListItem--navActive .ActionListItem-label:before,.ActionListWrap--divided .ActionListItem--navActive+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem{background-color:initial;border-radius:var(--primer-borderRadius-medium,6px);list-style:none;position:relative}.ActionListItem:active,.ActionListItem:hover{cursor:pointer}@media (hover:hover){.ActionListItem:hover .ActionListItem-descriptionWrap--inline:before,.ActionListItem:hover .ActionListItem-label:before,.ActionListItem:hover+.ActionListItem .ActionListItem-descriptionWrap--inline:before,.ActionListItem:hover+.ActionListItem .ActionListItem-label:before{visibility:hidden}}.ActionListItem[hidden]+.ActionList-sectionDivider{display:none}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent{z-index:1}@media (hover:hover){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover{background-color:var(--color-action-list-item-default-hover-bg)}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active{background-color:var(--color-action-list-item-default-active-bg)}@media (hover:hover){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover,.ActionListItem:not(.ActionListItem--hasSubItem):hover{background-color:var(--color-action-list-item-default-hover-bg);cursor:pointer}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover:not(.ActionListItem--navActive,:focus-visible),.ActionListItem:not(.ActionListItem--hasSubItem):hover:not(.ActionListItem--navActive,:focus-visible){box-shadow:var(--primer-borderInset-thin,1px) var(--color-action-list-item-default-active-border);outline:solid var(--primer-borderWidth-thin,1px) #0000;outline-offset:calc(var(--primer-borderWidth-thin, 1px)*-1)}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active,.ActionListItem:not(.ActionListItem--hasSubItem):active{background:var(--color-action-list-item-default-active-bg)}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active:not(.ActionListItem--navActive),.ActionListItem:not(.ActionListItem--hasSubItem):active:not(.ActionListItem--navActive){box-shadow:var(--primer-borderInset-thin,1px) var(--color-action-list-item-default-active-border);outline:solid var(--primer-borderWidth-thin,1px) #0000;outline-offset:calc(var(--primer-borderWidth-thin, 1px)*-1)}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active .ActionListItem-label:before,.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active+.ActionListItem .ActionListItem-label:before,.ActionListItem:not(.ActionListItem--hasSubItem):active .ActionListItem-label:before,.ActionListItem:not(.ActionListItem--hasSubItem):active+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem[aria-checked=true] .ActionListItem-multiSelectCheckmark,.ActionListItem[aria-selected=true] .ActionListItem-multiSelectCheckmark{opacity:1;transition:visibility 0 linear 0,opacity 50ms;visibility:visible}.ActionListItem[aria-checked=true] .ActionListItem-singleSelectCheckmark,.ActionListItem[aria-selected=true] .ActionListItem-singleSelectCheckmark{visibility:visible}@media screen and (prefers-reduced-motion:no-preference){.ActionListItem[aria-checked=true] .ActionListItem-singleSelectCheckmark,.ActionListItem[aria-selected=true] .ActionListItem-singleSelectCheckmark{animation:checkmarkIn .2s cubic-bezier(.11,0,.5,0) forwards}}.ActionListItem[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.ActionListItem[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect{fill:var(--color-accent-fg);stroke:var(--color-accent-fg);stroke-width:var(--primer-borderWidth-thin,1px)}.ActionListItem[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark,.ActionListItem[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark{fill:var(--color-fg-on-emphasis)}.ActionListItem[aria-checked=false] .ActionListItem-multiSelectCheckmark,.ActionListItem[aria-selected=false] .ActionListItem-multiSelectCheckmark{opacity:0;transition:visibility 0 linear 50ms,opacity 50ms;visibility:hidden}.ActionListItem[aria-checked=false] .ActionListItem-singleSelectCheckmark,.ActionListItem[aria-selected=false] .ActionListItem-singleSelectCheckmark{clip-path:inset(16px 0 0 0);transition:visibility 0s linear .2s;visibility:hidden}@media screen and (prefers-reduced-motion:no-preference){.ActionListItem[aria-checked=false] .ActionListItem-singleSelectCheckmark,.ActionListItem[aria-selected=false] .ActionListItem-singleSelectCheckmark{animation:checkmarkOut .2s cubic-bezier(.11,0,.5,0) forwards}}.ActionListItem[aria-checked=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.ActionListItem[aria-selected=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect{fill:var(--color-canvas-default);stroke:var(--color-border-default);stroke-width:var(--primer-borderWidth-thin,1px)}.ActionListItem[aria-checked=false] .ActionListItem-multiSelectIconRect,.ActionListItem[aria-selected=false] .ActionListItem-multiSelectIconRect{fill:var(--color-canvas-default);border:var(--primer-borderWidth-thin,1px) solid var(--color-border-default)}.ActionListItem{@keyframes checkmarkIn{0%{clip-path:inset(16px 0 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes checkmarkOut{0%{clip-path:inset(0 0 0 0)}to{clip-path:inset(16px 0 0 0)}}}.ActionListItem[aria-selected=true]{background:var(--color-action-list-item-default-selected-bg);font-weight:var(--base-text-weight-normal,400)}@media (hover:hover){.ActionListItem[aria-selected=true]:hover{background-color:var(--color-action-list-item-default-hover-bg)}}.ActionListItem[aria-selected=true]+.ActionListItem:before,.ActionListItem[aria-selected=true]:before{visibility:hidden}.ActionListItem[aria-selected=true]:after{background:var(--color-accent-fg);border-radius:var(--primer-borderRadius-medium,6px);content:"";height:var(--base-size-24,24px);left:calc(var(--base-size-4, 4px)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,4px)}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--subItem) .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger){background:var(--color-action-list-item-default-selected-bg)}@media (hover:hover){.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):hover{background-color:var(--color-action-list-item-default-hover-bg)}}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)+.ActionListItem:before,.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):before{visibility:hidden}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):after{background:var(--color-accent-fg);border-radius:var(--primer-borderRadius-medium,6px);content:"";height:var(--base-size-24,24px);left:calc(var(--base-size-8, 8px)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,4px)}.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-description,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-label{color:var(--color-primer-fg-disabled)}.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-visual{fill:var(--color-primer-fg-disabled)}@media (hover:hover){.ActionListItem[aria-disabled=true]:hover{background-color:initial;cursor:not-allowed}}.ActionListItem.ActionListItem--danger .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListItem-visual{color:var(--color-danger-fg)}@media (hover:hover){.ActionListItem.ActionListItem--danger:hover{background:var(--color-action-list-item-danger-hover-bg)}.ActionListItem.ActionListItem--danger:hover .ActionListItem-label,.ActionListItem.ActionListItem--danger:hover .ActionListItem-visual{color:var(--color-action-list-item-danger-hover-text)}}.ActionListItem.ActionListItem--danger .ActionListContent:active{background:var(--color-action-list-item-danger-active-bg)}.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-visual{color:var(--color-action-list-item-danger-hover-text)}.ActionListContent{-webkit-tap-highlight-color:transparent;align-items:start;background-color:initial;border:none;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-fg-default);display:grid;grid-template-areas:"leadingAction leadingVisual label trailingVisual trailingAction";grid-template-columns:min-content min-content minmax(0,auto) min-content min-content;grid-template-rows:min-content;padding-block:var(--primer-actionListContent-paddingBlock);padding-inline:var(--primer-control-medium-paddingInline-condensed,8px);position:relative;text-align:left;touch-action:manipulation;transition:background 33.333ms linear;-webkit-user-select:none;user-select:none;width:100%}.ActionListContent>:not(:last-child){margin-right:var(--primer-control-medium-gap,8px)}.ActionListContent:hover{text-decoration:none}.ActionListContent[aria-disabled=true] .ActionListItem-description,.ActionListContent[aria-disabled=true] .ActionListItem-label{color:var(--color-primer-fg-disabled)}.ActionListContent[aria-disabled=true] .ActionListItem-visual{fill:var(--color-primer-fg-disabled)}@media (hover:hover){.ActionListContent[aria-disabled=true]:hover{background-color:initial;cursor:not-allowed}}@media screen and (prefers-reduced-motion:no-preference){.ActionListContent[aria-expanded]+.ActionList--subGroup{transition:opacity .16s cubic-bezier(.25,1,.5,1),transform .16s cubic-bezier(.25,1,.5,1)}}.ActionListContent[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-24,24px)}.ActionListContent.ActionListContent--visual16[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-32,32px)}.ActionListContent.ActionListContent--visual20[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-36,36px)}.ActionListContent.ActionListContent--visual24[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-40,40px)}.ActionListContent[aria-expanded=true] .ActionListItem-collapseIcon{transform:scaleY(-1);transition:transform .12s linear}.ActionListContent[aria-expanded=true]+.ActionList--subGroup{height:auto;opacity:1;overflow:visible;transform:translateY(0);visibility:visible}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=true]>.ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListContent[aria-expanded=false] .ActionListItem-collapseIcon{transform:scaleY(1);transition:transform .12s linear}.ActionListContent[aria-expanded=false]+.ActionList--subGroup{height:0;opacity:0;overflow:hidden;transform:translateY(calc(var(--base-size-16, 16px)*-1));visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]{background:var(--color-action-list-item-default-selected-bg)}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false] .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]+.ActionListItem:before,.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:before{visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:after{background:var(--color-accent-fg);border-radius:var(--primer-borderRadius-medium,6px);content:"";height:var(--base-size-24,24px);left:calc(var(--base-size-8, 8px)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,4px)}.ActionListContent.ActionListContent--sizeLarge{--primer-actionListContent-paddingBlock:var(--primer-control-large-paddingBlock,0.625rem)}.ActionListContent.ActionListContent--sizeXLarge{--primer-actionListContent-paddingBlock:var(--primer-control-xlarge-paddingBlock,0.875rem)}@media (pointer:coarse){.ActionListContent{--primer-actionListContent-paddingBlock:var(--primer-control-large-paddingBlock,0.625rem)}}.ActionListContent.ActionListContent--blockDescription .ActionListItem-visual{place-self:start}.ActionListItem-action--leading{grid-area:leadingAction}.ActionListItem-visual--leading{grid-area:leadingVisual}.ActionListItem-visual--trailing{grid-area:trailingVisual}.ActionListItem-action--trailing{grid-area:trailingAction}.ActionListItem-descriptionWrap{display:flex;flex-direction:column;gap:var(--base-size-4,4px);grid-area:label}.ActionListItem-descriptionWrap .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListItem-descriptionWrap--inline{align-items:baseline;flex-direction:row;gap:var(--base-size-8,8px);position:relative}.ActionListItem-description{color:var(--color-fg-muted);font-size:var(--primer-text-body-size-small,12px);font-weight:var(--base-text-weight-normal,400);line-height:var(--primer-text-body-lineHeight-small,1.66667)}.ActionListItem-action,.ActionListItem-visual{fill:var(--color-fg-muted);align-items:center;color:var(--color-fg-muted);display:flex;min-height:var(--primer-control-medium-lineBoxHeight,20px);pointer-events:none}.ActionListItem-label{color:var(--color-fg-default);font-size:var(--primer-text-body-size-medium,14px);font-weight:var(--base-text-weight-normal,400);grid-area:label;line-height:var(--primer-text-body-lineHeight-medium,1.42857);position:relative}.ActionListItem-label--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ActionListItem--subItem>.ActionListContent>.ActionListItem-label{font-size:var(--primer-text-body-size-small,12px);line-height:var(--primer-text-body-lineHeight-small,1.66667)}.ActionListItem--withActions{align-items:center;display:flex;flex-wrap:nowrap}.ActionListItem-trailingAction{border-bottom-left-radius:0;border-top-left-radius:0}.ActionListItem--trailingActionHover .ActionListItem-trailingAction{visibility:hidden}.ActionListItem--trailingActionHover:focus-within .ActionListItem-trailingAction,.ActionListItem--trailingActionHover:hover .ActionListItem-trailingAction{visibility:visible}.ActionList-sectionDivider:not(:empty){color:var(--color-fg-muted);display:flex;flex-direction:column;font-size:var(--primer-text-body-size-small,12px);font-weight:var(--base-text-weight-semibold,600);line-height:var(--primer-text-body-lineHeight-small,1.66667);padding-block:var(--base-size-8,8px);padding-inline:var(--primer-actionListContent-paddingBlock)}.ActionList-sectionDivider:empty{background:var(--color-action-list-item-inline-divider);border:0;display:block;height:var(--primer-borderWidth-thin,1px);list-style:none;margin-block-end:var(--base-size-8,8px);margin-block-start:calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px));margin-inline:calc(var(--base-size-8, 8px)*-1);padding:0}.ActionList-sectionDivider .ActionList-sectionDivider-title{color:var(--color-fg-muted);font-size:var(--primer-text-body-size-small,12px);font-weight:var(--base-text-weight-semibold,600)}.ActionList-sectionDivider--filled{background:var(--color-canvas-subtle);border-bottom:solid var(--primer-borderWidth-thin,1px) var(--color-action-list-item-inline-divider);border-top:solid var(--primer-borderWidth-thin,1px) var(--color-action-list-item-inline-divider);margin-block-end:var(--base-size-8,8px);margin-block-start:calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px));margin-inline:calc(var(--base-size-8, 8px)*-1)}.ActionList-sectionDivider--filled:empty{box-sizing:border-box;height:var(--base-size-8,8px)}.ActionList-sectionDivider--filled:first-child{margin-block-start:0}
|
|
1
|
+
:root{--primer-actionListContent-paddingBlock:var(--primer-control-medium-paddingBlock,6px)}.ActionListWrap{list-style:none}.ActionListWrap--inset{padding:var(--base-size-8,8px)}.ActionListWrap--divided .ActionListItem-label:before{height:1px}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before,.ActionListWrap--divided .ActionListItem-label:before{background:var(--color-action-list-item-inline-divider);content:"";display:block;position:absolute;top:calc(var(--primer-actionListContent-paddingBlock)*-1);width:100%}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before{height:var(--primer-borderWidth-thin,1px)}.ActionListWrap--divided .ActionListItem-descriptionWrap--inline .ActionListItem-label:before{content:unset}.ActionList-sectionDivider+.ActionListItem .ActionListItem-descriptionWrap--inline:before,.ActionList-sectionDivider+.ActionListItem .ActionListItem-label:before,.ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline:before,.ActionListItem:first-of-type .ActionListItem-label:before,.ActionListWrap--divided .ActionListItem--navActive .ActionListItem-label:before,.ActionListWrap--divided .ActionListItem--navActive+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem{background-color:initial;border-radius:var(--primer-borderRadius-medium,6px);list-style:none;position:relative}.ActionListItem:active,.ActionListItem:hover{cursor:pointer}@media (hover:hover){.ActionListItem:hover .ActionListItem-descriptionWrap--inline:before,.ActionListItem:hover .ActionListItem-label:before,.ActionListItem:hover+.ActionListItem .ActionListItem-descriptionWrap--inline:before,.ActionListItem:hover+.ActionListItem .ActionListItem-label:before{visibility:hidden}}.ActionListItem[hidden]+.ActionList-sectionDivider{display:none}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent{z-index:1}@media (hover:hover){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover{background-color:var(--color-action-list-item-default-hover-bg)}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active{background-color:var(--color-action-list-item-default-active-bg)}@media (hover:hover){.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover,.ActionListItem:not(.ActionListItem--hasSubItem):hover{background-color:var(--color-action-list-item-default-hover-bg);cursor:pointer}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover:not(.ActionListItem--navActive,:focus-visible),.ActionListItem:not(.ActionListItem--hasSubItem):hover:not(.ActionListItem--navActive,:focus-visible){box-shadow:var(--primer-borderInset-thin,1px) var(--color-action-list-item-default-active-border);outline:solid var(--primer-borderWidth-thin,1px) #0000;outline-offset:calc(var(--primer-borderWidth-thin, 1px)*-1)}}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active,.ActionListItem:not(.ActionListItem--hasSubItem):active{background:var(--color-action-list-item-default-active-bg)}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active:not(.ActionListItem--navActive),.ActionListItem:not(.ActionListItem--hasSubItem):active:not(.ActionListItem--navActive){box-shadow:var(--primer-borderInset-thin,1px) var(--color-action-list-item-default-active-border);outline:solid var(--primer-borderWidth-thin,1px) #0000;outline-offset:calc(var(--primer-borderWidth-thin, 1px)*-1)}.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active .ActionListItem-label:before,.ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active+.ActionListItem .ActionListItem-label:before,.ActionListItem:not(.ActionListItem--hasSubItem):active .ActionListItem-label:before,.ActionListItem:not(.ActionListItem--hasSubItem):active+.ActionListItem .ActionListItem-label:before{visibility:hidden}.ActionListItem[aria-checked=true] .ActionListItem-multiSelectCheckmark,.ActionListItem[aria-selected=true] .ActionListItem-multiSelectCheckmark{opacity:1;transition:visibility 0 linear 0,opacity 50ms;visibility:visible}.ActionListItem[aria-checked=true] .ActionListItem-singleSelectCheckmark,.ActionListItem[aria-selected=true] .ActionListItem-singleSelectCheckmark{visibility:visible}@media screen and (prefers-reduced-motion:no-preference){.ActionListItem[aria-checked=true] .ActionListItem-singleSelectCheckmark,.ActionListItem[aria-selected=true] .ActionListItem-singleSelectCheckmark{animation:checkmarkIn .2s cubic-bezier(.11,0,.5,0) forwards;@keyframes checkmarkIn{0%{clip-path:inset(16px 0 0 0)}to{clip-path:inset(0 0 0 0)}}}}.ActionListItem[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.ActionListItem[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect{fill:var(--color-accent-fg);stroke:var(--color-accent-fg);stroke-width:var(--primer-borderWidth-thin,1px)}.ActionListItem[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark,.ActionListItem[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark{fill:var(--color-fg-on-emphasis)}.ActionListItem[aria-checked=false] .ActionListItem-multiSelectCheckmark,.ActionListItem[aria-selected=false] .ActionListItem-multiSelectCheckmark{opacity:0;transition:visibility 0 linear 50ms,opacity 50ms;visibility:hidden}.ActionListItem[aria-checked=false] .ActionListItem-singleSelectCheckmark,.ActionListItem[aria-selected=false] .ActionListItem-singleSelectCheckmark{clip-path:inset(16px 0 0 0);transition:visibility 0s linear .2s;visibility:hidden}@media screen and (prefers-reduced-motion:no-preference){.ActionListItem[aria-checked=false] .ActionListItem-singleSelectCheckmark,.ActionListItem[aria-selected=false] .ActionListItem-singleSelectCheckmark{animation:checkmarkOut .2s cubic-bezier(.11,0,.5,0) forwards;@keyframes checkmarkOut{0%{clip-path:inset(0 0 0 0)}to{clip-path:inset(16px 0 0 0)}}}}.ActionListItem[aria-checked=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect,.ActionListItem[aria-selected=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect{fill:var(--color-canvas-default);stroke:var(--color-border-default);stroke-width:var(--primer-borderWidth-thin,1px)}.ActionListItem[aria-checked=false] .ActionListItem-multiSelectIconRect,.ActionListItem[aria-selected=false] .ActionListItem-multiSelectIconRect{fill:var(--color-canvas-default);border:var(--primer-borderWidth-thin,1px) solid var(--color-border-default)}.ActionListItem[aria-selected=true]{background:var(--color-action-list-item-default-selected-bg);font-weight:var(--base-text-weight-normal,400)}@media (hover:hover){.ActionListItem[aria-selected=true]:hover{background-color:var(--color-action-list-item-default-hover-bg)}}.ActionListItem[aria-selected=true]+.ActionListItem:before,.ActionListItem[aria-selected=true]:before{visibility:hidden}.ActionListItem[aria-selected=true]:after{background:var(--color-accent-fg);border-radius:var(--primer-borderRadius-medium,6px);content:"";height:var(--base-size-24,24px);left:calc(var(--base-size-4, 4px)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,4px)}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--subItem) .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger){background:var(--color-action-list-item-default-selected-bg)}@media (hover:hover){.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):hover{background-color:var(--color-action-list-item-default-hover-bg)}}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)+.ActionListItem:before,.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):before{visibility:hidden}.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):after{background:var(--color-accent-fg);border-radius:var(--primer-borderRadius-medium,6px);content:"";height:var(--base-size-24,24px);left:calc(var(--base-size-8, 8px)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,4px)}.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-description,.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-label,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-description,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-label{color:var(--color-primer-fg-disabled)}.ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-visual,.ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-visual{fill:var(--color-primer-fg-disabled)}@media (hover:hover){.ActionListItem.ActionListItem--disabled:hover,.ActionListItem[aria-disabled=true]:hover{background-color:initial;cursor:not-allowed}}.ActionListItem.ActionListItem--danger .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListItem-visual{color:var(--color-danger-fg)}@media (hover:hover){.ActionListItem.ActionListItem--danger:hover{background:var(--color-action-list-item-danger-hover-bg)}.ActionListItem.ActionListItem--danger:hover .ActionListItem-label,.ActionListItem.ActionListItem--danger:hover .ActionListItem-visual{color:var(--color-action-list-item-danger-hover-text)}}.ActionListItem.ActionListItem--danger .ActionListContent:active{background:var(--color-action-list-item-danger-active-bg)}.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-label,.ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-visual{color:var(--color-action-list-item-danger-hover-text)}.ActionListContent{-webkit-tap-highlight-color:transparent;align-items:start;background-color:initial;border:none;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-fg-default);display:grid;grid-template-areas:"leadingAction leadingVisual label trailingVisual trailingAction";grid-template-columns:min-content min-content minmax(0,auto) min-content min-content;grid-template-rows:min-content;padding-block:var(--primer-actionListContent-paddingBlock);padding-inline:var(--primer-control-medium-paddingInline-condensed,8px);position:relative;text-align:left;touch-action:manipulation;transition:background 33.333ms linear;-webkit-user-select:none;user-select:none;width:100%}.ActionListContent>:not(:last-child){margin-right:var(--primer-control-medium-gap,8px)}.ActionListContent:hover{text-decoration:none}.ActionListContent[aria-disabled=true] .ActionListItem-description,.ActionListContent[aria-disabled=true] .ActionListItem-label{color:var(--color-primer-fg-disabled)}.ActionListContent[aria-disabled=true] .ActionListItem-visual{fill:var(--color-primer-fg-disabled)}@media (hover:hover){.ActionListContent[aria-disabled=true]:hover{background-color:initial;cursor:not-allowed}}@media screen and (prefers-reduced-motion:no-preference){.ActionListContent[aria-expanded]+.ActionList--subGroup{transition:opacity .16s cubic-bezier(.25,1,.5,1),transform .16s cubic-bezier(.25,1,.5,1)}}.ActionListContent[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-24,24px)}.ActionListContent.ActionListContent--visual16[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-32,32px)}.ActionListContent.ActionListContent--visual20[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-36,36px)}.ActionListContent.ActionListContent--visual24[aria-expanded]+.ActionList--subGroup .ActionListContent{padding-left:var(--base-size-40,40px)}.ActionListContent[aria-expanded=true] .ActionListItem-collapseIcon{transform:scaleY(-1);transition:transform .12s linear}.ActionListContent[aria-expanded=true]+.ActionList--subGroup{height:auto;opacity:1;overflow:visible;transform:translateY(0);visibility:visible}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=true]>.ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListContent[aria-expanded=false] .ActionListItem-collapseIcon{transform:scaleY(1);transition:transform .12s linear}.ActionListContent[aria-expanded=false]+.ActionList--subGroup{height:0;opacity:0;overflow:hidden;transform:translateY(calc(var(--base-size-16, 16px)*-1));visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]{background:var(--color-action-list-item-default-selected-bg)}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false] .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]+.ActionListItem:before,.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:before{visibility:hidden}.ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:after{background:var(--color-accent-fg);border-radius:var(--primer-borderRadius-medium,6px);content:"";height:var(--base-size-24,24px);left:calc(var(--base-size-8, 8px)*-1);position:absolute;top:calc(50% - 12px);width:var(--base-size-4,4px)}.ActionListContent.ActionListContent--sizeLarge{--primer-actionListContent-paddingBlock:var(--primer-control-large-paddingBlock,0.625rem)}.ActionListContent.ActionListContent--sizeXLarge{--primer-actionListContent-paddingBlock:var(--primer-control-xlarge-paddingBlock,0.875rem)}@media (pointer:coarse){.ActionListContent{--primer-actionListContent-paddingBlock:var(--primer-control-large-paddingBlock,0.625rem)}}.ActionListContent.ActionListContent--blockDescription .ActionListItem-visual{place-self:start}.ActionListItem-action--leading{grid-area:leadingAction}.ActionListItem-visual--leading{grid-area:leadingVisual}.ActionListItem-visual--trailing{grid-area:trailingVisual}.ActionListItem-action--trailing{grid-area:trailingAction}.ActionListItem-descriptionWrap{display:flex;flex-direction:column;gap:var(--base-size-4,4px);grid-area:label}.ActionListItem-descriptionWrap .ActionListItem-label{font-weight:var(--base-text-weight-semibold,600)}.ActionListItem-descriptionWrap--inline{align-items:baseline;flex-direction:row;gap:var(--base-size-8,8px);position:relative}.ActionListItem-description{color:var(--color-fg-muted);font-size:var(--primer-text-body-size-small,12px);font-weight:var(--base-text-weight-normal,400);line-height:var(--primer-text-body-lineHeight-small,1.66667)}.ActionListItem-action,.ActionListItem-visual{fill:var(--color-fg-muted);align-items:center;color:var(--color-fg-muted);display:flex;min-height:var(--primer-control-medium-lineBoxHeight,20px);pointer-events:none}.ActionListItem-label{color:var(--color-fg-default);font-size:var(--primer-text-body-size-medium,14px);font-weight:var(--base-text-weight-normal,400);grid-area:label;line-height:var(--primer-text-body-lineHeight-medium,1.42857);position:relative}.ActionListItem-label--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ActionListItem--subItem>.ActionListContent>.ActionListItem-label{font-size:var(--primer-text-body-size-small,12px);line-height:var(--primer-text-body-lineHeight-small,1.66667)}.ActionListItem--withActions{align-items:center;display:flex;flex-wrap:nowrap}.ActionListItem-trailingAction{border-bottom-left-radius:0;border-top-left-radius:0}.ActionListItem--trailingActionHover .ActionListItem-trailingAction{visibility:hidden}.ActionListItem--trailingActionHover:focus-within .ActionListItem-trailingAction,.ActionListItem--trailingActionHover:hover .ActionListItem-trailingAction{visibility:visible}.ActionList-sectionDivider:not(:empty){color:var(--color-fg-muted);display:flex;flex-direction:column;font-size:var(--primer-text-body-size-small,12px);font-weight:var(--base-text-weight-semibold,600);line-height:var(--primer-text-body-lineHeight-small,1.66667);padding-block:var(--base-size-8,8px);padding-inline:var(--primer-actionListContent-paddingBlock)}.ActionList-sectionDivider:empty{background:var(--color-action-list-item-inline-divider);border:0;display:block;height:var(--primer-borderWidth-thin,1px);list-style:none;margin-block-end:var(--base-size-8,8px);margin-block-start:calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px));margin-inline:calc(var(--base-size-8, 8px)*-1);padding:0}.ActionList-sectionDivider .ActionList-sectionDivider-title{color:var(--color-fg-muted);font-size:var(--primer-text-body-size-small,12px);font-weight:var(--base-text-weight-semibold,600)}.ActionList-sectionDivider--filled{background:var(--color-canvas-subtle);border-bottom:solid var(--primer-borderWidth-thin,1px) var(--color-action-list-item-inline-divider);border-top:solid var(--primer-borderWidth-thin,1px) var(--color-action-list-item-inline-divider);margin-block-end:var(--base-size-8,8px);margin-block-start:calc(var(--base-size-8, 8px) - var(--primer-borderWidth-thin, 1px));margin-inline:calc(var(--base-size-8, 8px)*-1)}.ActionList-sectionDivider--filled:empty{box-sizing:border-box;height:var(--base-size-8,8px)}.ActionList-sectionDivider--filled:first-child{margin-block-start:0}
|
|
@@ -61,9 +61,13 @@
|
|
|
61
61
|
".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)+.ActionListItem:before",
|
|
62
62
|
".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):before",
|
|
63
63
|
".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):after",
|
|
64
|
+
".ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-description",
|
|
65
|
+
".ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-label",
|
|
64
66
|
".ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-description",
|
|
65
67
|
".ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-label",
|
|
68
|
+
".ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-visual",
|
|
66
69
|
".ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-visual",
|
|
70
|
+
".ActionListItem.ActionListItem--disabled:hover",
|
|
67
71
|
".ActionListItem[aria-disabled=true]:hover",
|
|
68
72
|
".ActionListItem.ActionListItem--danger .ActionListItem-label",
|
|
69
73
|
".ActionListItem.ActionListItem--danger .ActionListItem-visual",
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import '@github/include-fragment-element';
|
|
2
|
+
declare type SelectVariant = 'single' | 'multiple' | null;
|
|
3
|
+
export declare class ActionMenuElement extends HTMLElement {
|
|
4
|
+
#private;
|
|
5
|
+
get selectVariant(): SelectVariant;
|
|
6
|
+
set selectVariant(variant: SelectVariant);
|
|
7
|
+
get dynamicLabelPrefix(): string;
|
|
8
|
+
set dynamicLabelPrefix(value: string);
|
|
9
|
+
get dynamicLabel(): boolean;
|
|
10
|
+
set dynamicLabel(value: boolean);
|
|
11
|
+
get popoverElement(): HTMLElement | null;
|
|
12
|
+
get invokerElement(): HTMLElement | null;
|
|
13
|
+
connectedCallback(): void;
|
|
14
|
+
disconnectedCallback(): void;
|
|
15
|
+
handleEvent(event: Event): void;
|
|
16
|
+
}
|
|
17
|
+
declare global {
|
|
18
|
+
interface Window {
|
|
19
|
+
ActionMenuElement: typeof ActionMenuElement;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
export {};
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
|
|
2
|
+
if (kind === "m") throw new TypeError("Private method is not writable");
|
|
3
|
+
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
|
|
4
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
5
|
+
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
6
|
+
};
|
|
7
|
+
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
8
|
+
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
|
|
9
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
10
|
+
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
11
|
+
};
|
|
12
|
+
var _ActionMenuElement_instances, _ActionMenuElement_abortController, _ActionMenuElement_originalLabel, _ActionMenuElement_setDynamicLabel;
|
|
13
|
+
import '@github/include-fragment-element';
|
|
14
|
+
const popoverSelector = (() => {
|
|
15
|
+
try {
|
|
16
|
+
document.querySelector(':open');
|
|
17
|
+
return ':open';
|
|
18
|
+
}
|
|
19
|
+
catch (_a) {
|
|
20
|
+
return '.\\:open';
|
|
21
|
+
}
|
|
22
|
+
})();
|
|
23
|
+
const menuItemSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]', '[role="none"]'];
|
|
24
|
+
export class ActionMenuElement extends HTMLElement {
|
|
25
|
+
constructor() {
|
|
26
|
+
super(...arguments);
|
|
27
|
+
_ActionMenuElement_instances.add(this);
|
|
28
|
+
_ActionMenuElement_abortController.set(this, void 0);
|
|
29
|
+
_ActionMenuElement_originalLabel.set(this, '');
|
|
30
|
+
}
|
|
31
|
+
get selectVariant() {
|
|
32
|
+
return this.getAttribute('data-select-variant');
|
|
33
|
+
}
|
|
34
|
+
set selectVariant(variant) {
|
|
35
|
+
if (variant) {
|
|
36
|
+
this.setAttribute('data-select-variant', variant);
|
|
37
|
+
}
|
|
38
|
+
else {
|
|
39
|
+
this.removeAttribute('variant');
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
get dynamicLabelPrefix() {
|
|
43
|
+
const prefix = this.getAttribute('data-dynamic-label-prefix');
|
|
44
|
+
if (!prefix)
|
|
45
|
+
return '';
|
|
46
|
+
return `${prefix}:`;
|
|
47
|
+
}
|
|
48
|
+
set dynamicLabelPrefix(value) {
|
|
49
|
+
this.setAttribute('data-dynamic-label', value);
|
|
50
|
+
}
|
|
51
|
+
get dynamicLabel() {
|
|
52
|
+
return this.hasAttribute('data-dynamic-label');
|
|
53
|
+
}
|
|
54
|
+
set dynamicLabel(value) {
|
|
55
|
+
this.toggleAttribute('data-dynamic-label', value);
|
|
56
|
+
}
|
|
57
|
+
get popoverElement() {
|
|
58
|
+
return this.querySelector('[popover]');
|
|
59
|
+
}
|
|
60
|
+
get invokerElement() {
|
|
61
|
+
var _a;
|
|
62
|
+
const id = (_a = this.querySelector('[role=menu]')) === null || _a === void 0 ? void 0 : _a.id;
|
|
63
|
+
if (!id)
|
|
64
|
+
return null;
|
|
65
|
+
for (const el of this.querySelectorAll(`[aria-controls]`)) {
|
|
66
|
+
if (el.getAttribute('aria-controls') === id)
|
|
67
|
+
return el;
|
|
68
|
+
}
|
|
69
|
+
return null;
|
|
70
|
+
}
|
|
71
|
+
connectedCallback() {
|
|
72
|
+
const { signal } = (__classPrivateFieldSet(this, _ActionMenuElement_abortController, new AbortController(), "f"));
|
|
73
|
+
this.addEventListener('keydown', this, { signal });
|
|
74
|
+
this.addEventListener('click', this, { signal });
|
|
75
|
+
this.addEventListener('mouseover', this, { signal });
|
|
76
|
+
this.addEventListener('focusout', this, { signal });
|
|
77
|
+
__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_setDynamicLabel).call(this);
|
|
78
|
+
}
|
|
79
|
+
disconnectedCallback() {
|
|
80
|
+
__classPrivateFieldGet(this, _ActionMenuElement_abortController, "f").abort();
|
|
81
|
+
}
|
|
82
|
+
handleEvent(event) {
|
|
83
|
+
var _a, _b, _c, _d;
|
|
84
|
+
if (!((_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.matches(popoverSelector)))
|
|
85
|
+
return;
|
|
86
|
+
if (event.type === 'focusout' && !this.contains(event.relatedTarget)) {
|
|
87
|
+
(_b = this.popoverElement) === null || _b === void 0 ? void 0 : _b.hidePopover();
|
|
88
|
+
}
|
|
89
|
+
else if ((event instanceof KeyboardEvent &&
|
|
90
|
+
event.type === 'keydown' &&
|
|
91
|
+
!(event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) &&
|
|
92
|
+
event.key === 'Enter') ||
|
|
93
|
+
(event instanceof MouseEvent && event.type === 'click')) {
|
|
94
|
+
const item = (_c = event.target.closest(menuItemSelectors.join(','))) === null || _c === void 0 ? void 0 : _c.closest('li');
|
|
95
|
+
if (!item)
|
|
96
|
+
return;
|
|
97
|
+
const ariaChecked = item.getAttribute('aria-checked');
|
|
98
|
+
const checked = ariaChecked !== 'true';
|
|
99
|
+
item.setAttribute('aria-checked', `${checked}`);
|
|
100
|
+
if (this.selectVariant === 'single') {
|
|
101
|
+
const selector = menuItemSelectors.map(s => `li[aria-checked] ${s}`).join(',');
|
|
102
|
+
for (const checkedItemContent of this.querySelectorAll(selector)) {
|
|
103
|
+
const checkedItem = checkedItemContent.closest('li');
|
|
104
|
+
if (checkedItem !== item) {
|
|
105
|
+
checkedItem.setAttribute('aria-checked', 'false');
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
__classPrivateFieldGet(this, _ActionMenuElement_instances, "m", _ActionMenuElement_setDynamicLabel).call(this);
|
|
109
|
+
}
|
|
110
|
+
event.preventDefault();
|
|
111
|
+
(_d = this.popoverElement) === null || _d === void 0 ? void 0 : _d.hidePopover();
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
_ActionMenuElement_abortController = new WeakMap(), _ActionMenuElement_originalLabel = new WeakMap(), _ActionMenuElement_instances = new WeakSet(), _ActionMenuElement_setDynamicLabel = function _ActionMenuElement_setDynamicLabel() {
|
|
116
|
+
if (!this.dynamicLabel)
|
|
117
|
+
return;
|
|
118
|
+
const invoker = this.invokerElement;
|
|
119
|
+
if (!invoker)
|
|
120
|
+
return;
|
|
121
|
+
const selector = menuItemSelectors.map(s => `${s}[aria-checked=true]`).join(',');
|
|
122
|
+
const item = this.querySelector(selector);
|
|
123
|
+
if (item && this.dynamicLabel) {
|
|
124
|
+
__classPrivateFieldSet(this, _ActionMenuElement_originalLabel, __classPrivateFieldGet(this, _ActionMenuElement_originalLabel, "f") || (invoker.textContent || ''), "f");
|
|
125
|
+
const prefixSpan = document.createElement('span');
|
|
126
|
+
prefixSpan.classList.add('color-fg-muted');
|
|
127
|
+
const contentSpan = document.createElement('span');
|
|
128
|
+
prefixSpan.textContent = this.dynamicLabelPrefix;
|
|
129
|
+
contentSpan.textContent = item.textContent || '';
|
|
130
|
+
invoker.replaceChildren(prefixSpan, contentSpan);
|
|
131
|
+
}
|
|
132
|
+
else {
|
|
133
|
+
invoker.textContent = __classPrivateFieldGet(this, _ActionMenuElement_originalLabel, "f");
|
|
134
|
+
}
|
|
135
|
+
};
|
|
136
|
+
if (!window.customElements.get('action-menu')) {
|
|
137
|
+
window.ActionMenuElement = ActionMenuElement;
|
|
138
|
+
window.customElements.define('action-menu', ActionMenuElement);
|
|
139
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.Overlay[popover]{border-width:0;padding:0;position:absolute}.Overlay[popover]:not(:open){display:none}anchored-position{display:block}
|
|
1
|
+
.Overlay[popover]{border-width:0;padding:0;position:absolute;width:min(192px,100vw - 2rem)}.Overlay[popover]:not(:open){display:none}anchored-position{display:block}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--primer-duration-fast:80ms;--primer-easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--primer-borderWidth-thin,1px) solid;border-color:#0000;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-btn-text);cursor:pointer;display:flex;flex-direction:row;font-size:var(--primer-text-body-size-medium,14px);font-weight:var(--base-text-weight-medium,500);gap:var(--
|
|
1
|
+
:root{--primer-duration-fast:80ms;--primer-easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--primer-borderWidth-thin,1px) solid;border-color:#0000;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-btn-text);cursor:pointer;display:flex;flex-direction:row;font-size:var(--primer-text-body-size-medium,14px);font-weight:var(--base-text-weight-medium,500);gap:var(--base-size-4,4px);height:var(--primer-control-medium-size,32px);justify-content:space-between;min-width:max-content;padding:0 var(--primer-control-medium-paddingInline-normal,12px);position:relative;text-align:center;transition:var(--primer-duration-fast) var(--primer-easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:coarse){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:var(--primer-duration-fast)}.Button:active{transition:none}.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}.Button-withTooltip{display:inline-block;position:relative}a.Button,summary.Button{display:inline-flex}a.Button:hover,summary.Button:hover{text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:var(--primer-control-medium-gap,8px)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{background-color:var(--color-btn-counter-bg);color:inherit}.Button-label{grid-area:text;line-height:var(--primer-text-body-lineHeight-medium,1.42857);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4, 4px)*-1)}.Button--small{font-size:var(--primer-text-body-size-small,12px);gap:var(--primer-control-small-gap,4px);height:var(--primer-control-small-size,28px);padding:0 var(--primer-control-small-paddingInline-condensed,8px)}.Button--small .Button-label{line-height:var(--primer-text-body-lineHeight-small,1.66667)}.Button--small .Button-content>:not(:last-child){margin-right:var(--primer-control-small-gap,4px)}.Button--large{gap:var(--primer-control-large-gap,8px);height:var(--primer-control-large-size,40px);padding:0 var(--primer-control-large-paddingInline-spacious,16px)}.Button--large .Button-label{line-height:var(--primer-text-body-lineHeight-large,1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--primer-control-large-gap,8px)}.Button--fullWidth{width:100%}.Button--primary{fill:var(--color-btn-primary-icon);background-color:var(--color-btn-primary-bg);border-color:var(--color-btn-primary-border);box-shadow:var(--color-btn-primary-shadow),var(--color-btn-primary-inset-shadow);color:var(--color-btn-primary-text)}.Button--primary:hover:not(:disabled){background-color:var(--color-btn-primary-hover-bg);border-color:var(--color-btn-primary-hover-border)}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--color-btn-primary-selected-bg);box-shadow:var(--color-btn-primary-selected-shadow)}.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--color-btn-primary-disabled-text);background-color:var(--color-btn-primary-disabled-bg);border-color:var(--color-btn-primary-disabled-border);color:var(--color-btn-primary-disabled-text)}.Button--secondary{fill:var(--color-fg-muted);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-text)}.Button--secondary:hover:not(:disabled){background-color:var(--color-btn-hover-bg);border-color:var(--color-btn-hover-border)}.Button--secondary:active:not(:disabled){background-color:var(--color-btn-active-bg);border-color:var(--color-btn-active-border)}.Button--secondary[aria-pressed=true]{background-color:var(--color-btn-selected-bg);box-shadow:var(--color-primer-shadow-inset)}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--invisible{color:var(--color-btn-text)}.Button--invisible:hover:not(:disabled){background-color:var(--color-action-list-item-default-hover-bg)}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--color-action-list-item-default-active-bg)}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--color-accent-fg)}.Button--invisible .Button-visual{color:var(--color-fg-muted)}.Button--link{fill:var(--color-accent-fg);border:none;color:var(--color-accent-fg);display:inline-block;font-size:inherit;height:unset;padding:0}.Button--link:hover:not(:disabled){text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:initial;border-color:#0000;color:var(--color-primer-fg-disabled)}.Button--danger{fill:var(--color-btn-danger-icon);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-danger-text)}.Button--danger:hover:not(:disabled){fill:var(--color-btn-danger-hover-text);background-color:var(--color-btn-danger-hover-bg);border-color:var(--color-btn-danger-hover-border);box-shadow:var(--color-btn-danger-hover-shadow),var(--color-btn-danger-hover-inset-shadow);color:var(--color-btn-danger-hover-text)}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{fill:var(--color-btn-danger-selected-text);background-color:var(--color-btn-danger-selected-bg);border-color:var(--color-btn-danger-selected-border);box-shadow:var(--color-btn-danger-selected-shadow);color:var(--color-btn-danger-selected-text)}.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--color-btn-danger-disabled-text);background-color:var(--color-btn-danger-disabled-bg);border-color:var(--color-btn-border);color:var(--color-btn-danger-disabled-text)}.Button--iconOnly{display:grid;padding:unset;place-content:center;width:var(--primer-control-medium-size,32px)}.Button--iconOnly.Button--small{width:var(--primer-control-small-size,28px)}.Button--iconOnly.Button--large{width:var(--primer-control-large-size,40px)}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import '@oddbird/popover-polyfill';
|
|
2
|
+
export default class FocusGroupElement extends HTMLElement {
|
|
3
|
+
#private;
|
|
4
|
+
get nowrap(): boolean;
|
|
5
|
+
set nowrap(value: boolean);
|
|
6
|
+
get direction(): 'horizontal' | 'vertical' | 'both';
|
|
7
|
+
set direction(value: 'horizontal' | 'vertical' | 'both');
|
|
8
|
+
get retain(): boolean;
|
|
9
|
+
set retain(value: boolean);
|
|
10
|
+
get mnemonics(): boolean;
|
|
11
|
+
connectedCallback(): void;
|
|
12
|
+
disconnectedCallback(): void;
|
|
13
|
+
handleEvent(event: Event): void;
|
|
14
|
+
}
|
|
15
|
+
declare global {
|
|
16
|
+
interface Window {
|
|
17
|
+
FocusGroupElement: typeof FocusGroupElement;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
|
|
2
|
+
if (kind === "m") throw new TypeError("Private method is not writable");
|
|
3
|
+
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
|
|
4
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
5
|
+
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
6
|
+
};
|
|
7
|
+
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
8
|
+
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
|
|
9
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
10
|
+
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
11
|
+
};
|
|
12
|
+
var _FocusGroupElement_instances, _FocusGroupElement_abortController, _FocusGroupElement_items_get;
|
|
13
|
+
import '@oddbird/popover-polyfill';
|
|
14
|
+
const menuItemSelector = '[role="menuitem"],[role="menuitemcheckbox"],[role="menuitemradio"]';
|
|
15
|
+
const popoverSelector = (() => {
|
|
16
|
+
try {
|
|
17
|
+
document.querySelector(':open');
|
|
18
|
+
return ':open';
|
|
19
|
+
}
|
|
20
|
+
catch (_a) {
|
|
21
|
+
return '.\\:open';
|
|
22
|
+
}
|
|
23
|
+
})();
|
|
24
|
+
const getMnemonicFor = (item) => { var _a; return (_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim()[0].toLowerCase(); };
|
|
25
|
+
const printable = /^\S$/;
|
|
26
|
+
export default class FocusGroupElement extends HTMLElement {
|
|
27
|
+
constructor() {
|
|
28
|
+
super(...arguments);
|
|
29
|
+
_FocusGroupElement_instances.add(this);
|
|
30
|
+
_FocusGroupElement_abortController.set(this, null);
|
|
31
|
+
}
|
|
32
|
+
get nowrap() {
|
|
33
|
+
return this.hasAttribute('nowrap');
|
|
34
|
+
}
|
|
35
|
+
set nowrap(value) {
|
|
36
|
+
this.toggleAttribute('nowrap', value);
|
|
37
|
+
}
|
|
38
|
+
get direction() {
|
|
39
|
+
if (this.getAttribute('direction') === 'horizontal')
|
|
40
|
+
return 'horizontal';
|
|
41
|
+
return 'vertical';
|
|
42
|
+
}
|
|
43
|
+
set direction(value) {
|
|
44
|
+
this.setAttribute('direction', `${value}`);
|
|
45
|
+
}
|
|
46
|
+
get retain() {
|
|
47
|
+
return this.hasAttribute('retain');
|
|
48
|
+
}
|
|
49
|
+
set retain(value) {
|
|
50
|
+
this.toggleAttribute('retain', value);
|
|
51
|
+
}
|
|
52
|
+
get mnemonics() {
|
|
53
|
+
return this.hasAttribute('mnemonics');
|
|
54
|
+
}
|
|
55
|
+
connectedCallback() {
|
|
56
|
+
__classPrivateFieldSet(this, _FocusGroupElement_abortController, new AbortController(), "f");
|
|
57
|
+
const { signal } = __classPrivateFieldGet(this, _FocusGroupElement_abortController, "f");
|
|
58
|
+
this.addEventListener('keydown', this, { signal });
|
|
59
|
+
this.addEventListener('click', this, { signal });
|
|
60
|
+
this.addEventListener('mouseover', this, { signal });
|
|
61
|
+
this.addEventListener('focusin', this, { signal });
|
|
62
|
+
}
|
|
63
|
+
disconnectedCallback() {
|
|
64
|
+
var _a;
|
|
65
|
+
(_a = __classPrivateFieldGet(this, _FocusGroupElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
|
|
66
|
+
}
|
|
67
|
+
handleEvent(event) {
|
|
68
|
+
const { direction, nowrap } = this;
|
|
69
|
+
if (event.type === 'focusin') {
|
|
70
|
+
if (this.retain && event.target instanceof Element && event.target.matches(menuItemSelector)) {
|
|
71
|
+
for (const item of __classPrivateFieldGet(this, _FocusGroupElement_instances, "a", _FocusGroupElement_items_get)) {
|
|
72
|
+
item.setAttribute('tabindex', item === event.target ? '0' : '-1');
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
else if (event instanceof KeyboardEvent) {
|
|
77
|
+
const items = Array.from(__classPrivateFieldGet(this, _FocusGroupElement_instances, "a", _FocusGroupElement_items_get));
|
|
78
|
+
let index = items.indexOf(event.target);
|
|
79
|
+
const key = event.key;
|
|
80
|
+
if (key === 'Up' || key === 'ArrowUp') {
|
|
81
|
+
if (direction === 'vertical' || direction === 'both') {
|
|
82
|
+
index -= index < 0 ? 0 : 1;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
else if (key === 'Down' || key === 'ArrowDown') {
|
|
86
|
+
if (direction === 'vertical' || direction === 'both') {
|
|
87
|
+
index += 1;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
else if (event.key === 'Left' || event.key === 'ArrowLeft') {
|
|
91
|
+
if (direction === 'horizontal' || direction === 'both') {
|
|
92
|
+
index -= 1;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
else if (event.key === 'Right' || event.key === 'ArrowRight') {
|
|
96
|
+
if (direction === 'horizontal' || direction === 'both') {
|
|
97
|
+
index += 1;
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
else if (event.key === 'Home' || event.key === 'PageUp') {
|
|
101
|
+
index = 0;
|
|
102
|
+
}
|
|
103
|
+
else if (event.key === 'End' || event.key === 'PageDown') {
|
|
104
|
+
index = items.length - 1;
|
|
105
|
+
}
|
|
106
|
+
else if (this.mnemonics && printable.test(key)) {
|
|
107
|
+
const mnemonic = key.toLowerCase();
|
|
108
|
+
const offset = index > 0 && getMnemonicFor(event.target) === mnemonic ? index : 0;
|
|
109
|
+
index = items.findIndex((item, i) => i > offset && getMnemonicFor(item) === mnemonic);
|
|
110
|
+
if (index < 0 && !nowrap) {
|
|
111
|
+
index = items.findIndex(item => getMnemonicFor(item) === mnemonic);
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
else {
|
|
115
|
+
return;
|
|
116
|
+
}
|
|
117
|
+
if (nowrap && index < 0)
|
|
118
|
+
index = 0;
|
|
119
|
+
if (!nowrap && index >= items.length)
|
|
120
|
+
index = 0;
|
|
121
|
+
const focusEl = items.at(Math.min(index, items.length - 1));
|
|
122
|
+
{
|
|
123
|
+
let el = focusEl;
|
|
124
|
+
do {
|
|
125
|
+
el = el.closest(`[popover]:not(${popoverSelector})`);
|
|
126
|
+
if ((el === null || el === void 0 ? void 0 : el.popover) === 'auto') {
|
|
127
|
+
el.showPopover();
|
|
128
|
+
}
|
|
129
|
+
else {
|
|
130
|
+
el = (el === null || el === void 0 ? void 0 : el.parentElement) || null;
|
|
131
|
+
}
|
|
132
|
+
} while (el);
|
|
133
|
+
}
|
|
134
|
+
focusEl === null || focusEl === void 0 ? void 0 : focusEl.focus();
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
_FocusGroupElement_abortController = new WeakMap(), _FocusGroupElement_instances = new WeakSet(), _FocusGroupElement_items_get = function _FocusGroupElement_items_get() {
|
|
139
|
+
return this.querySelectorAll(menuItemSelector);
|
|
140
|
+
};
|
|
141
|
+
if (!customElements.get('focus-group')) {
|
|
142
|
+
window.FocusGroupElement = FocusGroupElement;
|
|
143
|
+
customElements.define('focus-group', FocusGroupElement);
|
|
144
|
+
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import '@oddbird/popover-polyfill';
|
|
2
2
|
import './alpha/dropdown';
|
|
3
3
|
import './anchored_position';
|
|
4
|
+
import './focus_group';
|
|
4
5
|
import './alpha/image_crop';
|
|
5
6
|
import './alpha/modal_dialog';
|
|
6
7
|
import './alpha/nav_list';
|
|
@@ -15,3 +16,4 @@ import './alpha/tab_container';
|
|
|
15
16
|
import '../../../lib/primer/forms/primer_multi_input';
|
|
16
17
|
import '../../../lib/primer/forms/primer_text_field';
|
|
17
18
|
import '../../../lib/primer/forms/toggle_switch_input';
|
|
19
|
+
import './alpha/action_menu/action_menu_element';
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import '@oddbird/popover-polyfill';
|
|
2
2
|
import './alpha/dropdown';
|
|
3
3
|
import './anchored_position';
|
|
4
|
+
import './focus_group';
|
|
4
5
|
import './alpha/image_crop';
|
|
5
6
|
import './alpha/modal_dialog';
|
|
6
7
|
import './alpha/nav_list';
|
|
@@ -15,3 +16,4 @@ import './alpha/tab_container';
|
|
|
15
16
|
import '../../../lib/primer/forms/primer_multi_input';
|
|
16
17
|
import '../../../lib/primer/forms/primer_text_field';
|
|
17
18
|
import '../../../lib/primer/forms/toggle_switch_input';
|
|
19
|
+
import './alpha/action_menu/action_menu_element';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/view-components",
|
|
3
|
-
"version": "0.1.5
|
|
3
|
+
"version": "0.1.5",
|
|
4
4
|
"description": "ViewComponents for the Primer Design System",
|
|
5
5
|
"main": "app/assets/javascripts/primer_view_components.js",
|
|
6
6
|
"module": "app/components/primer/primer.js",
|
|
@@ -50,10 +50,11 @@
|
|
|
50
50
|
"@github/clipboard-copy-element": "^1.1.2",
|
|
51
51
|
"@github/details-menu-element": "^1.0.12",
|
|
52
52
|
"@github/image-crop-element": "^5.0.0",
|
|
53
|
+
"@github/include-fragment-element": "^6.1.1",
|
|
53
54
|
"@github/mini-throttle": "^2.1.0",
|
|
54
55
|
"@github/relative-time-element": "^4.0.0",
|
|
55
56
|
"@github/tab-container-element": "^3.1.2",
|
|
56
|
-
"@oddbird/popover-polyfill": "^0.
|
|
57
|
+
"@oddbird/popover-polyfill": "^0.1.1",
|
|
57
58
|
"@primer/behaviors": "^1.2.0"
|
|
58
59
|
},
|
|
59
60
|
"devDependencies": {
|