@primer/react 38.38.0-rc.37926a655 → 38.38.0-rc.69771f80e

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.
Files changed (17) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/dist/SegmentedControl/SegmentedControl-e68d4197.css +2 -0
  3. package/dist/SegmentedControl/SegmentedControl-e68d4197.css.map +1 -0
  4. package/dist/SegmentedControl/SegmentedControl.d.ts +5 -1
  5. package/dist/SegmentedControl/SegmentedControl.js +202 -165
  6. package/dist/SegmentedControl/SegmentedControl.module.css.js +8 -4
  7. package/dist/SegmentedControl/SegmentedControlAction.d.ts +12 -0
  8. package/dist/SegmentedControl/SegmentedControlAction.js +111 -0
  9. package/dist/SegmentedControl/SegmentedControlActionContext.js +5 -0
  10. package/dist/SegmentedControl/SegmentedControlDivider.d.ts +9 -0
  11. package/dist/SegmentedControl/SegmentedControlDivider.js +24 -0
  12. package/dist/SegmentedControl/index.d.ts +3 -1
  13. package/dist/index.d.ts +3 -1
  14. package/generated/components.json +57 -2
  15. package/package.json +1 -1
  16. package/dist/SegmentedControl/SegmentedControl-4ef72733.css +0 -2
  17. package/dist/SegmentedControl/SegmentedControl-4ef72733.css.map +0 -1
package/CHANGELOG.md CHANGED
@@ -6,6 +6,8 @@
6
6
 
7
7
  - [#8300](https://github.com/primer/react/pull/8300) [`3a32d6f`](https://github.com/primer/react/commit/3a32d6ff015b11dd2ac9bf299f8f558bb1e46ef5) Thanks [@joshblack](https://github.com/joshblack)! - Promote AriaStatus and AriaAlert from experimental to stable
8
8
 
9
+ - [#8325](https://github.com/primer/react/pull/8325) [`4266cab`](https://github.com/primer/react/commit/4266cab4cb9e744f70cc13a8904c3b29a6499284) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - SegmentedControl: Add a subtle visual variant with group dividers and an optional trailing action child.
10
+
9
11
  ### Patch Changes
10
12
 
11
13
  - [#8343](https://github.com/primer/react/pull/8343) [`7034e1f`](https://github.com/primer/react/commit/7034e1fbb754883b29a05fdf75eea8704359e7bb) Thanks [@llastflowers](https://github.com/llastflowers)! - Don't focus Autocomplete menu items while menu is closed: fix SR announcement bug and menu item skipping bug
package/dist/SegmentedControl/SegmentedControl-e68d4197.css ADDED
@@ -0,0 +1,2 @@
1
+ .prc-SegmentedControl-SegmentedControl-lqIXp{--segmented-control-icon-width:32px;--segmented-control-outer-radius:var(--borderRadius-medium,0.375rem);background-color:var(--controlTrack-bgColor-rest,#e6eaef);border:var(--borderWidth-thin,.0625rem) solid var(--controlTrack-borderColor-rest,transparent);border-radius:var(--borderRadius-medium,.375rem);display:inline-flex;font-size:var(--text-body-size-medium,.875rem);height:32px;margin:0;padding:0;position:relative}@supports (anchor-name:--value){.prc-SegmentedControl-SegmentedControl-lqIXp:before{position-anchor:--segmented-control-current-item;background-color:var(--controlKnob-bgColor-rest,#fff);border:var(--borderWidth-thin,.0625rem) solid var(--controlKnob-borderColor-rest,#d1d9e0);border-radius:var(--segmented-control-outer-radius);content:"";inset:anchor(top) anchor(right) anchor(bottom) anchor(left);position:absolute}@media (prefers-reduced-motion:no-preference){.prc-SegmentedControl-SegmentedControl-lqIXp:before{transition:inset var(--base-duration-200,[ object Object ]) var(--base-easing-easeInOut,.6,0,.2,1)}}.prc-SegmentedControl-SegmentedControl-lqIXp[data-disable-knob-transition]:before{transition:none}}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}.prc-SegmentedControl-SegmentedControl-lqIXp>[data-component="SegmentedControl.Divider"]{align-self:stretch;background-color:var(--borderColor-default,#d1d9e0);display:none;list-style:none;margin-block:var(--base-size-8,.5rem);margin-inline-end:calc(var(--base-size-8,.5rem) - 1px);margin-inline-start:var(--base-size-8,.5rem);width:1px}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-narrow=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-narrow=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}@media (min-width:48rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-regular=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-regular=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}@media (min-width:87.5rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-wide=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-regular=true]:not([data-full-width-wide=true]),.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-wide=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant=dropdown]{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]){--segmented-control-outer-radius:var(--borderRadius-large,0.75rem);--segmented-control-button-bg-inset:0px;background-color:transparent;border:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]):before{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:transparent}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle])>[data-component="SegmentedControl.Divider"]{display:block}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz{border:0;border-radius:var(--borderRadius-large,.75rem);color:var(--fgColor-muted,#59636e);padding:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz .prc-SegmentedControl-Content-1COlk{border:0;padding-inline:var(--base-size-12,.75rem)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true]{color:var(--fgColor-default,#1f2328)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}@supports (color:color-mix(in lch,red,blue)){.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:color-mix(in srgb,var(--bgColor-muted,#f6f8fa) 50%,transparent)}}.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-narrow=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-narrow=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]){--segmented-control-outer-radius:var(--borderRadius-large,0.75rem);--segmented-control-button-bg-inset:0px;background-color:transparent;border:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]):before{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:transparent}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle])>[data-component="SegmentedControl.Divider"]{display:block}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz{border:0;border-radius:var(--borderRadius-large,.75rem);color:var(--fgColor-muted,#59636e);padding:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz .prc-SegmentedControl-Content-1COlk{border:0;padding-inline:var(--base-size-12,.75rem)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true]{color:var(--fgColor-default,#1f2328)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}@supports (color:color-mix(in lch,red,blue)){.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:color-mix(in srgb,var(--bgColor-muted,#f6f8fa) 50%,transparent)}}}@media (min-width:48rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-regular=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-regular=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]){--segmented-control-outer-radius:var(--borderRadius-large,0.75rem);--segmented-control-button-bg-inset:0px;background-color:transparent;border:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):before{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:transparent}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle])>[data-component="SegmentedControl.Divider"]{display:block}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz{border:0;border-radius:var(--borderRadius-large,.75rem);color:var(--fgColor-muted,#59636e);padding:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz .prc-SegmentedControl-Content-1COlk{border:0;padding-inline:var(--base-size-12,.75rem)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true]{color:var(--fgColor-default,#1f2328)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}@supports (color:color-mix(in lch,red,blue)){.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:color-mix(in srgb,var(--bgColor-muted,#f6f8fa) 50%,transparent)}}}@media (min-width:87.5rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-wide=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-wide=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]){--segmented-control-outer-radius:var(--borderRadius-large,0.75rem);--segmented-control-button-bg-inset:0px;background-color:transparent;border:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]):before{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:transparent}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle])>[data-component="SegmentedControl.Divider"]{display:block}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz{border:0;border-radius:var(--borderRadius-large,.75rem);color:var(--fgColor-muted,#59636e);padding:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz .prc-SegmentedControl-Content-1COlk{border:0;padding-inline:var(--base-size-12,.75rem)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true]{color:var(--fgColor-default,#1f2328)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}@supports (color:color-mix(in lch,red,blue)){.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:color-mix(in srgb,var(--bgColor-muted,#f6f8fa) 50%,transparent)}}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]){--segmented-control-outer-radius:var(--borderRadius-medium,0.375rem);--segmented-control-button-bg-inset:4px;background-color:var(--controlTrack-bgColor-rest,#e6eaef);border:var(--borderWidth-thin,.0625rem) solid var(--controlTrack-borderColor-rest,transparent)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]):before{display:block}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:var(--borderColor-default,#d1d9e0)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle])>[data-component="SegmentedControl.Divider"]{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz{border-radius:var(--segmented-control-outer-radius);color:currentColor;padding:var(--segmented-control-button-bg-inset)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz .prc-SegmentedControl-Content-1COlk{border:var(--borderWidth-thin,.0625rem) solid transparent;padding-inline:calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset))}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true]{color:currentColor;padding:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:transparent;padding-inline:var(--segmented-control-button-inner-padding)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--controlTrack-bgColor-hover,#e0e6eb)}}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-size=small]){font-size:var(--text-body-size-small,.75rem);height:28px}.prc-SegmentedControl-DropdownGroup-9SmpX{--segmented-control-action-size:32px;--segmented-control-list-flex:0 1 auto;align-items:center;display:inline-flex;gap:var(--base-size-4,.25rem)}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width=true]{width:100%;--segmented-control-list-flex:1 1 auto}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width=false]{width:auto}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-narrow=true]{width:100%;--segmented-control-list-flex:1 1 auto}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-narrow=false]{width:auto}}@media (min-width:48rem){.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-regular=true]{width:100%;--segmented-control-list-flex:1 1 auto}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-regular=false]{width:auto}}@media (min-width:87.5rem){.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-wide=true]{width:100%;--segmented-control-list-flex:1 1 auto}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-wide=false]{width:auto}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-regular=true]:not([data-full-width-wide=true]){width:auto;--segmented-control-list-flex:0 1 auto}}.prc-SegmentedControl-DropdownGroup-9SmpX[data-size=small]{--segmented-control-action-size:28px}.prc-SegmentedControl-DropdownGroup-9SmpX>.prc-SegmentedControl-SegmentedControl-lqIXp{flex:var(--segmented-control-list-flex);min-width:0}.prc-SegmentedControl-InlineAction-4qmw0{display:flex}.prc-SegmentedControl-InlineAction-4qmw0[data-variant=dropdown]{display:none}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-InlineAction-4qmw0[data-variant-narrow=dropdown]{display:none}}@media (min-width:48rem){.prc-SegmentedControl-InlineAction-4qmw0[data-variant-regular=dropdown]{display:none}}@media (min-width:87.5rem){.prc-SegmentedControl-InlineAction-4qmw0[data-variant-wide=dropdown]{display:none}}.prc-SegmentedControl-DropdownContainer-ZaPMn{display:none}.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant=dropdown]{display:block}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant-narrow=dropdown]{display:block}}@media (min-width:48rem){.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant-regular=dropdown]{display:block}}@media (min-width:87.5rem){.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant-wide=dropdown]{display:block}}.prc-SegmentedControl-Item-tSCQh{display:block;flex-grow:1;margin-bottom:-1px;margin-top:-1px;position:relative}.prc-SegmentedControl-Item-tSCQh:not(:last-child){margin-right:1px}.prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:var(--borderColor-default,#d1d9e0);bottom:var(--base-size-8,.5rem);content:"";position:absolute;right:calc(var(--base-size-2,.125rem)*-1);top:var(--base-size-8,.5rem);width:1px}.prc-SegmentedControl-Item-tSCQh:not(:last-child):has(+:where([data-component="SegmentedControl.Divider"])+:where([data-selected])):after,.prc-SegmentedControl-Item-tSCQh:not(:last-child):has(+[data-selected]):after,.prc-SegmentedControl-Item-tSCQh:not(:last-child):where([data-selected]):after{background-color:transparent}.prc-SegmentedControl-Item-tSCQh:first-child{margin-left:-1px}.prc-SegmentedControl-Item-tSCQh:last-child{margin-right:-1px}.prc-SegmentedControl-Item-tSCQh .prc-SegmentedControl-Counter-GmZOI{margin-inline-start:var(--base-size-8,.5rem)}.prc-SegmentedControl-ActionItem-2V1ou,.prc-SegmentedControl-Item-tSCQh .prc-SegmentedControl-Counter-GmZOI{align-items:center;display:flex}.prc-SegmentedControl-ActionItem-2V1ou{margin-inline-start:0}.prc-SegmentedControl-ActionButton-Q5fnw{height:var(--segmented-control-action-size);padding:0;width:var(--segmented-control-action-size)}.prc-SegmentedControl-Button-E48xz{--segmented-control-button-inner-padding:12px;--segmented-control-button-bg-inset:4px;background-color:transparent;border-color:transparent;border-radius:var(--segmented-control-outer-radius);border-width:0;color:currentColor;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:var(--base-text-weight-normal,400);height:100%;padding:var(--segmented-control-button-bg-inset);width:100%}.prc-SegmentedControl-Button-E48xz svg{fill:var(--fgColor-muted,#59636e);color:var(--fgColor-muted,#59636e)}.prc-SegmentedControl-Button-E48xz:focus:not(:disabled){box-shadow:none;outline:var(--base-size-2,.125rem) solid var(--fgColor-accent,#0969da);outline-offset:-1px}.prc-SegmentedControl-Button-E48xz:focus:not(:disabled):not(:focus-visible){outline:1px solid transparent}.prc-SegmentedControl-Button-E48xz:focus-visible:not(:disabled){box-shadow:none;outline:var(--base-size-2,.125rem) solid var(--fgColor-accent,#0969da);outline-offset:-1px}.prc-SegmentedControl-Button-E48xz:focus:focus-visible:not(:last-child):after{width:0}.prc-SegmentedControl-Button-E48xz[aria-disabled=true]:not([aria-pressed=true]){background-color:transparent;color:var(--fgColor-disabled,#818b98);cursor:not-allowed}.prc-SegmentedControl-Button-E48xz[aria-disabled=true]:not([aria-pressed=true]) svg{fill:var(--fgColor-disabled,#818b98);color:var(--fgColor-disabled,#818b98)}@media (pointer:coarse){.prc-SegmentedControl-Button-E48xz:before{content:"";left:0;min-height:44px;position:absolute;right:0;top:50%;transform:translateY(-50%)}}.prc-SegmentedControl-IconButton-tlzDE{width:var(--segmented-control-icon-width,32px)}.prc-SegmentedControl-Content-1COlk{align-items:center;background-color:transparent;border-color:transparent;border-radius:calc(var(--segmented-control-outer-radius) - var(--segmented-control-button-bg-inset)/2);border-style:solid;border-width:var(--borderWidth-thin,.0625rem);display:flex;height:100%;justify-content:center;padding-left:calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));padding-right:calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));transition:background-color var(--base-duration-200,[ object Object ]) var(--base-easing-easeInOut,.6,0,.2,1)}.prc-SegmentedControl-Button-E48xz[aria-pressed=true]{font-weight:var(--base-text-weight-semibold,600);padding:0}.prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{padding-left:var(--segmented-control-button-inner-padding);padding-right:var(--segmented-control-button-inner-padding);anchor-name:--segmented-control-current-item}@supports not (anchor-name:--value){.prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--controlKnob-bgColor-rest,#fff);border-color:var(--controlKnob-borderColor-rest,#d1d9e0);border-radius:var(--segmented-control-outer-radius)}}.prc-SegmentedControl-Button-E48xz:not([aria-pressed=true],[aria-disabled=true]):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--controlTrack-bgColor-hover,#e0e6eb)}.prc-SegmentedControl-Button-E48xz:not([aria-pressed=true],[aria-disabled=true]):active .prc-SegmentedControl-Content-1COlk{background-color:var(--controlTrack-bgColor-active,#dae0e7)}.prc-SegmentedControl-Text-7S2y2:after{content:attr(data-text);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;overflow:hidden;pointer-events:none;-webkit-user-select:none;user-select:none;visibility:hidden}.prc-SegmentedControl-LeadingIcon-74n5s{margin-right:var(--base-size-4,.25rem)}
2
+ /*# sourceMappingURL=SegmentedControl-e68d4197.css.map */
package/dist/SegmentedControl/SegmentedControl-e68d4197.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/SegmentedControl/SegmentedControl.module.css.js"],"names":[],"mappings":"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","file":"SegmentedControl-e68d4197.css","sourcesContent":["@define-mixin subtleVariant {\n --segmented-control-outer-radius: var(--borderRadius-large);\n --segmented-control-button-bg-inset: 0px;\n\n background-color: transparent;\n border: 0;\n\n /* stylelint-disable-next-line nesting-selector-no-missing-scoping-root */\n &::before {\n display: none;\n }\n\n .Item:not(:last-child)::after {\n background-color: transparent;\n }\n\n > [data-component='SegmentedControl.Divider'] {\n display: block;\n }\n\n .Button {\n padding: 0;\n color: var(--fgColor-muted);\n border: 0;\n border-radius: var(--borderRadius-large);\n\n .Content {\n padding-inline: var(--base-size-12);\n border: 0;\n }\n }\n\n .Button[aria-pressed='true'] {\n color: var(--fgColor-default);\n\n .Content {\n background-color: var(--bgColor-muted);\n }\n }\n\n .Button:where(:not([aria-pressed='true'], [aria-disabled='true'])):hover .Content {\n background-color: var(--bgColor-muted);\n background-color: color-mix(in srgb, var(--bgColor-muted) 50%, transparent);\n }\n}\n\n@define-mixin defaultVariant {\n --segmented-control-outer-radius: var(--borderRadius-medium);\n --segmented-control-button-bg-inset: 4px;\n\n background-color: var(--controlTrack-bgColor-rest);\n border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest, transparent);\n\n /* stylelint-disable-next-line nesting-selector-no-missing-scoping-root */\n &::before {\n display: block;\n }\n\n .Item:not(:last-child)::after {\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n > [data-component='SegmentedControl.Divider'] {\n display: none;\n }\n\n .Button {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--segmented-control-button-bg-inset);\n color: currentColor;\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmented-control-outer-radius);\n\n .Content {\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));\n border: var(--borderWidth-thin) solid transparent;\n }\n }\n\n .Button[aria-pressed='true'] {\n padding: 0;\n color: currentColor;\n\n .Content {\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: var(--segmented-control-button-inner-padding);\n background-color: transparent;\n }\n }\n\n .Button:where(:not([aria-pressed='true'], [aria-disabled='true'])):hover .Content {\n background-color: var(--controlTrack-bgColor-hover);\n }\n}\n\n.SegmentedControl {\n /* TODO: use primitive `control.medium.size` when it is available instead of '32px' */\n --segmented-control-icon-width: 32px;\n --segmented-control-outer-radius: var(--borderRadius-medium);\n\n display: inline-flex;\n\n /* TODO: use primitive `control.{small|medium}.size` when it is available */\n height: 32px;\n padding: 0;\n margin: 0;\n font-size: var(--text-body-size-medium);\n background-color: var(--controlTrack-bgColor-rest);\n border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest, transparent);\n border-radius: var(--borderRadius-medium);\n position: relative;\n\n @supports (anchor-name: --value) {\n &::before {\n position-anchor: --segmented-control-current-item;\n content: '';\n position: absolute;\n inset: anchor(top) anchor(right) anchor(bottom) anchor(left);\n background-color: var(--controlKnob-bgColor-rest);\n border: var(--borderWidth-thin) solid var(--controlKnob-borderColor-rest);\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmented-control-outer-radius);\n\n @media (prefers-reduced-motion: no-preference) {\n transition: inset var(--base-duration-200) var(--base-easing-easeInOut);\n }\n }\n\n &[data-disable-knob-transition]::before {\n transition: none;\n }\n }\n\n /* Responsive full-width */\n &[data-full-width='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n\n > [data-component='SegmentedControl.Divider'] {\n display: none;\n align-self: stretch;\n width: 1px;\n margin-block: var(--base-size-8);\n margin-inline-start: var(--base-size-8);\n /* stylelint-disable-next-line primer/spacing -- preserve the previous divider's 16px layout footprint */\n margin-inline-end: calc(var(--base-size-8) - 1px);\n list-style: none;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n @media (--viewportRange-narrow) {\n &[data-full-width-narrow='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width-narrow='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-full-width-regular='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width-regular='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-full-width-wide='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width-wide='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n\n &[data-full-width-regular='true']:not([data-full-width-wide='true']) {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n }\n\n /* Hide when dropdown variant is active */\n &[data-variant='dropdown'] {\n display: none;\n }\n\n &:where([data-variant='subtle']) {\n @mixin subtleVariant;\n }\n\n /* Handle hideLabels variant - hide button text */\n &[data-variant='hideLabels'] .Text {\n display: none;\n }\n\n @media (--viewportRange-narrow) {\n &[data-variant-narrow='dropdown'] {\n display: none;\n }\n\n &[data-variant-narrow='hideLabels'] .Text {\n display: none;\n }\n\n &:where([data-variant-narrow='subtle']) {\n @mixin subtleVariant;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-variant-regular='dropdown'] {\n display: none;\n }\n\n &[data-variant-regular='hideLabels'] .Text {\n display: none;\n }\n\n &:where([data-variant-regular='subtle']) {\n @mixin subtleVariant;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-variant-wide='dropdown'] {\n display: none;\n }\n\n &[data-variant-wide='hideLabels'] .Text {\n display: none;\n }\n\n &:where([data-variant-wide='subtle']) {\n @mixin subtleVariant;\n }\n\n &:where([data-variant-regular='subtle']):not([data-variant-wide='subtle']) {\n @mixin defaultVariant;\n }\n }\n\n &:where([data-size='small']) {\n /* TODO: use primitive `control.{small|medium}.size` when it is available */\n height: 28px;\n font-size: var(--text-body-size-small);\n }\n}\n\n.DropdownGroup {\n --segmented-control-action-size: 32px;\n --segmented-control-list-flex: 0 1 auto;\n\n display: inline-flex;\n align-items: center;\n gap: var(--base-size-4);\n\n &[data-full-width='true'] {\n width: 100%;\n\n --segmented-control-list-flex: 1 1 auto;\n }\n\n &[data-full-width='false'] {\n width: auto;\n }\n\n @media (--viewportRange-narrow) {\n &[data-full-width-narrow='true'] {\n width: 100%;\n\n --segmented-control-list-flex: 1 1 auto;\n }\n\n &[data-full-width-narrow='false'] {\n width: auto;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-full-width-regular='true'] {\n width: 100%;\n\n --segmented-control-list-flex: 1 1 auto;\n }\n\n &[data-full-width-regular='false'] {\n width: auto;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-full-width-wide='true'] {\n width: 100%;\n\n --segmented-control-list-flex: 1 1 auto;\n }\n\n &[data-full-width-wide='false'] {\n width: auto;\n }\n\n &[data-full-width-regular='true']:not([data-full-width-wide='true']) {\n width: auto;\n\n --segmented-control-list-flex: 0 1 auto;\n }\n }\n\n &[data-size='small'] {\n --segmented-control-action-size: 28px;\n }\n\n > .SegmentedControl {\n min-width: 0;\n flex: var(--segmented-control-list-flex);\n }\n}\n\n.InlineAction {\n display: flex;\n\n &[data-variant='dropdown'] {\n display: none;\n }\n\n @media (--viewportRange-narrow) {\n &[data-variant-narrow='dropdown'] {\n display: none;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-variant-regular='dropdown'] {\n display: none;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-variant-wide='dropdown'] {\n display: none;\n }\n }\n}\n\n.DropdownContainer {\n display: none;\n\n /* Show when dropdown variant is active */\n &[data-variant='dropdown'] {\n display: block;\n }\n\n @media (--viewportRange-narrow) {\n &[data-variant-narrow='dropdown'] {\n display: block;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-variant-regular='dropdown'] {\n display: block;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-variant-wide='dropdown'] {\n display: block;\n }\n }\n}\n\n.Item {\n position: relative;\n display: block;\n /* stylelint-disable-next-line primer/spacing */\n margin-top: -1px;\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: -1px;\n flex-grow: 1;\n\n &:not(:last-child) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: 1px;\n\n &::after {\n position: absolute;\n top: var(--base-size-8);\n right: calc(-1 * var(--base-size-2));\n bottom: var(--base-size-8);\n width: 1px;\n content: '';\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n /* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- scoped to CSS Module, audited (github/github-ui#17224) */\n &:has(+ [data-selected])::after,\n /* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- account for a hidden divider in the default variant */\n &:has(+ :where([data-component='SegmentedControl.Divider']) + :where([data-selected]))::after,\n &:where([data-selected])::after {\n background-color: transparent;\n }\n }\n\n &:first-child {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: -1px;\n }\n\n &:last-child {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: -1px;\n }\n\n .Counter {\n margin-inline-start: var(--base-size-8);\n display: flex;\n align-items: center;\n }\n}\n\n.ActionItem {\n display: flex;\n align-items: center;\n margin-inline-start: 0;\n}\n\n.ActionButton {\n width: var(--segmented-control-action-size);\n height: var(--segmented-control-action-size);\n padding: 0;\n}\n\n.Button {\n /* TODO: use primitive `primer.control.medium.paddingInline.normal` when it is available */\n --segmented-control-button-inner-padding: 12px;\n --segmented-control-button-bg-inset: 4px;\n\n width: 100%;\n height: 100%;\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--segmented-control-button-bg-inset);\n font-family: inherit;\n font-size: inherit;\n font-weight: var(--base-text-weight-normal);\n color: currentColor;\n cursor: pointer;\n background-color: transparent;\n border-color: transparent;\n border-width: 0;\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmented-control-outer-radius);\n\n & svg {\n fill: var(--fgColor-muted);\n color: var(--fgColor-muted);\n }\n\n /* fallback :focus state */\n &:focus:not(:disabled) {\n outline: var(--base-size-2) solid var(--fgColor-accent);\n outline-offset: -1px;\n box-shadow: none;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n }\n }\n\n /* default focus state */\n &:focus-visible:not(:disabled) {\n outline: var(--base-size-2) solid var(--fgColor-accent);\n outline-offset: -1px;\n box-shadow: none;\n }\n\n /* stylelint-disable-next-line selector-max-specificity */\n &:focus:focus-visible:not(:last-child)::after {\n /* fixes an issue where the focus outline shows over the pseudo-element */\n width: 0;\n }\n\n &[aria-disabled='true']:not([aria-pressed='true']) {\n cursor: not-allowed;\n color: var(--fgColor-disabled);\n background-color: transparent;\n\n & svg {\n fill: var(--fgColor-disabled);\n color: var(--fgColor-disabled);\n }\n }\n\n @media (pointer: coarse) {\n &::before {\n position: absolute;\n top: 50%;\n right: 0;\n left: 0;\n min-height: 44px;\n content: '';\n transform: translateY(-50%);\n }\n }\n}\n\n.IconButton {\n width: var(--segmented-control-icon-width, 32px);\n}\n\n.Content {\n display: flex;\n height: 100%;\n /* stylelint-disable-next-line primer/spacing */\n padding-right: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));\n /* stylelint-disable-next-line primer/spacing */\n padding-left: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));\n border-color: transparent;\n border-style: solid;\n border-width: var(--borderWidth-thin);\n background-color: transparent;\n transition: background-color var(--base-duration-200) var(--base-easing-easeInOut);\n\n /*\n innerRadius = outerRadius - distance/2\n https://stackoverflow.com/questions/2932146/math-problem-determine-the-corner-radius-of-an-inner-border-based-on-outer-corn\n */\n /* stylelint-disable-next-line primer/borders */\n border-radius: calc(var(--segmented-control-outer-radius) - var(--segmented-control-button-bg-inset) / 2);\n align-items: center;\n justify-content: center;\n}\n\n.Button[aria-pressed='true'] {\n padding: 0;\n font-weight: var(--base-text-weight-semibold);\n\n .Content {\n /* stylelint-disable-next-line primer/spacing */\n padding-right: var(--segmented-control-button-inner-padding);\n /* stylelint-disable-next-line primer/spacing */\n padding-left: var(--segmented-control-button-inner-padding);\n anchor-name: --segmented-control-current-item;\n\n @supports not (anchor-name: --value) {\n background-color: var(--controlKnob-bgColor-rest);\n border-color: var(--controlKnob-borderColor-rest);\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmented-control-outer-radius);\n }\n }\n}\n\n.Button:not([aria-pressed='true'], [aria-disabled='true']) {\n &:hover .Content {\n background-color: var(--controlTrack-bgColor-hover);\n }\n\n &:active .Content {\n background-color: var(--controlTrack-bgColor-active);\n }\n}\n\n.Text::after {\n display: block;\n height: 0;\n overflow: hidden;\n font-weight: var(--base-text-weight-semibold);\n pointer-events: none;\n visibility: hidden;\n content: attr(data-text);\n user-select: none;\n}\n\n.LeadingIcon {\n margin-right: var(--base-size-4);\n}\n"]}
package/dist/SegmentedControl/SegmentedControl.d.ts CHANGED
@@ -1,5 +1,7 @@
1
1
  import { FCWithSlotMarker } from "../utils/types/Slots.js";
2
2
  import { ResponsiveValue } from "../hooks/useResponsiveValue.js";
3
+ import { SegmentedControlDividerProps } from "./SegmentedControlDivider.js";
4
+ import { SegmentedControlActionProps } from "./SegmentedControlAction.js";
3
5
  import { SegmentedControlButtonProps } from "./SegmentedControlButton.js";
4
6
  import { SegmentedControlIconButtonProps } from "./SegmentedControlIconButton.js";
5
7
  import { WidthOnlyViewportRangeKeys } from "../utils/types/ViewportRangeKeys.js";
@@ -13,12 +15,14 @@ type SegmentedControlProps = {
13
15
  fullWidth?: boolean | ResponsiveValue<boolean>; /** The handler that gets called when a segment is selected */
14
16
  onChange?: (selectedIndex: number) => void; /** The size of the buttons */
15
17
  size?: 'small' | 'medium'; /** Configure alternative ways to render the control when it gets rendered in tight spaces */
16
- variant?: 'default' | Partial<Record<WidthOnlyViewportRangeKeys, 'hideLabels' | 'dropdown' | 'default'>>;
18
+ variant?: 'default' | 'subtle' | Partial<Record<WidthOnlyViewportRangeKeys, 'hideLabels' | 'dropdown' | 'default' | 'subtle'>>;
17
19
  className?: string;
18
20
  };
19
21
  declare const SegmentedControl: React.FC<React.PropsWithChildren<SegmentedControlProps>> & {
20
22
  Button: FCWithSlotMarker<React.PropsWithChildren<SegmentedControlButtonProps>>;
21
23
  IconButton: FCWithSlotMarker<React.PropsWithChildren<SegmentedControlIconButtonProps>>;
24
+ Divider: FCWithSlotMarker<SegmentedControlDividerProps>;
25
+ Action: FCWithSlotMarker<SegmentedControlActionProps>;
22
26
  };
23
27
  //#endregion
24
28
  export { SegmentedControl, SegmentedControlProps };
package/dist/SegmentedControl/SegmentedControl.js CHANGED
@@ -1,18 +1,23 @@
1
+ import useIsomorphicLayoutEffect from "../utils/useIsomorphicLayoutEffect.js";
1
2
  import { isSlot } from "../utils/is-slot.js";
3
+ import { useSlots } from "../hooks/useSlots.js";
2
4
  import { getResponsiveAttributes } from "../internal/utils/getResponsiveAttributes.js";
3
5
  import { ActionList } from "../ActionList/index.js";
4
6
  import { ActionMenu } from "../ActionMenu/ActionMenu.js";
5
7
  import SegmentedControl_module_css_default from "./SegmentedControl.module.css.js";
6
8
  import SegmentedControlButton from "./SegmentedControlButton.js";
7
9
  import { SegmentedControlIconButton } from "./SegmentedControlIconButton.js";
10
+ import { SegmentedControlActionContext } from "./SegmentedControlActionContext.js";
11
+ import SegmentedControlAction from "./SegmentedControlAction.js";
12
+ import SegmentedControlDivider from "./SegmentedControlDivider.js";
8
13
  import { c } from "react-compiler-runtime";
9
14
  import React, { useRef, useState } from "react";
10
- import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
15
+ import { jsx, jsxs } from "react/jsx-runtime";
11
16
  import { clsx } from "clsx";
12
17
  import { isElement } from "react-is";
13
18
  //#region src/SegmentedControl/SegmentedControl.tsx
14
19
  const Root = (t0) => {
15
- const $ = c(54);
20
+ const $ = c(39);
16
21
  let ariaLabel;
17
22
  let ariaLabelledby;
18
23
  let children;
@@ -48,207 +53,239 @@ const Root = (t0) => {
48
53
  const variant = t1 === void 0 ? "default" : t1;
49
54
  const segmentedControlContainerRef = useRef(null);
50
55
  let t2;
51
- if ($[10] !== children || $[11] !== onChange) {
52
- t2 = onChange === void 0 || React.Children.toArray(children).some(_temp);
53
- $[10] = children;
54
- $[11] = onChange;
55
- $[12] = t2;
56
- } else t2 = $[12];
57
- const isUncontrolled = t2;
58
- let t3;
59
- if ($[13] !== children) {
60
- const selectedSegments = React.Children.toArray(children).map(_temp2);
61
- t3 = selectedSegments.some(_temp3) ? selectedSegments.indexOf(true) : 0;
62
- $[13] = children;
63
- $[14] = t3;
64
- } else t3 = $[14];
65
- const selectedIndexExternal = t3;
56
+ if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
57
+ t2 = { action: SegmentedControlAction };
58
+ $[10] = t2;
59
+ } else t2 = $[10];
60
+ const [slots, segmentChildren] = useSlots(children, t2);
61
+ const actionChild = slots.action;
62
+ const segments = segmentChildren.filter(_temp);
63
+ const segmentIndices = new Map(segments.map(_temp2));
64
+ const segmentCount = segments.length;
65
+ const previousSegmentCount = useRef(segmentCount);
66
+ useIsomorphicLayoutEffect(() => {
67
+ if (previousSegmentCount.current === segmentCount) return;
68
+ const segmentedControl = segmentedControlContainerRef.current;
69
+ segmentedControl === null || segmentedControl === void 0 || segmentedControl.setAttribute("data-disable-knob-transition", "");
70
+ previousSegmentCount.current = segmentCount;
71
+ const animationFrame = requestAnimationFrame(() => {
72
+ segmentedControl === null || segmentedControl === void 0 || segmentedControl.removeAttribute("data-disable-knob-transition");
73
+ });
74
+ return () => cancelAnimationFrame(animationFrame);
75
+ }, [segmentCount]);
76
+ const isUncontrolled = onChange === void 0 || segments.some(_temp3);
77
+ const selectedSegments = segments.map(_temp4);
78
+ const selectedIndexExternal = selectedSegments.some(_temp5) ? selectedSegments.indexOf(true) : 0;
66
79
  const [selectedIndexInternalState, setSelectedIndexInternalState] = useState(selectedIndexExternal);
67
80
  const selectedIndex = isUncontrolled ? selectedIndexInternalState : selectedIndexExternal;
68
- let hasDropdownVariant;
81
+ const selectedChild = /*#__PURE__*/ React.isValidElement(segments[selectedIndex]) ? segments[selectedIndex] : void 0;
82
+ const getChildIcon = _temp6;
83
+ const getChildText = _temp7;
84
+ if (!ariaLabel && !ariaLabelledby) console.warn("Use the `aria-label` or `aria-labelledby` prop to provide an accessible label for assistive technologies");
85
+ const responsiveVariant = typeof variant === "object" ? variant : void 0;
86
+ let t3;
87
+ if ($[11] !== responsiveVariant) {
88
+ t3 = responsiveVariant ? Object.values(responsiveVariant).includes("dropdown") : false;
89
+ $[11] = responsiveVariant;
90
+ $[12] = t3;
91
+ } else t3 = $[12];
92
+ const hasDropdownVariant = t3;
93
+ const dropdownContent = hasDropdownVariant && /*#__PURE__*/ jsx("div", {
94
+ className: SegmentedControl_module_css_default.DropdownContainer,
95
+ ...getResponsiveAttributes("variant", variant),
96
+ children: /*#__PURE__*/ jsxs(ActionMenu, { children: [/*#__PURE__*/ jsx(ActionMenu.Button, {
97
+ "aria-label": ariaLabel && `${getChildText(selectedChild)}, ${ariaLabel}`,
98
+ leadingVisual: getChildIcon(selectedChild),
99
+ children: getChildText(selectedChild)
100
+ }), /*#__PURE__*/ jsx(ActionMenu.Overlay, {
101
+ "aria-labelledby": ariaLabelledby,
102
+ children: /*#__PURE__*/ jsxs(ActionList, {
103
+ selectionVariant: "single",
104
+ children: [segmentChildren.map((child_2, index_0) => {
105
+ var _segmentIndices$get;
106
+ if (/*#__PURE__*/ React.isValidElement(child_2) && isSlot(child_2, SegmentedControlDivider)) {
107
+ var _child_2$key;
108
+ return /*#__PURE__*/ jsx(ActionList.Divider, {
109
+ className: child_2.props.className,
110
+ style: child_2.props.style
111
+ }, (_child_2$key = child_2.key) !== null && _child_2$key !== void 0 ? _child_2$key : `segmented-control-divider-${index_0}`);
112
+ }
113
+ const ChildIcon = getChildIcon(child_2);
114
+ if (!/*#__PURE__*/ React.isValidElement(child_2)) return null;
115
+ const segmentIndex = (_segmentIndices$get = segmentIndices.get(child_2)) !== null && _segmentIndices$get !== void 0 ? _segmentIndices$get : -1;
116
+ return /*#__PURE__*/ jsxs(ActionList.Item, {
117
+ selected: segmentIndex === selectedIndex,
118
+ onSelect: (event) => {
119
+ isUncontrolled && setSelectedIndexInternalState(segmentIndex);
120
+ onChange && onChange(segmentIndex);
121
+ child_2.props.onClick && child_2.props.onClick(event);
122
+ },
123
+ children: [
124
+ ChildIcon,
125
+ " ",
126
+ getChildText(child_2)
127
+ ]
128
+ }, `segmented-control-action-btn-${index_0}`);
129
+ }), actionChild && /*#__PURE__*/ jsx(SegmentedControlActionContext.Provider, {
130
+ value: "menu",
131
+ children: actionChild
132
+ })]
133
+ })
134
+ })] })
135
+ });
69
136
  let t4;
70
- if ($[15] !== ariaLabel || $[16] !== ariaLabelledby || $[17] !== children || $[18] !== isUncontrolled || $[19] !== onChange || $[20] !== selectedIndex || $[21] !== variant) {
71
- const selectedChild = /*#__PURE__*/ React.isValidElement(React.Children.toArray(children)[selectedIndex]) ? React.Children.toArray(children)[selectedIndex] : void 0;
72
- const getChildIcon = _temp4;
73
- const getChildText = _temp5;
74
- if (!ariaLabel && !ariaLabelledby) console.warn("Use the `aria-label` or `aria-labelledby` prop to provide an accessible label for assistive technologies");
75
- const responsiveVariant = typeof variant === "object" ? variant : void 0;
76
- let t5;
77
- if ($[24] !== responsiveVariant) {
78
- t5 = responsiveVariant ? Object.values(responsiveVariant).includes("dropdown") : false;
79
- $[24] = responsiveVariant;
80
- $[25] = t5;
81
- } else t5 = $[25];
82
- hasDropdownVariant = t5;
83
- t4 = hasDropdownVariant && /*#__PURE__*/ jsx("div", {
84
- className: SegmentedControl_module_css_default.DropdownContainer,
85
- ...getResponsiveAttributes("variant", variant),
86
- children: /*#__PURE__*/ jsxs(ActionMenu, { children: [/*#__PURE__*/ jsx(ActionMenu.Button, {
87
- "aria-label": ariaLabel && `${getChildText(selectedChild)}, ${ariaLabel}`,
88
- leadingVisual: getChildIcon(selectedChild),
89
- children: getChildText(selectedChild)
90
- }), /*#__PURE__*/ jsx(ActionMenu.Overlay, {
91
- "aria-labelledby": ariaLabelledby,
92
- children: /*#__PURE__*/ jsx(ActionList, {
93
- selectionVariant: "single",
94
- children: React.Children.map(children, (child_1, index) => {
95
- const ChildIcon = getChildIcon(child_1);
96
- if (!/*#__PURE__*/ React.isValidElement(child_1)) return null;
97
- return /*#__PURE__*/ jsxs(ActionList.Item, {
98
- selected: index === selectedIndex,
99
- onSelect: (event) => {
100
- isUncontrolled && setSelectedIndexInternalState(index);
101
- onChange && onChange(index);
102
- child_1.props.onClick && child_1.props.onClick(event);
103
- },
104
- children: [
105
- ChildIcon,
106
- " ",
107
- getChildText(child_1)
108
- ]
109
- }, `segmented-control-action-btn-${index}`);
110
- })
111
- })
112
- })] })
113
- });
114
- $[15] = ariaLabel;
115
- $[16] = ariaLabelledby;
116
- $[17] = children;
117
- $[18] = isUncontrolled;
118
- $[19] = onChange;
119
- $[20] = selectedIndex;
120
- $[21] = variant;
121
- $[22] = hasDropdownVariant;
122
- $[23] = t4;
123
- } else {
124
- hasDropdownVariant = $[22];
125
- t4 = $[23];
126
- }
127
- const dropdownContent = t4;
137
+ if ($[13] !== className) {
138
+ t4 = clsx(SegmentedControl_module_css_default.SegmentedControl, className);
139
+ $[13] = className;
140
+ $[14] = t4;
141
+ } else t4 = $[14];
128
142
  let t5;
129
- if ($[26] !== className) {
130
- t5 = clsx(SegmentedControl_module_css_default.SegmentedControl, className);
131
- $[26] = className;
132
- $[27] = t5;
133
- } else t5 = $[27];
143
+ if ($[15] !== fullWidth) {
144
+ t5 = getResponsiveAttributes("full-width", fullWidth);
145
+ $[15] = fullWidth;
146
+ $[16] = t5;
147
+ } else t5 = $[16];
134
148
  let t6;
135
- if ($[28] !== fullWidth) {
136
- t6 = getResponsiveAttributes("full-width", fullWidth);
137
- $[28] = fullWidth;
138
- $[29] = t6;
139
- } else t6 = $[29];
140
- let t7;
141
- if ($[30] !== variant) {
142
- t7 = getResponsiveAttributes("variant", variant);
143
- $[30] = variant;
144
- $[31] = t7;
145
- } else t7 = $[31];
146
- let t8;
147
- if ($[32] !== children || $[33] !== isUncontrolled || $[34] !== onChange || $[35] !== selectedIndex) {
148
- let t9;
149
- if ($[37] !== isUncontrolled || $[38] !== onChange || $[39] !== selectedIndex) {
150
- t9 = (child_2, index_0) => {
151
- if (!/*#__PURE__*/ React.isValidElement(child_2)) return null;
152
- const sharedChildProps = {
153
- onClick: onChange ? (event_0) => {
154
- if (!(child_2.props.disabled === true || child_2.props["aria-disabled"] === "true" || child_2.props["aria-disabled"] === true)) {
155
- onChange(index_0);
156
- isUncontrolled && setSelectedIndexInternalState(index_0);
157
- child_2.props.onClick && child_2.props.onClick(event_0);
158
- }
159
- } : (event_1) => {
160
- if (!(child_2.props.disabled === true || child_2.props["aria-disabled"] === "true" || child_2.props["aria-disabled"] === true)) {
161
- child_2.props.onClick && child_2.props.onClick(event_1);
162
- isUncontrolled && setSelectedIndexInternalState(index_0);
163
- }
164
- },
165
- selected: index_0 === selectedIndex,
166
- style: {
167
- "--separator-color": index_0 === selectedIndex || index_0 === selectedIndex - 1 ? "transparent" : "var(--borderColor-default)",
168
- ...child_2.props.style
169
- }
170
- };
171
- return /*#__PURE__*/ React.cloneElement(child_2, sharedChildProps);
172
- };
173
- $[37] = isUncontrolled;
174
- $[38] = onChange;
175
- $[39] = selectedIndex;
176
- $[40] = t9;
177
- } else t9 = $[40];
178
- t8 = React.Children.map(children, t9);
179
- $[32] = children;
180
- $[33] = isUncontrolled;
181
- $[34] = onChange;
182
- $[35] = selectedIndex;
183
- $[36] = t8;
184
- } else t8 = $[36];
149
+ if ($[17] !== variant) {
150
+ t6 = getResponsiveAttributes("variant", variant);
151
+ $[17] = variant;
152
+ $[18] = t6;
153
+ } else t6 = $[18];
154
+ const t7 = "SegmentedControl";
155
+ const t8 = segmentChildren.map((child_3, index_1) => {
156
+ var _segmentIndices$get2, _child_3$key2;
157
+ if (/*#__PURE__*/ React.isValidElement(child_3) && isSlot(child_3, SegmentedControlDivider)) {
158
+ var _child_3$key;
159
+ return /*#__PURE__*/ React.cloneElement(child_3, { key: (_child_3$key = child_3.key) !== null && _child_3$key !== void 0 ? _child_3$key : `segmented-control-divider-${index_1}` });
160
+ }
161
+ if (!/*#__PURE__*/ React.isValidElement(child_3)) return null;
162
+ const segmentIndex_0 = (_segmentIndices$get2 = segmentIndices.get(child_3)) !== null && _segmentIndices$get2 !== void 0 ? _segmentIndices$get2 : -1;
163
+ const sharedChildProps = {
164
+ onClick: onChange ? (event_0) => {
165
+ if (!(child_3.props.disabled === true || child_3.props["aria-disabled"] === "true" || child_3.props["aria-disabled"] === true)) {
166
+ onChange(segmentIndex_0);
167
+ isUncontrolled && setSelectedIndexInternalState(segmentIndex_0);
168
+ child_3.props.onClick && child_3.props.onClick(event_0);
169
+ }
170
+ } : (event_1) => {
171
+ if (!(child_3.props.disabled === true || child_3.props["aria-disabled"] === "true" || child_3.props["aria-disabled"] === true)) {
172
+ child_3.props.onClick && child_3.props.onClick(event_1);
173
+ isUncontrolled && setSelectedIndexInternalState(segmentIndex_0);
174
+ }
175
+ },
176
+ selected: segmentIndex_0 === selectedIndex,
177
+ style: {
178
+ "--separator-color": segmentIndex_0 === selectedIndex || segmentIndex_0 === selectedIndex - 1 ? "transparent" : "var(--borderColor-default)",
179
+ ...child_3.props.style
180
+ }
181
+ };
182
+ return /*#__PURE__*/ React.cloneElement(child_3, {
183
+ key: (_child_3$key2 = child_3.key) !== null && _child_3$key2 !== void 0 ? _child_3$key2 : `segmented-control-item-${index_1}`,
184
+ ...sharedChildProps
185
+ });
186
+ });
185
187
  let t9;
186
- if ($[41] !== ariaLabel || $[42] !== ariaLabelledby || $[43] !== rest || $[44] !== size || $[45] !== t5 || $[46] !== t6 || $[47] !== t7 || $[48] !== t8) {
188
+ if ($[19] !== ariaLabel || $[20] !== ariaLabelledby || $[21] !== rest || $[22] !== size || $[23] !== t4 || $[24] !== t5 || $[25] !== t6 || $[26] !== t8) {
187
189
  t9 = /*#__PURE__*/ jsx("ul", {
188
190
  "aria-label": ariaLabel,
189
191
  "aria-labelledby": ariaLabelledby,
190
192
  ref: segmentedControlContainerRef,
191
- className: t5,
193
+ className: t4,
194
+ ...t5,
192
195
  ...t6,
193
- ...t7,
194
196
  "data-size": size,
195
197
  ...rest,
196
- "data-component": "SegmentedControl",
198
+ "data-component": t7,
197
199
  children: t8
198
200
  });
199
- $[41] = ariaLabel;
200
- $[42] = ariaLabelledby;
201
- $[43] = rest;
202
- $[44] = size;
203
- $[45] = t5;
204
- $[46] = t6;
205
- $[47] = t7;
206
- $[48] = t8;
207
- $[49] = t9;
208
- } else t9 = $[49];
201
+ $[19] = ariaLabel;
202
+ $[20] = ariaLabelledby;
203
+ $[21] = rest;
204
+ $[22] = size;
205
+ $[23] = t4;
206
+ $[24] = t5;
207
+ $[25] = t6;
208
+ $[26] = t8;
209
+ $[27] = t9;
210
+ } else t9 = $[27];
209
211
  const segmentedControlContent = t9;
210
212
  let t10;
211
- if ($[50] !== dropdownContent || $[51] !== hasDropdownVariant || $[52] !== segmentedControlContent) {
212
- t10 = hasDropdownVariant ? /*#__PURE__*/ jsxs(Fragment$1, { children: [dropdownContent, segmentedControlContent] }) : segmentedControlContent;
213
- $[50] = dropdownContent;
214
- $[51] = hasDropdownVariant;
215
- $[52] = segmentedControlContent;
216
- $[53] = t10;
217
- } else t10 = $[53];
218
- return t10;
213
+ if ($[28] !== actionChild || $[29] !== variant) {
214
+ t10 = actionChild && /*#__PURE__*/ jsx("div", {
215
+ className: SegmentedControl_module_css_default.InlineAction,
216
+ ...getResponsiveAttributes("variant", variant),
217
+ children: /*#__PURE__*/ jsx(SegmentedControlActionContext.Provider, {
218
+ value: "inline",
219
+ children: actionChild
220
+ })
221
+ });
222
+ $[28] = actionChild;
223
+ $[29] = variant;
224
+ $[30] = t10;
225
+ } else t10 = $[30];
226
+ const inlineActionContent = t10;
227
+ let t11;
228
+ if ($[31] !== actionChild || $[32] !== dropdownContent || $[33] !== fullWidth || $[34] !== hasDropdownVariant || $[35] !== inlineActionContent || $[36] !== segmentedControlContent || $[37] !== size) {
229
+ t11 = hasDropdownVariant || actionChild ? /*#__PURE__*/ jsxs("div", {
230
+ className: SegmentedControl_module_css_default.DropdownGroup,
231
+ "data-size": size,
232
+ ...getResponsiveAttributes("full-width", fullWidth),
233
+ children: [
234
+ dropdownContent,
235
+ segmentedControlContent,
236
+ inlineActionContent
237
+ ]
238
+ }) : segmentedControlContent;
239
+ $[31] = actionChild;
240
+ $[32] = dropdownContent;
241
+ $[33] = fullWidth;
242
+ $[34] = hasDropdownVariant;
243
+ $[35] = inlineActionContent;
244
+ $[36] = segmentedControlContent;
245
+ $[37] = size;
246
+ $[38] = t11;
247
+ } else t11 = $[38];
248
+ return t11;
219
249
  };
220
250
  Root.displayName = "SegmentedControl";
221
251
  const SegmentedControl = Object.assign(Root, {
222
252
  Button: SegmentedControlButton,
223
- IconButton: SegmentedControlIconButton
253
+ IconButton: SegmentedControlIconButton,
254
+ Divider: SegmentedControlDivider,
255
+ Action: SegmentedControlAction
224
256
  });
225
257
  function _temp(child) {
226
- return /*#__PURE__*/ React.isValidElement(child) && child.props.defaultSelected !== void 0;
258
+ return /*#__PURE__*/ React.isValidElement(child) && !isSlot(child, SegmentedControlDivider);
259
+ }
260
+ function _temp2(segment, index) {
261
+ return [segment, index];
227
262
  }
228
- function _temp2(child_0) {
229
- return /*#__PURE__*/ React.isValidElement(child_0) && (child_0.props.defaultSelected || child_0.props.selected);
263
+ function _temp3(child_0) {
264
+ return /*#__PURE__*/ React.isValidElement(child_0) && child_0.props.defaultSelected !== void 0;
230
265
  }
231
- function _temp3(isSelected) {
266
+ function _temp4(child_1) {
267
+ return /*#__PURE__*/ React.isValidElement(child_1) && (child_1.props.defaultSelected || child_1.props.selected);
268
+ }
269
+ function _temp5(isSelected) {
232
270
  return isSelected;
233
271
  }
234
- function _temp4(childArg) {
272
+ function _temp6(childArg) {
235
273
  if (/*#__PURE__*/ React.isValidElement(childArg) && (childArg.type === SegmentedControlButton || isSlot(childArg, SegmentedControlButton))) {
236
274
  var _childArg$props$leadi;
237
275
  const leadingVisual = (_childArg$props$leadi = childArg.props.leadingVisual) !== null && _childArg$props$leadi !== void 0 ? _childArg$props$leadi : childArg.props.leadingIcon;
238
276
  if (leadingVisual) {
239
277
  if (isElement(leadingVisual)) return leadingVisual;
240
- else return /*#__PURE__*/ jsx(leadingVisual, {});
278
+ return /*#__PURE__*/ jsx(leadingVisual, {});
241
279
  }
242
280
  }
243
281
  if (/*#__PURE__*/ React.isValidElement(childArg) && (childArg.type === SegmentedControlIconButton || isSlot(childArg, SegmentedControlIconButton))) {
244
- if (isElement(childArg.props.icon)) {} else {
245
- const Icon = childArg.props.icon;
246
- return /*#__PURE__*/ jsx(Icon, {});
247
- }
282
+ if (isElement(childArg.props.icon)) return childArg.props.icon;
283
+ const Icon = childArg.props.icon;
284
+ return /*#__PURE__*/ jsx(Icon, {});
248
285
  }
249
286
  return null;
250
287
  }
251
- function _temp5(childArg_0) {
288
+ function _temp7(childArg_0) {
252
289
  if (/*#__PURE__*/ React.isValidElement(childArg_0) && (childArg_0.type === SegmentedControlButton || isSlot(childArg_0, SegmentedControlButton))) return childArg_0.props.children;
253
290
  return /*#__PURE__*/ React.isValidElement(childArg_0) ? childArg_0.props["aria-label"] : null;
254
291
  }
package/dist/SegmentedControl/SegmentedControl.module.css.js CHANGED
@@ -1,14 +1,18 @@
1
- import "./SegmentedControl-4ef72733.css";
1
+ import "./SegmentedControl-e68d4197.css";
2
2
  //#region src/SegmentedControl/SegmentedControl.module.css.js
3
3
  var SegmentedControl_module_css_default = {
4
4
  "SegmentedControl": "prc-SegmentedControl-SegmentedControl-lqIXp",
5
+ "Item": "prc-SegmentedControl-Item-tSCQh",
6
+ "Button": "prc-SegmentedControl-Button-E48xz",
7
+ "Content": "prc-SegmentedControl-Content-1COlk",
5
8
  "Text": "prc-SegmentedControl-Text-7S2y2",
9
+ "DropdownGroup": "prc-SegmentedControl-DropdownGroup-9SmpX",
10
+ "InlineAction": "prc-SegmentedControl-InlineAction-4qmw0",
6
11
  "DropdownContainer": "prc-SegmentedControl-DropdownContainer-ZaPMn",
7
- "Item": "prc-SegmentedControl-Item-tSCQh",
8
12
  "Counter": "prc-SegmentedControl-Counter-GmZOI",
9
- "Button": "prc-SegmentedControl-Button-E48xz",
13
+ "ActionItem": "prc-SegmentedControl-ActionItem-2V1ou",
14
+ "ActionButton": "prc-SegmentedControl-ActionButton-Q5fnw",
10
15
  "IconButton": "prc-SegmentedControl-IconButton-tlzDE",
11
- "Content": "prc-SegmentedControl-Content-1COlk",
12
16
  "LeadingIcon": "prc-SegmentedControl-LeadingIcon-74n5s"
13
17
  };
14
18
  //#endregion
package/dist/SegmentedControl/SegmentedControlAction.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ import { ElementType } from "react";
2
+
3
+ //#region src/SegmentedControl/SegmentedControlAction.d.ts
4
+ interface SegmentedControlActionProps {
5
+ label: string;
6
+ icon: ElementType;
7
+ onClick?: () => void;
8
+ disabled?: boolean;
9
+ loading?: boolean;
10
+ }
11
+ //#endregion
12
+ export { SegmentedControlActionProps };
package/dist/SegmentedControl/SegmentedControlAction.js ADDED
@@ -0,0 +1,111 @@
1
+ import { IconButton } from "../Button/IconButton.js";
2
+ import { ActionList } from "../ActionList/index.js";
3
+ import SegmentedControl_module_css_default from "./SegmentedControl.module.css.js";
4
+ import { SegmentedControlActionContext } from "./SegmentedControlActionContext.js";
5
+ import { c } from "react-compiler-runtime";
6
+ import { useContext } from "react";
7
+ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
8
+ //#region src/SegmentedControl/SegmentedControlAction.tsx
9
+ const SegmentedControlMenuAction = (t0) => {
10
+ const $ = c(6);
11
+ let children;
12
+ let props;
13
+ if ($[0] !== t0) {
14
+ ({children, ...props} = t0);
15
+ $[0] = t0;
16
+ $[1] = children;
17
+ $[2] = props;
18
+ } else {
19
+ children = $[1];
20
+ props = $[2];
21
+ }
22
+ let t1;
23
+ if ($[3] !== children || $[4] !== props) {
24
+ t1 = /*#__PURE__*/ jsx("div", {
25
+ ...props,
26
+ "data-component": "SegmentedControl.Action",
27
+ children
28
+ });
29
+ $[3] = children;
30
+ $[4] = props;
31
+ $[5] = t1;
32
+ } else t1 = $[5];
33
+ return t1;
34
+ };
35
+ const SegmentedControlAction = (props) => {
36
+ const $ = c(19);
37
+ const { disabled, icon: Icon, label, loading, onClick } = props;
38
+ if (useContext(SegmentedControlActionContext) === "menu") {
39
+ let t0;
40
+ if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
41
+ t0 = /*#__PURE__*/ jsx(ActionList.Divider, {});
42
+ $[0] = t0;
43
+ } else t0 = $[0];
44
+ let t1;
45
+ if ($[1] !== onClick) {
46
+ t1 = (event) => {
47
+ event.preventDefault();
48
+ onClick === null || onClick === void 0 || onClick();
49
+ };
50
+ $[1] = onClick;
51
+ $[2] = t1;
52
+ } else t1 = $[2];
53
+ let t2;
54
+ if ($[3] !== Icon) {
55
+ t2 = /*#__PURE__*/ jsx(ActionList.LeadingVisual, { children: /*#__PURE__*/ jsx(Icon, {}) });
56
+ $[3] = Icon;
57
+ $[4] = t2;
58
+ } else t2 = $[4];
59
+ let t3;
60
+ if ($[5] !== disabled || $[6] !== label || $[7] !== loading || $[8] !== t1 || $[9] !== t2) {
61
+ t3 = /*#__PURE__*/ jsxs(Fragment$1, { children: [t0, /*#__PURE__*/ jsxs(ActionList.Item, {
62
+ role: "menuitem",
63
+ disabled,
64
+ loading,
65
+ _PrivateItemWrapper: SegmentedControlMenuAction,
66
+ onSelect: t1,
67
+ children: [t2, label]
68
+ })] });
69
+ $[5] = disabled;
70
+ $[6] = label;
71
+ $[7] = loading;
72
+ $[8] = t1;
73
+ $[9] = t2;
74
+ $[10] = t3;
75
+ } else t3 = $[10];
76
+ return t3;
77
+ }
78
+ let t0;
79
+ if ($[11] !== onClick) {
80
+ t0 = () => onClick === null || onClick === void 0 ? void 0 : onClick();
81
+ $[11] = onClick;
82
+ $[12] = t0;
83
+ } else t0 = $[12];
84
+ let t1;
85
+ if ($[13] !== Icon || $[14] !== disabled || $[15] !== label || $[16] !== loading || $[17] !== t0) {
86
+ t1 = /*#__PURE__*/ jsx("div", {
87
+ className: SegmentedControl_module_css_default.ActionItem,
88
+ "data-component": "SegmentedControl.Action",
89
+ children: /*#__PURE__*/ jsx(IconButton, {
90
+ "aria-label": label,
91
+ className: SegmentedControl_module_css_default.ActionButton,
92
+ disabled,
93
+ icon: Icon,
94
+ loading,
95
+ onClick: t0,
96
+ variant: "invisible"
97
+ })
98
+ });
99
+ $[13] = Icon;
100
+ $[14] = disabled;
101
+ $[15] = label;
102
+ $[16] = loading;
103
+ $[17] = t0;
104
+ $[18] = t1;
105
+ } else t1 = $[18];
106
+ return t1;
107
+ };
108
+ SegmentedControlAction.displayName = "SegmentedControl.Action";
109
+ SegmentedControlAction.__SLOT__ = Symbol("SegmentedControl.Action");
110
+ //#endregion
111
+ export { SegmentedControlAction as default };
package/dist/SegmentedControl/SegmentedControlActionContext.js ADDED
@@ -0,0 +1,5 @@
1
+ import { createContext } from "react";
2
+ //#region src/SegmentedControl/SegmentedControlActionContext.ts
3
+ const SegmentedControlActionContext = /*#__PURE__*/ createContext("inline");
4
+ //#endregion
5
+ export { SegmentedControlActionContext };
package/dist/SegmentedControl/SegmentedControlDivider.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import React from "react";
2
+
3
+ //#region src/SegmentedControl/SegmentedControlDivider.d.ts
4
+ type SegmentedControlDividerProps = {
5
+ className?: string;
6
+ style?: React.CSSProperties;
7
+ };
8
+ //#endregion
9
+ export { SegmentedControlDividerProps };
package/dist/SegmentedControl/SegmentedControlDivider.js ADDED
@@ -0,0 +1,24 @@
1
+ import { c } from "react-compiler-runtime";
2
+ import { jsx } from "react/jsx-runtime";
3
+ //#region src/SegmentedControl/SegmentedControlDivider.tsx
4
+ const SegmentedControlDivider = (t0) => {
5
+ const $ = c(3);
6
+ const { className, style } = t0;
7
+ let t1;
8
+ if ($[0] !== className || $[1] !== style) {
9
+ t1 = /*#__PURE__*/ jsx("li", {
10
+ "aria-hidden": "true",
11
+ className,
12
+ "data-component": "SegmentedControl.Divider",
13
+ style
14
+ });
15
+ $[0] = className;
16
+ $[1] = style;
17
+ $[2] = t1;
18
+ } else t1 = $[2];
19
+ return t1;
20
+ };
21
+ SegmentedControlDivider.displayName = "SegmentedControl.Divider";
22
+ SegmentedControlDivider.__SLOT__ = Symbol("SegmentedControl.Divider");
23
+ //#endregion
24
+ export { SegmentedControlDivider as default };
package/dist/SegmentedControl/index.d.ts CHANGED
@@ -1,4 +1,6 @@
1
+ import { SegmentedControlDividerProps } from "./SegmentedControlDivider.js";
2
+ import { SegmentedControlActionProps } from "./SegmentedControlAction.js";
1
3
  import { SegmentedControlButtonProps } from "./SegmentedControlButton.js";
2
4
  import { SegmentedControlIconButtonProps } from "./SegmentedControlIconButton.js";
3
5
  import { SegmentedControl, SegmentedControlProps } from "./SegmentedControl.js";
4
- export { SegmentedControl, type SegmentedControlButtonProps, type SegmentedControlIconButtonProps, SegmentedControlProps };
6
+ export { SegmentedControl, type SegmentedControlActionProps, type SegmentedControlButtonProps, type SegmentedControlDividerProps, type SegmentedControlIconButtonProps, SegmentedControlProps };
package/dist/index.d.ts CHANGED
@@ -88,6 +88,8 @@ import { ProgressBarItemProps, ProgressBarProps } from "./ProgressBar/ProgressBa
88
88
  import { ProgressBar } from "./ProgressBar/index.js";
89
89
  import _default$10, { RadioGroupProps } from "./RadioGroup/RadioGroup.js";
90
90
  import RelativeTime, { RelativeTimeProps } from "./RelativeTime/RelativeTime.js";
91
+ import { SegmentedControlDividerProps } from "./SegmentedControl/SegmentedControlDivider.js";
92
+ import { SegmentedControlActionProps } from "./SegmentedControl/SegmentedControlAction.js";
91
93
  import { SegmentedControlButtonProps } from "./SegmentedControl/SegmentedControlButton.js";
92
94
  import { SegmentedControlIconButtonProps } from "./SegmentedControl/SegmentedControlIconButton.js";
93
95
  import { SegmentedControl, SegmentedControlProps } from "./SegmentedControl/SegmentedControl.js";
@@ -121,4 +123,4 @@ import { ActionsProps, ChildrenPropTypes, PageHeader, PageHeaderProps, TitleArea
121
123
  import { SkeletonBox, SkeletonBoxProps } from "./Skeleton/SkeletonBox.js";
122
124
  import { ActionMenu, ActionMenuAnchorProps, ActionMenuButtonProps, ActionMenuProps } from "./ActionMenu/ActionMenu.js";
123
125
  import Overlay, { OverlayProps } from "./Overlay/Overlay.js";
124
- export { ActionBar, type ActionBarProps, ActionList, type ActionListDescriptionProps, type ActionListDividerProps, type ActionListGroupHeadingProps, type ActionListGroupHeadingTrailingActionProps, type ActionListGroupProps, type ActionListItemProps, type ActionListLeadingVisualProps, type ActionListLinkItemProps, type ActionListProps, type ActionListTrailingActionProps, type ActionListTrailingVisualProps, ActionMenu, type ActionMenuAnchorProps, type ActionMenuButtonProps, type ActionMenuProps, AnchoredOverlay, type AnchoredOverlayProps, type AnchoredPositionHookSettings, AriaAlert, type AriaAlertProps, AriaStatus, type AriaStatusProps, _default as Autocomplete, type AutocompleteInputProps, type AutocompleteMenuProps, type AutocompleteOverlayProps, Avatar, type AvatarProps, AvatarStack, type AvatarStackProps, Banner, type BannerProps, BaseStyles, type BaseStylesProps, _default$1 as BranchName, type BranchNameProps, Breadcrumb, type BreadcrumbItemProps, type BreadcrumbProps, _default$2 as Breadcrumbs, type BreadcrumbsItemProps, type BreadcrumbsProps, ButtonComponent as Button, ButtonBase, type ButtonBaseProps, ButtonGroup, type ButtonGroupProps, type ButtonProps, _default$3 as Checkbox, _default$4 as CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, _default$5 as CircleBadge, type CircleBadgeIconProps, type CircleBadgeProps, ConfirmationDialog, type ConfirmationDialogProps, CounterLabel, type CounterLabelProps, type CustomWidthOptions, Details, type DetailsProps, Dialog, type DialogButtonProps, type DialogHeaderProps, type DialogHeight, type DialogProps, type DialogWidth, DragHandle, type DragHandleProps, type FCWithSlotMarker, Flash, type FlashProps, FocusKeys, type FocusTrapHookSettings, type FocusZoneHookSettings, _default$6 as FormControl, type FormControlCaptionProps, type Props as FormControlLabelProps, type FormControlProps, type FormControlValidationProps, _default$7 as Header, type HeaderItemProps, type HeaderLinkProps, type HeaderProps, Heading, type HeadingProps, IconButton, type IconButtonProps, IssueLabelToken, type IssueLabelTokenProps, Label, type LabelColorOptions, LabelGroup, type LabelGroupProps, type LabelProps, Link, LinkButton, type LinkButtonProps, type LinkProps, NavList, type NavListDividerProps, type NavListGroupHeadingProps, type NavListGroupProps, type NavListItemProps, type NavListLeadingVisualProps, type NavListProps, type NavListSubNavProps, type NavListTrailingVisualProps, Overlay, type OverlayProps, PageHeader, type ActionsProps as PageHeaderActionsProps, type ChildrenPropTypes as PageHeaderChildrenPropTypes, type PageHeaderProps, type TitleAreaProps as PageHeaderTitleAreaProps, type TitleProps as PageHeaderTitleProps, PageLayout, type PageLayoutContentProps, type PageLayoutFooterProps, type PageLayoutHeaderProps, type PageLayoutPaneProps, type PageLayoutProps, Pagination, type PaginationProps, type PaneWidth, type PaneWidthValue, _default$8 as Popover, type PopoverContentProps, type PopoverProps, Portal, PortalContext, type PortalProps, ProgressBar, type ProgressBarItemProps, type ProgressBarProps, _default$9 as Radio, _default$10 as RadioGroup, type RadioGroupProps, type RadioProps, RelativeTime, type RelativeTimeProps, type ResponsiveValue, SegmentedControl, type SegmentedControlButtonProps, type SegmentedControlIconButtonProps, type SegmentedControlProps, _default$11 as Select, SelectPanel, type GroupedListProps as SelectPanelGroupedListProps, type ItemInput as SelectPanelItemInput, type FilteredActionListItemProps as SelectPanelItemProps, type SelectPanelProps, type SelectProps, _default$12 as SideNav, type SideNavLinkProps, type SideNavProps, SkeletonBox, type SkeletonBoxProps, type SlotMarker, Spinner, type SpinnerProps, SplitPageLayout, type SplitPageLayoutContentProps, type SplitPageLayoutFooterProps, type SplitPageLayoutHeaderProps, type SplitPageLayoutPaneProps, type SplitPageLayoutProps, Stack, type StackItemProps, type StackProps, StateLabel, type StateLabelProps, _default$13 as SubNav, type SubNavLinkProps, type SubNavLinksProps, type SubNavProps, _default$14 as Text, _default$15 as TextInput, type TextInputActionProps, type TextInputProps, _default$16 as TextInputWithTokens, type TextInputWithTokensProps, type TextProps, _default$17 as Textarea, type TextareaProps, type ThemeColorPaths, ThemeProvider, type ThemeProviderProps, type ThemeShadowPaths, _default$18 as Timeline, type TimelineActionsProps, type TimelineAvatarProps, type TimelineBadgeProps, type TimelineBadgeVariant, type TimelineBodyProps, type TimelineBreakProps, type TimelineItemProps, type TimelineItemsProps, type TimelineProps, ToggleSwitch, type ToggleSwitchProps, Token, type TokenProps, Tooltip, type TooltipProps, type TouchOrMouseEvent, TreeView, type TreeViewErrorDialogProps, type TreeViewItemProps, type TreeViewProps, type TreeViewSubTreeProps, type TreeViewVisualProps, Truncate, type TruncateProps, UnderlineNav, type UnderlineNavItemProps, type UnderlineNavProps, type UsePaneWidthOptions, type UsePaneWidthResult, VisuallyHidden, type VisuallyHiddenProps, type WithSlotMarker, asSlot, createComponent, defaultPaneWidth, isSlot, registerPortalRoot, theme, useAnchoredPosition, useColorSchemeVar, useConfirm, useDetails, useFocusTrap, useFocusZone, useFormControlForwardedProps, useId, useIsomorphicLayoutEffect, useMergedRefs, useOnEscapePress, useOnOutsideClick, useOpenAndCloseFocus, useOverlay, usePaneWidth, useProvidedRefOrCreate, useRefObjectAsForwardedRef, useResizeObserver, useResponsiveValue, useRovingTabIndex, useSafeTimeout, useSlots, useSyncedState, useTheme };
126
+ export { ActionBar, type ActionBarProps, ActionList, type ActionListDescriptionProps, type ActionListDividerProps, type ActionListGroupHeadingProps, type ActionListGroupHeadingTrailingActionProps, type ActionListGroupProps, type ActionListItemProps, type ActionListLeadingVisualProps, type ActionListLinkItemProps, type ActionListProps, type ActionListTrailingActionProps, type ActionListTrailingVisualProps, ActionMenu, type ActionMenuAnchorProps, type ActionMenuButtonProps, type ActionMenuProps, AnchoredOverlay, type AnchoredOverlayProps, type AnchoredPositionHookSettings, AriaAlert, type AriaAlertProps, AriaStatus, type AriaStatusProps, _default as Autocomplete, type AutocompleteInputProps, type AutocompleteMenuProps, type AutocompleteOverlayProps, Avatar, type AvatarProps, AvatarStack, type AvatarStackProps, Banner, type BannerProps, BaseStyles, type BaseStylesProps, _default$1 as BranchName, type BranchNameProps, Breadcrumb, type BreadcrumbItemProps, type BreadcrumbProps, _default$2 as Breadcrumbs, type BreadcrumbsItemProps, type BreadcrumbsProps, ButtonComponent as Button, ButtonBase, type ButtonBaseProps, ButtonGroup, type ButtonGroupProps, type ButtonProps, _default$3 as Checkbox, _default$4 as CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, _default$5 as CircleBadge, type CircleBadgeIconProps, type CircleBadgeProps, ConfirmationDialog, type ConfirmationDialogProps, CounterLabel, type CounterLabelProps, type CustomWidthOptions, Details, type DetailsProps, Dialog, type DialogButtonProps, type DialogHeaderProps, type DialogHeight, type DialogProps, type DialogWidth, DragHandle, type DragHandleProps, type FCWithSlotMarker, Flash, type FlashProps, FocusKeys, type FocusTrapHookSettings, type FocusZoneHookSettings, _default$6 as FormControl, type FormControlCaptionProps, type Props as FormControlLabelProps, type FormControlProps, type FormControlValidationProps, _default$7 as Header, type HeaderItemProps, type HeaderLinkProps, type HeaderProps, Heading, type HeadingProps, IconButton, type IconButtonProps, IssueLabelToken, type IssueLabelTokenProps, Label, type LabelColorOptions, LabelGroup, type LabelGroupProps, type LabelProps, Link, LinkButton, type LinkButtonProps, type LinkProps, NavList, type NavListDividerProps, type NavListGroupHeadingProps, type NavListGroupProps, type NavListItemProps, type NavListLeadingVisualProps, type NavListProps, type NavListSubNavProps, type NavListTrailingVisualProps, Overlay, type OverlayProps, PageHeader, type ActionsProps as PageHeaderActionsProps, type ChildrenPropTypes as PageHeaderChildrenPropTypes, type PageHeaderProps, type TitleAreaProps as PageHeaderTitleAreaProps, type TitleProps as PageHeaderTitleProps, PageLayout, type PageLayoutContentProps, type PageLayoutFooterProps, type PageLayoutHeaderProps, type PageLayoutPaneProps, type PageLayoutProps, Pagination, type PaginationProps, type PaneWidth, type PaneWidthValue, _default$8 as Popover, type PopoverContentProps, type PopoverProps, Portal, PortalContext, type PortalProps, ProgressBar, type ProgressBarItemProps, type ProgressBarProps, _default$9 as Radio, _default$10 as RadioGroup, type RadioGroupProps, type RadioProps, RelativeTime, type RelativeTimeProps, type ResponsiveValue, SegmentedControl, type SegmentedControlActionProps, type SegmentedControlButtonProps, type SegmentedControlDividerProps, type SegmentedControlIconButtonProps, type SegmentedControlProps, _default$11 as Select, SelectPanel, type GroupedListProps as SelectPanelGroupedListProps, type ItemInput as SelectPanelItemInput, type FilteredActionListItemProps as SelectPanelItemProps, type SelectPanelProps, type SelectProps, _default$12 as SideNav, type SideNavLinkProps, type SideNavProps, SkeletonBox, type SkeletonBoxProps, type SlotMarker, Spinner, type SpinnerProps, SplitPageLayout, type SplitPageLayoutContentProps, type SplitPageLayoutFooterProps, type SplitPageLayoutHeaderProps, type SplitPageLayoutPaneProps, type SplitPageLayoutProps, Stack, type StackItemProps, type StackProps, StateLabel, type StateLabelProps, _default$13 as SubNav, type SubNavLinkProps, type SubNavLinksProps, type SubNavProps, _default$14 as Text, _default$15 as TextInput, type TextInputActionProps, type TextInputProps, _default$16 as TextInputWithTokens, type TextInputWithTokensProps, type TextProps, _default$17 as Textarea, type TextareaProps, type ThemeColorPaths, ThemeProvider, type ThemeProviderProps, type ThemeShadowPaths, _default$18 as Timeline, type TimelineActionsProps, type TimelineAvatarProps, type TimelineBadgeProps, type TimelineBadgeVariant, type TimelineBodyProps, type TimelineBreakProps, type TimelineItemProps, type TimelineItemsProps, type TimelineProps, ToggleSwitch, type ToggleSwitchProps, Token, type TokenProps, Tooltip, type TooltipProps, type TouchOrMouseEvent, TreeView, type TreeViewErrorDialogProps, type TreeViewItemProps, type TreeViewProps, type TreeViewSubTreeProps, type TreeViewVisualProps, Truncate, type TruncateProps, UnderlineNav, type UnderlineNavItemProps, type UnderlineNavProps, type UsePaneWidthOptions, type UsePaneWidthResult, VisuallyHidden, type VisuallyHiddenProps, type WithSlotMarker, asSlot, createComponent, defaultPaneWidth, isSlot, registerPortalRoot, theme, useAnchoredPosition, useColorSchemeVar, useConfirm, useDetails, useFocusTrap, useFocusZone, useFormControlForwardedProps, useId, useIsomorphicLayoutEffect, useMergedRefs, useOnEscapePress, useOnOutsideClick, useOpenAndCloseFocus, useOverlay, usePaneWidth, useProvidedRefOrCreate, useRefObjectAsForwardedRef, useResizeObserver, useResponsiveValue, useRovingTabIndex, useSafeTimeout, useSlots, useSyncedState, useTheme };
package/generated/components.json CHANGED
@@ -6198,6 +6198,10 @@
6198
6198
  "id": "components-segmentedcontrol-features--variant-narrow-action-menu",
6199
6199
  "code": "() => (\n <SegmentedControl\n aria-label=\"File view\"\n variant={{\n narrow: 'dropdown',\n regular: 'default',\n wide: 'default',\n }}\n >\n <SegmentedControl.Button\n defaultSelected\n aria-label={'Preview'}\n leadingVisual={EyeIcon}\n >\n Preview\n </SegmentedControl.Button>\n <SegmentedControl.Button aria-label={'Raw'} leadingVisual={FileCodeIcon}>\n Raw\n </SegmentedControl.Button>\n <SegmentedControl.Button aria-label={'Blame'} leadingVisual={PeopleIcon}>\n Blame\n </SegmentedControl.Button>\n </SegmentedControl>\n)"
6200
6200
  },
6201
+ {
6202
+ "id": "components-segmentedcontrol-features--variant-narrow-action-menu-with-action",
6203
+ "code": "() => {\n const initialViews = [\n {\n id: 'all',\n label: 'All',\n },\n {\n id: 'active',\n label: 'Active',\n },\n {\n id: 'review-requests',\n label: 'Review requests',\n },\n {\n id: 'done',\n label: 'Done',\n },\n ]\n const [views, setViews] = useState(initialViews)\n const [selectedViewId, setSelectedViewId] = useState(initialViews[0].id)\n const handleAddView = () => {\n setViews((currentViews) => {\n const viewNumber = currentViews.length - 3\n return [\n ...currentViews,\n {\n id: `new-view-${viewNumber}`,\n label: `New view ${viewNumber}`,\n },\n ]\n })\n }\n const handleChange = (index: number) => {\n const nextSelectedViewId = views.at(index)?.id\n if (nextSelectedViewId) setSelectedViewId(nextSelectedViewId)\n }\n const handleReset = () => {\n setViews(initialViews)\n setSelectedViewId(initialViews[0].id)\n }\n return (\n <>\n <SegmentedControl\n aria-label=\"View\"\n onChange={handleChange}\n variant={{\n narrow: 'dropdown',\n regular: 'subtle',\n wide: 'subtle',\n }}\n >\n {views.flatMap((view) => [\n ...(view.label === 'Active'\n ? [<SegmentedControl.Divider key={`${view.label}-divider`} />]\n : []),\n <SegmentedControl.Button\n key={view.id}\n selected={view.id === selectedViewId}\n >\n {view.label}\n </SegmentedControl.Button>,\n ])}\n <SegmentedControl.Action\n label=\"Add view\"\n icon={PlusIcon}\n onClick={handleAddView}\n />\n </SegmentedControl>\n <Button\n className={classes.ResetButton}\n size=\"small\"\n onClick={handleReset}\n >\n Reset views\n </Button>\n </>\n )\n}"
6204
+ },
6201
6205
  {
6202
6206
  "id": "components-segmentedcontrol-features--fullwidth-narrow",
6203
6207
  "code": "() => (\n <SegmentedControl\n aria-label=\"File view\"\n fullWidth={{\n narrow: true,\n regular: false,\n wide: false,\n }}\n >\n <SegmentedControl.Button\n defaultSelected\n aria-label={'Preview'}\n leadingVisual={EyeIcon}\n >\n Preview\n </SegmentedControl.Button>\n <SegmentedControl.Button aria-label={'Raw'} leadingVisual={FileCodeIcon}>\n Raw\n </SegmentedControl.Button>\n <SegmentedControl.Button aria-label={'Blame'} leadingVisual={PeopleIcon}>\n Blame\n </SegmentedControl.Button>\n </SegmentedControl>\n)"
@@ -6217,6 +6221,10 @@
6217
6221
  {
6218
6222
  "id": "components-segmentedcontrol-features--associated-with-a-label-and-caption",
6219
6223
  "code": "() => (\n <div className={classes.LabelAndCaptionContainer}>\n <div className={classes.LabelAndCaption}>\n <Text\n className={classes.TextLargeBold}\n id=\"scLabel-vert\"\n style={{\n display: 'block',\n }}\n >\n File view\n </Text>\n <Text\n className={classes.TextMediumSubtle}\n id=\"scCaption-vert\"\n style={{\n display: 'block',\n }}\n >\n Change the way the file is viewed\n </Text>\n </div>\n <SegmentedControl\n aria-labelledby=\"scLabel-vert\"\n aria-describedby=\"scCaption-vert\"\n >\n <SegmentedControl.Button defaultSelected>Preview</SegmentedControl.Button>\n <SegmentedControl.Button>Raw</SegmentedControl.Button>\n <SegmentedControl.Button>Blame</SegmentedControl.Button>\n </SegmentedControl>\n </div>\n)"
6224
+ },
6225
+ {
6226
+ "id": "components-segmentedcontrol-features--variant-subtle",
6227
+ "code": "() => (\n <SegmentedControl aria-label=\"View\" variant=\"subtle\">\n <SegmentedControl.Button defaultSelected count={5}>\n All\n </SegmentedControl.Button>\n <SegmentedControl.Divider />\n <SegmentedControl.Button count={3}>Active</SegmentedControl.Button>\n <SegmentedControl.Button count={10}>\n Review requests\n </SegmentedControl.Button>\n <SegmentedControl.Divider />\n <SegmentedControl.Button count={2}>Done</SegmentedControl.Button>\n </SegmentedControl>\n)"
6220
6228
  }
6221
6229
  ],
6222
6230
  "importPath": "@primer/react",
@@ -6253,9 +6261,9 @@
6253
6261
  },
6254
6262
  {
6255
6263
  "name": "variant",
6256
- "type": "| 'default' | { narrow?: 'hideLabels' | 'dropdown' | 'default' regular?: 'hideLabels' | 'dropdown' | 'default' wide?: 'hideLabels' | 'dropdown' | 'default' }",
6264
+ "type": "| 'default' | 'subtle' | { narrow?: 'hideLabels' | 'dropdown' | 'default' | 'subtle' regular?: 'hideLabels' | 'dropdown' | 'default' | 'subtle' wide?: 'hideLabels' | 'dropdown' | 'default' | 'subtle' }",
6257
6265
  "defaultValue": "'default'",
6258
- "description": "Configure alternative ways to render the control when it gets rendered in tight spaces"
6266
+ "description": "Configure the control's visual treatment or responsive behavior in tight spaces."
6259
6267
  },
6260
6268
  {
6261
6269
  "name": "size",
@@ -6361,6 +6369,53 @@
6361
6369
  "defaultValue": ""
6362
6370
  }
6363
6371
  ]
6372
+ },
6373
+ {
6374
+ "name": "SegmentedControl.Divider",
6375
+ "props": [
6376
+ {
6377
+ "name": "className",
6378
+ "type": "string",
6379
+ "required": false
6380
+ },
6381
+ {
6382
+ "name": "style",
6383
+ "type": "React.CSSProperties",
6384
+ "required": false
6385
+ }
6386
+ ]
6387
+ },
6388
+ {
6389
+ "name": "SegmentedControl.Action",
6390
+ "props": [
6391
+ {
6392
+ "name": "label",
6393
+ "type": "string",
6394
+ "required": true,
6395
+ "description": "Accessible label for the action icon button."
6396
+ },
6397
+ {
6398
+ "name": "icon",
6399
+ "type": "Component",
6400
+ "required": true,
6401
+ "description": "The icon rendered by the action button."
6402
+ },
6403
+ {
6404
+ "name": "onClick",
6405
+ "type": "() => void",
6406
+ "description": "The handler that gets called when the action button is clicked."
6407
+ },
6408
+ {
6409
+ "name": "disabled",
6410
+ "type": "boolean",
6411
+ "description": "Whether the action is disabled."
6412
+ },
6413
+ {
6414
+ "name": "loading",
6415
+ "type": "boolean",
6416
+ "description": "Whether the action is in a loading state."
6417
+ }
6418
+ ]
6364
6419
  }
6365
6420
  ]
6366
6421
  },
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@primer/react",
3
3
  "type": "module",
4
- "version": "38.38.0-rc.37926a655",
4
+ "version": "38.38.0-rc.69771f80e",
5
5
  "description": "An implementation of GitHub's Primer Design System using React",
6
6
  "main": "./dist/index.js",
7
7
  "module": "./dist/index.js",
package/dist/SegmentedControl/SegmentedControl-4ef72733.css DELETED
@@ -1,2 +0,0 @@
1
- .prc-SegmentedControl-SegmentedControl-lqIXp{--segmented-control-icon-width:32px;--segmented-control-outer-radius:var(--borderRadius-medium,0.375rem);background-color:var(--controlTrack-bgColor-rest,#e6eaef);border:var(--borderWidth-thin,.0625rem) solid var(--controlTrack-borderColor-rest,transparent);border-radius:var(--borderRadius-medium,.375rem);display:inline-flex;font-size:var(--text-body-size-medium,.875rem);height:32px;margin:0;padding:0;position:relative}@supports (anchor-name:--value){.prc-SegmentedControl-SegmentedControl-lqIXp:before{position-anchor:--segmented-control-current-item;background-color:var(--controlKnob-bgColor-rest,#fff);border:var(--borderWidth-thin,.0625rem) solid var(--controlKnob-borderColor-rest,#d1d9e0);border-radius:var(--segmented-control-outer-radius);content:"";inset:anchor(top) anchor(right) anchor(bottom) anchor(left);position:absolute}@media (prefers-reduced-motion:no-preference){.prc-SegmentedControl-SegmentedControl-lqIXp:before{transition:inset var(--base-duration-200,[ object Object ]) var(--base-easing-easeInOut,.6,0,.2,1)}}}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-narrow=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-narrow=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}@media (min-width:48rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-regular=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-regular=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}@media (min-width:87.5rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-wide=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-regular=true]:not([data-full-width-wide=true]),.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-wide=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-narrow=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-narrow=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}}@media (min-width:48rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-regular=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-regular=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}}@media (min-width:87.5rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-wide=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-wide=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-size=small]){font-size:var(--text-body-size-small,.75rem);height:28px}.prc-SegmentedControl-DropdownContainer-ZaPMn{display:none}.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant=dropdown]{display:block}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant-narrow=dropdown]{display:block}}@media (min-width:48rem){.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant-regular=dropdown]{display:block}}@media (min-width:87.5rem){.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant-wide=dropdown]{display:block}}.prc-SegmentedControl-Item-tSCQh{display:block;flex-grow:1;margin-bottom:-1px;margin-top:-1px;position:relative}.prc-SegmentedControl-Item-tSCQh:not(:last-child){margin-right:1px}.prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:var(--borderColor-default,#d1d9e0);bottom:var(--base-size-8,.5rem);content:"";position:absolute;right:calc(var(--base-size-2,.125rem)*-1);top:var(--base-size-8,.5rem);width:1px}.prc-SegmentedControl-Item-tSCQh:not(:last-child):has(+[data-selected]):after,.prc-SegmentedControl-Item-tSCQh:not(:last-child):where([data-selected]):after{background-color:transparent}.prc-SegmentedControl-Item-tSCQh:first-child{margin-left:-1px}.prc-SegmentedControl-Item-tSCQh:last-child{margin-right:-1px}.prc-SegmentedControl-Item-tSCQh .prc-SegmentedControl-Counter-GmZOI{align-items:center;display:flex;margin-inline-start:var(--base-size-8,.5rem)}.prc-SegmentedControl-Button-E48xz{--segmented-control-button-inner-padding:12px;--segmented-control-button-bg-inset:4px;background-color:transparent;border-color:transparent;border-radius:var(--segmented-control-outer-radius);border-width:0;color:currentColor;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:var(--base-text-weight-normal,400);height:100%;padding:var(--segmented-control-button-bg-inset);width:100%}.prc-SegmentedControl-Button-E48xz svg{fill:var(--fgColor-muted,#59636e);color:var(--fgColor-muted,#59636e)}.prc-SegmentedControl-Button-E48xz:focus:not(:disabled){box-shadow:none;outline:var(--base-size-2,.125rem) solid var(--fgColor-accent,#0969da);outline-offset:-1px}.prc-SegmentedControl-Button-E48xz:focus:not(:disabled):not(:focus-visible){outline:1px solid transparent}.prc-SegmentedControl-Button-E48xz:focus-visible:not(:disabled){box-shadow:none;outline:var(--base-size-2,.125rem) solid var(--fgColor-accent,#0969da);outline-offset:-1px}.prc-SegmentedControl-Button-E48xz:focus:focus-visible:not(:last-child):after{width:0}.prc-SegmentedControl-Button-E48xz[aria-disabled=true]:not([aria-pressed=true]){background-color:transparent;color:var(--fgColor-disabled,#818b98);cursor:not-allowed}.prc-SegmentedControl-Button-E48xz[aria-disabled=true]:not([aria-pressed=true]) svg{fill:var(--fgColor-disabled,#818b98);color:var(--fgColor-disabled,#818b98)}@media (pointer:coarse){.prc-SegmentedControl-Button-E48xz:before{content:"";left:0;min-height:44px;position:absolute;right:0;top:50%;transform:translateY(-50%)}}.prc-SegmentedControl-IconButton-tlzDE{width:var(--segmented-control-icon-width,32px)}.prc-SegmentedControl-Content-1COlk{align-items:center;background-color:transparent;border-color:transparent;border-radius:calc(var(--segmented-control-outer-radius) - var(--segmented-control-button-bg-inset)/2);border-style:solid;border-width:var(--borderWidth-thin,.0625rem);display:flex;height:100%;justify-content:center;padding-left:calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));padding-right:calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));transition:background-color var(--base-duration-200,[ object Object ]) var(--base-easing-easeInOut,.6,0,.2,1)}.prc-SegmentedControl-Button-E48xz[aria-pressed=true]{font-weight:var(--base-text-weight-semibold,600);padding:0}.prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{padding-left:var(--segmented-control-button-inner-padding);padding-right:var(--segmented-control-button-inner-padding);anchor-name:--segmented-control-current-item}@supports not (anchor-name:--value){.prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--controlKnob-bgColor-rest,#fff);border-color:var(--controlKnob-borderColor-rest,#d1d9e0);border-radius:var(--segmented-control-outer-radius)}}.prc-SegmentedControl-Button-E48xz:not([aria-pressed=true],[aria-disabled=true]):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--controlTrack-bgColor-hover,#e0e6eb)}.prc-SegmentedControl-Button-E48xz:not([aria-pressed=true],[aria-disabled=true]):active .prc-SegmentedControl-Content-1COlk{background-color:var(--controlTrack-bgColor-active,#dae0e7)}.prc-SegmentedControl-Text-7S2y2:after{content:attr(data-text);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;overflow:hidden;pointer-events:none;-webkit-user-select:none;user-select:none;visibility:hidden}.prc-SegmentedControl-LeadingIcon-74n5s{margin-right:var(--base-size-4,.25rem)}
2
- /*# sourceMappingURL=SegmentedControl-4ef72733.css.map */
package/dist/SegmentedControl/SegmentedControl-4ef72733.css.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/SegmentedControl/SegmentedControl.module.css.js"],"names":[],"mappings":"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","file":"SegmentedControl-4ef72733.css","sourcesContent":[".SegmentedControl {\n /* TODO: use primitive `control.medium.size` when it is available instead of '32px' */\n --segmented-control-icon-width: 32px;\n --segmented-control-outer-radius: var(--borderRadius-medium);\n\n display: inline-flex;\n\n /* TODO: use primitive `control.{small|medium}.size` when it is available */\n height: 32px;\n padding: 0;\n margin: 0;\n font-size: var(--text-body-size-medium);\n background-color: var(--controlTrack-bgColor-rest);\n border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest, transparent);\n border-radius: var(--borderRadius-medium);\n position: relative;\n\n @supports (anchor-name: --value) {\n &::before {\n position-anchor: --segmented-control-current-item;\n content: '';\n position: absolute;\n inset: anchor(top) anchor(right) anchor(bottom) anchor(left);\n background-color: var(--controlKnob-bgColor-rest);\n border: var(--borderWidth-thin) solid var(--controlKnob-borderColor-rest);\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmented-control-outer-radius);\n\n @media (prefers-reduced-motion: no-preference) {\n transition: inset var(--base-duration-200) var(--base-easing-easeInOut);\n }\n }\n }\n\n /* Responsive full-width */\n &[data-full-width='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n\n @media (--viewportRange-narrow) {\n &[data-full-width-narrow='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width-narrow='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-full-width-regular='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width-regular='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-full-width-wide='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width-wide='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n\n &[data-full-width-regular='true']:not([data-full-width-wide='true']) {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n }\n\n /* Hide when dropdown variant is active */\n &[data-variant='dropdown'] {\n display: none;\n }\n\n /* Handle hideLabels variant - hide button text */\n &[data-variant='hideLabels'] .Text {\n display: none;\n }\n\n @media (--viewportRange-narrow) {\n &[data-variant-narrow='dropdown'] {\n display: none;\n }\n\n &[data-variant-narrow='hideLabels'] .Text {\n display: none;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-variant-regular='dropdown'] {\n display: none;\n }\n\n &[data-variant-regular='hideLabels'] .Text {\n display: none;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-variant-wide='dropdown'] {\n display: none;\n }\n\n &[data-variant-wide='hideLabels'] .Text {\n display: none;\n }\n }\n\n &:where([data-size='small']) {\n /* TODO: use primitive `control.{small|medium}.size` when it is available */\n height: 28px;\n font-size: var(--text-body-size-small);\n }\n}\n\n.DropdownContainer {\n display: none;\n\n /* Show when dropdown variant is active */\n &[data-variant='dropdown'] {\n display: block;\n }\n\n @media (--viewportRange-narrow) {\n &[data-variant-narrow='dropdown'] {\n display: block;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-variant-regular='dropdown'] {\n display: block;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-variant-wide='dropdown'] {\n display: block;\n }\n }\n}\n\n.Item {\n position: relative;\n display: block;\n /* stylelint-disable-next-line primer/spacing */\n margin-top: -1px;\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: -1px;\n flex-grow: 1;\n\n &:not(:last-child) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: 1px;\n\n &::after {\n position: absolute;\n top: var(--base-size-8);\n right: calc(-1 * var(--base-size-2));\n bottom: var(--base-size-8);\n width: 1px;\n content: '';\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n /* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- scoped to CSS Module, audited (github/github-ui#17224) */\n &:has(+ [data-selected])::after,\n &:where([data-selected])::after {\n background-color: transparent;\n }\n }\n\n &:first-child {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: -1px;\n }\n\n &:last-child {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: -1px;\n }\n\n .Counter {\n margin-inline-start: var(--base-size-8);\n display: flex;\n align-items: center;\n }\n}\n\n.Button {\n /* TODO: use primitive `primer.control.medium.paddingInline.normal` when it is available */\n --segmented-control-button-inner-padding: 12px;\n --segmented-control-button-bg-inset: 4px;\n\n width: 100%;\n height: 100%;\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--segmented-control-button-bg-inset);\n font-family: inherit;\n font-size: inherit;\n font-weight: var(--base-text-weight-normal);\n color: currentColor;\n cursor: pointer;\n background-color: transparent;\n border-color: transparent;\n border-width: 0;\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmented-control-outer-radius);\n\n & svg {\n fill: var(--fgColor-muted);\n color: var(--fgColor-muted);\n }\n\n /* fallback :focus state */\n &:focus:not(:disabled) {\n outline: var(--base-size-2) solid var(--fgColor-accent);\n outline-offset: -1px;\n box-shadow: none;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n }\n }\n\n /* default focus state */\n &:focus-visible:not(:disabled) {\n outline: var(--base-size-2) solid var(--fgColor-accent);\n outline-offset: -1px;\n box-shadow: none;\n }\n\n /* stylelint-disable-next-line selector-max-specificity */\n &:focus:focus-visible:not(:last-child)::after {\n /* fixes an issue where the focus outline shows over the pseudo-element */\n width: 0;\n }\n\n &[aria-disabled='true']:not([aria-pressed='true']) {\n cursor: not-allowed;\n color: var(--fgColor-disabled);\n background-color: transparent;\n\n & svg {\n fill: var(--fgColor-disabled);\n color: var(--fgColor-disabled);\n }\n }\n\n @media (pointer: coarse) {\n &::before {\n position: absolute;\n top: 50%;\n right: 0;\n left: 0;\n min-height: 44px;\n content: '';\n transform: translateY(-50%);\n }\n }\n}\n\n.IconButton {\n width: var(--segmented-control-icon-width, 32px);\n}\n\n.Content {\n display: flex;\n height: 100%;\n /* stylelint-disable-next-line primer/spacing */\n padding-right: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));\n /* stylelint-disable-next-line primer/spacing */\n padding-left: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));\n border-color: transparent;\n border-style: solid;\n border-width: var(--borderWidth-thin);\n background-color: transparent;\n transition: background-color var(--base-duration-200) var(--base-easing-easeInOut);\n\n /*\n innerRadius = outerRadius - distance/2\n https://stackoverflow.com/questions/2932146/math-problem-determine-the-corner-radius-of-an-inner-border-based-on-outer-corn\n */\n /* stylelint-disable-next-line primer/borders */\n border-radius: calc(var(--segmented-control-outer-radius) - var(--segmented-control-button-bg-inset) / 2);\n align-items: center;\n justify-content: center;\n}\n\n.Button[aria-pressed='true'] {\n padding: 0;\n font-weight: var(--base-text-weight-semibold);\n\n .Content {\n /* stylelint-disable-next-line primer/spacing */\n padding-right: var(--segmented-control-button-inner-padding);\n /* stylelint-disable-next-line primer/spacing */\n padding-left: var(--segmented-control-button-inner-padding);\n anchor-name: --segmented-control-current-item;\n\n @supports not (anchor-name: --value) {\n background-color: var(--controlKnob-bgColor-rest);\n border-color: var(--controlKnob-borderColor-rest);\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmented-control-outer-radius);\n }\n }\n}\n\n.Button:not([aria-pressed='true'], [aria-disabled='true']) {\n &:hover .Content {\n background-color: var(--controlTrack-bgColor-hover);\n }\n\n &:active .Content {\n background-color: var(--controlTrack-bgColor-active);\n }\n}\n\n.Text::after {\n display: block;\n height: 0;\n overflow: hidden;\n font-weight: var(--base-text-weight-semibold);\n pointer-events: none;\n visibility: hidden;\n content: attr(data-text);\n user-select: none;\n}\n\n.LeadingIcon {\n margin-right: var(--base-size-4);\n}\n"]}