@primer/react 38.29.0-rc.ee664b93c → 38.29.0

package/generated/components.json

@@ -534,6 +534,12 @@
               "type": "boolean",
               "defaultValue": "false",
               "description": "Whether the TrailingAction is in a loading state. When true, the TrailingAction will render a spinner instead of an icon. Only available when `as` is 'button'."
+            },
+            {
+              "name": "tooltipDirection",
+              "type": "'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw'",
+              "defaultValue": "'w'",
+              "description": "Direction of the tooltip shown when hovering over the TrailingAction. Only applies when `icon` is set."
             }
           ]
         },
@@ -1035,7 +1041,7 @@
         },
         {
           "id": "components-autocomplete-features--in-a-dialog",
-          "code": "() => {\n  const outerContainerRef = useRef<HTMLDivElement>(null)\n  const [mounted, setMounted] = useState(false)\n  const [isDialogOpen, setIsDialogOpen] = useState(false)\n  useEffect(() => {\n    if (outerContainerRef.current instanceof HTMLElement) {\n      registerPortalRoot(outerContainerRef.current, 'outerContainer')\n      setMounted(true)\n    }\n  }, [isDialogOpen])\n  return (\n    <>\n      <Button onClick={() => setIsDialogOpen(true)}>Show dialog</Button>\n      <Dialog\n        aria-label=\"Dialog with autocomplete\"\n        id=\"dialog-with-autocomplete\"\n        isOpen={isDialogOpen}\n        onDismiss={() => setIsDialogOpen(false)}\n      >\n        <div ref={outerContainerRef}>\n          <form className={classes.FormPadding}>\n            {mounted ? (\n              <FormControl>\n                <FormControl.Label id=\"autocompleteLabel\">\n                  Default label\n                </FormControl.Label>\n                <Autocomplete>\n                  <Autocomplete.Input data-testid=\"autocompleteInput\" />\n                  <Autocomplete.Overlay portalContainerName=\"outerContainer\">\n                    <Autocomplete.Menu\n                      items={items}\n                      selectedItemIds={[]}\n                      aria-labelledby=\"autocompleteLabel\"\n                    />\n                  </Autocomplete.Overlay>\n                </Autocomplete>\n              </FormControl>\n            ) : null}\n          </form>\n        </div>\n      </Dialog>\n      <p>\n        The Autocomplete.Overlay is portalled to a div inside the Dialog to\n        ensure it appears above the dialog in the stacking context.\n      </p>\n    </>\n  )\n}"
+          "code": "() => {\n  const outerContainerRef = useRef<HTMLDivElement>(null)\n  const [mounted, setMounted] = useState(false)\n  const [isDialogOpen, setIsDialogOpen] = useState(false)\n  useEffect(() => {\n    if (outerContainerRef.current instanceof HTMLElement) {\n      registerPortalRoot(outerContainerRef.current, 'outerContainer')\n      // eslint-disable-next-line react-you-might-not-need-an-effect/no-chain-state-updates\n      setMounted(true)\n    }\n  }, [isDialogOpen])\n  return (\n    <>\n      <Button onClick={() => setIsDialogOpen(true)}>Show dialog</Button>\n      <Dialog\n        aria-label=\"Dialog with autocomplete\"\n        id=\"dialog-with-autocomplete\"\n        isOpen={isDialogOpen}\n        onDismiss={() => setIsDialogOpen(false)}\n      >\n        <div ref={outerContainerRef}>\n          <form className={classes.FormPadding}>\n            {mounted ? (\n              <FormControl>\n                <FormControl.Label id=\"autocompleteLabel\">\n                  Default label\n                </FormControl.Label>\n                <Autocomplete>\n                  <Autocomplete.Input data-testid=\"autocompleteInput\" />\n                  <Autocomplete.Overlay portalContainerName=\"outerContainer\">\n                    <Autocomplete.Menu\n                      items={items}\n                      selectedItemIds={[]}\n                      aria-labelledby=\"autocompleteLabel\"\n                    />\n                  </Autocomplete.Overlay>\n                </Autocomplete>\n              </FormControl>\n            ) : null}\n          </form>\n        </div>\n      </Dialog>\n      <p>\n        The Autocomplete.Overlay is portalled to a div inside the Dialog to\n        ensure it appears above the dialog in the stacking context.\n      </p>\n    </>\n  )\n}"
         }
       ],
       "importPath": "@primer/react",
@@ -3140,7 +3146,7 @@
         },
         {
           "id": "components-dialog-features--repro-multistep-dialog-with-conditional-footer",
-          "code": "({ width, height }: DialogStoryProps) => {\n  const [isOpen, setIsOpen] = useState(false)\n  const onDialogClose = useCallback(() => setIsOpen(false), [])\n  const [step, setStep] = React.useState(1)\n  const [inputText, setInputText] = React.useState('')\n  const dialogRef = useRef<HTMLDivElement>(null)\n  const renderFooterConditionally = () => {\n    if (step === 1) return null\n    return (\n      <Dialog.Footer>\n        <Button variant=\"primary\">Submit</Button>\n      </Dialog.Footer>\n    )\n  }\n  React.useEffect(() => {\n    // focus the close button when the step changes\n    const focusTarget = dialogRef.current?.querySelector(\n      'button[aria-label=\"Close\"]',\n    ) as HTMLButtonElement\n    if (step === 2) {\n      focusTarget.focus()\n    }\n  }, [step])\n  return (\n    <>\n      <Button onClick={() => setIsOpen(!isOpen)}>Show dialog</Button>\n      {isOpen && (\n        <Dialog\n          title={`Step ${step}`}\n          width={width}\n          height={height}\n          renderFooter={renderFooterConditionally}\n          onClose={onDialogClose}\n          footerButtons={[\n            {\n              buttonType: 'primary',\n              content: 'Proceed',\n            },\n          ]}\n          ref={dialogRef}\n        >\n          {step === 1 ? (\n            <Stack gap=\"spacious\" direction=\"vertical\">\n              <Stack direction=\"horizontal\" justify=\"space-between\">\n                Bug Report <Button onClick={() => setStep(2)}>Choose</Button>\n              </Stack>\n              <Stack direction=\"horizontal\" justify=\"space-between\">\n                Feature request{' '}\n                <Button onClick={() => setStep(2)}>Choose</Button>\n              </Stack>\n            </Stack>\n          ) : (\n            <div>\n              <Stack gap=\"condensed\" direction=\"vertical\">\n                <label htmlFor=\"description\">Description</label>\n                <TextInput\n                  id=\"description\"\n                  placeholder=\"Write the description here\"\n                  value={inputText}\n                  onChange={(event) => setInputText(event.target.value)}\n                />\n              </Stack>\n            </div>\n          )}\n        </Dialog>\n      )}\n    </>\n  )\n}"
+          "code": "({ width, height }: DialogStoryProps) => {\n  const [isOpen, setIsOpen] = useState(false)\n  const onDialogClose = useCallback(() => setIsOpen(false), [])\n  const [step, setStep] = React.useState(1)\n  const [inputText, setInputText] = React.useState('')\n  const dialogRef = useRef<HTMLDivElement>(null)\n  const renderFooterConditionally = () => {\n    if (step === 1) return null\n    return (\n      <Dialog.Footer>\n        <Button variant=\"primary\">Submit</Button>\n      </Dialog.Footer>\n    )\n  }\n  React.useEffect(() => {\n    // focus the close button when the step changes\n    const focusTarget = dialogRef.current?.querySelector(\n      'button[aria-label=\"Close\"]',\n    ) as HTMLButtonElement\n    // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler\n    if (step === 2) {\n      focusTarget.focus()\n    }\n  }, [step])\n  return (\n    <>\n      <Button onClick={() => setIsOpen(!isOpen)}>Show dialog</Button>\n      {isOpen && (\n        <Dialog\n          title={`Step ${step}`}\n          width={width}\n          height={height}\n          renderFooter={renderFooterConditionally}\n          onClose={onDialogClose}\n          footerButtons={[\n            {\n              buttonType: 'primary',\n              content: 'Proceed',\n            },\n          ]}\n          ref={dialogRef}\n        >\n          {step === 1 ? (\n            <Stack gap=\"spacious\" direction=\"vertical\">\n              <Stack direction=\"horizontal\" justify=\"space-between\">\n                Bug Report <Button onClick={() => setStep(2)}>Choose</Button>\n              </Stack>\n              <Stack direction=\"horizontal\" justify=\"space-between\">\n                Feature request{' '}\n                <Button onClick={() => setStep(2)}>Choose</Button>\n              </Stack>\n            </Stack>\n          ) : (\n            <div>\n              <Stack gap=\"condensed\" direction=\"vertical\">\n                <label htmlFor=\"description\">Description</label>\n                <TextInput\n                  id=\"description\"\n                  placeholder=\"Write the description here\"\n                  value={inputText}\n                  onChange={(event) => setInputText(event.target.value)}\n                />\n              </Stack>\n            </div>\n          )}\n        </Dialog>\n      )}\n    </>\n  )\n}"
         },
         {
           "id": "components-dialog-features--bottom-sheet-narrow",
@@ -3428,7 +3434,7 @@
         },
         {
           "id": "components-formcontrol-features--with-custom-input",
-          "code": "() => {\n  const [value, setValue] = React.useState('mona lisa')\n  const [validationResult, setValidationResult] = React.useState('')\n  const doesValueContainSpaces = (inputValue: string) => /\\s/g.test(inputValue)\n  const handleInputChange = (e: {\n    currentTarget: {\n      value: React.SetStateAction<string>\n    }\n  }) => {\n    setValue(e.currentTarget.value)\n  }\n  React.useEffect(() => {\n    if (doesValueContainSpaces(value)) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setValidationResult('noSpaces')\n    } else if (value) {\n      setValidationResult('validName')\n    }\n  }, [value])\n  return (\n    <div className={classes.GridContainer}>\n      <FormControl>\n        <FormControl.Label htmlFor=\"custom-input\">\n          GitHub handle\n        </FormControl.Label>\n        <CustomTextInput\n          id=\"custom-input\"\n          aria-describedby=\"custom-input-validation custom-input-caption\"\n          aria-invalid={validationResult === 'noSpaces'}\n          onChange={handleInputChange}\n        />\n        {validationResult === 'noSpaces' && (\n          <FormControl.Validation id=\"custom-input-validation\" variant=\"error\">\n            GitHub handles cannot contain spaces\n          </FormControl.Validation>\n        )}\n        {validationResult === 'validName' && (\n          <FormControl.Validation\n            id=\"custom-input-validation\"\n            variant=\"success\"\n          >\n            Valid name\n          </FormControl.Validation>\n        )}\n        <FormControl.Caption id=\"custom-input-caption\">\n          With or without &quot;@&quot;. For example &quot;monalisa&quot; or\n          &quot;@monalisa&quot;\n        </FormControl.Caption>\n      </FormControl>\n\n      <CheckboxGroup>\n        <CheckboxGroup.Label>Checkboxes</CheckboxGroup.Label>\n        <FormControl layout=\"horizontal\">\n          <CustomCheckboxInput\n            id=\"custom-checkbox-one\"\n            aria-describedby=\"custom-checkbox-one-caption\"\n            value=\"checkOne\"\n          />\n          <FormControl.Label htmlFor=\"custom-checkbox-one\">\n            Checkbox one\n          </FormControl.Label>\n          <FormControl.Caption id=\"custom-checkbox-one-caption\">\n            Hint text for checkbox one\n          </FormControl.Caption>\n        </FormControl>\n        <FormControl layout=\"horizontal\">\n          <CustomCheckboxInput\n            id=\"custom-checkbox-two\"\n            aria-describedby=\"custom-checkbox-two-caption\"\n            value=\"checkTwo\"\n          />\n          <FormControl.Label htmlFor=\"custom-checkbox-two\">\n            Checkbox two\n          </FormControl.Label>\n          <FormControl.Caption id=\"custom-checkbox-two-caption\">\n            Hint text for checkbox two\n          </FormControl.Caption>\n        </FormControl>\n      </CheckboxGroup>\n    </div>\n  )\n}"
+          "code": "() => {\n  const [value, setValue] = React.useState('mona lisa')\n  const [validationResult, setValidationResult] = React.useState('')\n  const doesValueContainSpaces = (inputValue: string) => /\\s/g.test(inputValue)\n  const handleInputChange = (e: {\n    currentTarget: {\n      value: React.SetStateAction<string>\n    }\n  }) => {\n    setValue(e.currentTarget.value)\n  }\n  React.useEffect(() => {\n    if (doesValueContainSpaces(value)) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect, react-you-might-not-need-an-effect/no-chain-state-updates\n      setValidationResult('noSpaces')\n      // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler\n    } else if (value) {\n      // eslint-disable-next-line react-you-might-not-need-an-effect/no-chain-state-updates\n      setValidationResult('validName')\n    }\n  }, [value])\n  return (\n    <div className={classes.GridContainer}>\n      <FormControl>\n        <FormControl.Label htmlFor=\"custom-input\">\n          GitHub handle\n        </FormControl.Label>\n        <CustomTextInput\n          id=\"custom-input\"\n          aria-describedby=\"custom-input-validation custom-input-caption\"\n          aria-invalid={validationResult === 'noSpaces'}\n          onChange={handleInputChange}\n        />\n        {validationResult === 'noSpaces' && (\n          <FormControl.Validation id=\"custom-input-validation\" variant=\"error\">\n            GitHub handles cannot contain spaces\n          </FormControl.Validation>\n        )}\n        {validationResult === 'validName' && (\n          <FormControl.Validation\n            id=\"custom-input-validation\"\n            variant=\"success\"\n          >\n            Valid name\n          </FormControl.Validation>\n        )}\n        <FormControl.Caption id=\"custom-input-caption\">\n          With or without &quot;@&quot;. For example &quot;monalisa&quot; or\n          &quot;@monalisa&quot;\n        </FormControl.Caption>\n      </FormControl>\n\n      <CheckboxGroup>\n        <CheckboxGroup.Label>Checkboxes</CheckboxGroup.Label>\n        <FormControl layout=\"horizontal\">\n          <CustomCheckboxInput\n            id=\"custom-checkbox-one\"\n            aria-describedby=\"custom-checkbox-one-caption\"\n            value=\"checkOne\"\n          />\n          <FormControl.Label htmlFor=\"custom-checkbox-one\">\n            Checkbox one\n          </FormControl.Label>\n          <FormControl.Caption id=\"custom-checkbox-one-caption\">\n            Hint text for checkbox one\n          </FormControl.Caption>\n        </FormControl>\n        <FormControl layout=\"horizontal\">\n          <CustomCheckboxInput\n            id=\"custom-checkbox-two\"\n            aria-describedby=\"custom-checkbox-two-caption\"\n            value=\"checkTwo\"\n          />\n          <FormControl.Label htmlFor=\"custom-checkbox-two\">\n            Checkbox two\n          </FormControl.Label>\n          <FormControl.Caption id=\"custom-checkbox-two-caption\">\n            Hint text for checkbox two\n          </FormControl.Caption>\n        </FormControl>\n      </CheckboxGroup>\n    </div>\n  )\n}"
         },
         {
           "id": "components-formcontrol-features--with-checkbox-and-radio-inputs",
@@ -3440,7 +3446,7 @@
         },
         {
           "id": "components-formcontrol-features--validation-example",
-          "code": "() => {\n  const [value, setValue] = React.useState('mona lisa')\n  const [validationResult, setValidationResult] = React.useState('')\n  const doesValueContainSpaces = (inputValue: string) => /\\s/g.test(inputValue)\n  const handleInputChange = (e: {\n    currentTarget: {\n      value: React.SetStateAction<string>\n    }\n  }) => {\n    setValue(e.currentTarget.value)\n  }\n  React.useEffect(() => {\n    if (doesValueContainSpaces(value)) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setValidationResult('noSpaces')\n    } else if (value) {\n      setValidationResult('validName')\n    }\n  }, [value])\n  return (\n    <FormControl>\n      <FormControl.Label>GitHub handle</FormControl.Label>\n      <TextInput block value={value} onChange={handleInputChange} />\n      {validationResult === 'noSpaces' && (\n        <FormControl.Validation variant=\"error\">\n          GitHub handles cannot contain spaces\n        </FormControl.Validation>\n      )}\n      {validationResult === 'validName' && (\n        <FormControl.Validation variant=\"success\">\n          Valid name\n        </FormControl.Validation>\n      )}\n      <FormControl.Caption>\n        With or without &quot;@&quot;. For example &quot;monalisa&quot; or\n        &quot;@monalisa&quot;\n      </FormControl.Caption>\n    </FormControl>\n  )\n}"
+          "code": "() => {\n  const [value, setValue] = React.useState('mona lisa')\n  const [validationResult, setValidationResult] = React.useState('')\n  const doesValueContainSpaces = (inputValue: string) => /\\s/g.test(inputValue)\n  const handleInputChange = (e: {\n    currentTarget: {\n      value: React.SetStateAction<string>\n    }\n  }) => {\n    setValue(e.currentTarget.value)\n  }\n  React.useEffect(() => {\n    if (doesValueContainSpaces(value)) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect, react-you-might-not-need-an-effect/no-chain-state-updates\n      setValidationResult('noSpaces')\n      // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler\n    } else if (value) {\n      // eslint-disable-next-line react-you-might-not-need-an-effect/no-chain-state-updates\n      setValidationResult('validName')\n    }\n  }, [value])\n  return (\n    <FormControl>\n      <FormControl.Label>GitHub handle</FormControl.Label>\n      <TextInput block value={value} onChange={handleInputChange} />\n      {validationResult === 'noSpaces' && (\n        <FormControl.Validation variant=\"error\">\n          GitHub handles cannot contain spaces\n        </FormControl.Validation>\n      )}\n      {validationResult === 'validName' && (\n        <FormControl.Validation variant=\"success\">\n          Valid name\n        </FormControl.Validation>\n      )}\n      <FormControl.Caption>\n        With or without &quot;@&quot;. For example &quot;monalisa&quot; or\n        &quot;@monalisa&quot;\n      </FormControl.Caption>\n    </FormControl>\n  )\n}"
         },
         {
           "id": "components-formcontrol-features--with-select-panel",
@@ -5605,7 +5611,7 @@
         },
         {
           "id": "behaviors-portal-features--custom-portal-root-by-registration",
-          "code": "() => {\n  const outerContainerRef = React.useRef<HTMLDivElement>(null)\n  const [mounted, setMounted] = React.useState(false)\n  React.useEffect(() => {\n    if (outerContainerRef.current instanceof HTMLElement) {\n      registerPortalRoot(outerContainerRef.current)\n      setMounted(true)\n    }\n  }, [])\n  return (\n    <>\n      Root position\n      <div\n        className={clsx(classes.PortalContainer, classes.OuterContainer)}\n        ref={outerContainerRef}\n      >\n        {mounted ? (\n          <>\n            Outer container\n            <div\n              className={clsx(classes.PortalContainer, classes.InnerContainer)}\n            >\n              Inner container\n              <Portal>Portaled content rendered at the outer container.</Portal>\n            </div>\n          </>\n        ) : null}\n      </div>\n    </>\n  )\n}"
+          "code": "() => {\n  const outerContainerRef = React.useRef<HTMLDivElement>(null)\n  const [mounted, setMounted] = React.useState(false)\n  React.useEffect(() => {\n    if (outerContainerRef.current instanceof HTMLElement) {\n      registerPortalRoot(outerContainerRef.current)\n      // eslint-disable-next-line react-you-might-not-need-an-effect/no-initialize-state\n      setMounted(true)\n    }\n  }, [])\n  return (\n    <>\n      Root position\n      <div\n        className={clsx(classes.PortalContainer, classes.OuterContainer)}\n        ref={outerContainerRef}\n      >\n        {mounted ? (\n          <>\n            Outer container\n            <div\n              className={clsx(classes.PortalContainer, classes.InnerContainer)}\n            >\n              Inner container\n              <Portal>Portaled content rendered at the outer container.</Portal>\n            </div>\n          </>\n        ) : null}\n      </div>\n    </>\n  )\n}"
         },
         {
           "id": "behaviors-portal-features--multiple-portal-roots",
@@ -8781,6 +8787,12 @@
             {
               "name": "ref",
               "type": "React.Ref<HTMLElement>"
+            },
+            {
+              "name": "as",
+              "type": "React.ElementType",
+              "defaultValue": "'li'",
+              "description": "The element type to render the tree item as. When set to a different element type or component, the polymorphic element is rendered with `role=\"treeitem\"` and is wrapped in an `li` element with `role=\"none\"` so the markup remains valid inside a `ul` with `role=\"tree\"`."
             }
           ]
         },
@@ -9276,7 +9288,7 @@
         },
         {
           "id": "deprecated-components-selectpanel-examples--with-filter-buttons",
-          "code": "() => {\n  const [selectedFilter, setSelectedFilter] = React.useState<\n    'branches' | 'tags'\n  >('branches')\n\n  /* Selection */\n  const [savedInitialRef, setSavedInitialRef] = React.useState(data.ref)\n  const [selectedRef, setSelectedRef] = React.useState(savedInitialRef)\n  const onSubmit = () => {\n    setSavedInitialRef(selectedRef)\n    data.ref = selectedRef // pretending to persist changes\n\n    // eslint-disable-next-line no-console\n    console.log('form submitted')\n  }\n  const onCancel = () => {\n    setSelectedRef(savedInitialRef)\n  }\n\n  /* Filter */\n  const [query, setQuery] = React.useState('')\n  const onSearchInputChange: React.ChangeEventHandler<HTMLInputElement> = (\n    event,\n  ) => {\n    const query = event.currentTarget.value\n    setQuery(query)\n  }\n  const [filteredRefs, setFilteredRefs] = React.useState(data.branches)\n  const setSearchResults = (\n    query: string,\n    selectedFilter: 'branches' | 'tags',\n  ) => {\n    if (query === '') setFilteredRefs(data[selectedFilter])\n    else {\n      setFilteredRefs(\n        data[selectedFilter]\n          .map((item) => {\n            if (item.name.toLowerCase().startsWith(query))\n              return {\n                priority: 1,\n                item,\n              }\n            else if (item.name.toLowerCase().includes(query))\n              return {\n                priority: 2,\n                item,\n              }\n            else\n              return {\n                priority: -1,\n                item,\n              }\n          })\n          .filter((result) => result.priority > 0)\n          .map((result) => result.item),\n      )\n    }\n  }\n  React.useEffect(\n    function updateSearchResults() {\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setSearchResults(query, selectedFilter)\n    },\n    [query, selectedFilter],\n  )\n  const sortingFn = (ref: { id: string }) => {\n    if (ref.id === savedInitialRef) return -1\n    else return 1\n  }\n  const itemsToShow = query\n    ? filteredRefs\n    : data[selectedFilter].sort(sortingFn)\n  return (\n    <>\n      <h1>With Filter Buttons {savedInitialRef}</h1>\n\n      <SelectPanel\n        title=\"Switch branches/tags\"\n        onSubmit={onSubmit}\n        onCancel={onCancel}\n      >\n        <SelectPanel.Button\n          leadingVisual={GitBranchIcon}\n          trailingVisual={TriangleDownIcon}\n        >\n          {savedInitialRef}\n        </SelectPanel.Button>\n\n        <SelectPanel.Header>\n          <SelectPanel.SearchInput onChange={onSearchInputChange} />\n\n          <div id=\"filters\" className={classes.FilterButtons}>\n            <Button\n              variant=\"invisible\"\n              style={{\n                fontWeight:\n                  selectedFilter === 'branches'\n                    ? 'var(--base-text-weight-medium)'\n                    : 'var(--base-text-weight-normal)',\n                color: 'var(--fgColor-default)',\n              }}\n              onClick={() => setSelectedFilter('branches')}\n              count={20}\n            >\n              Branches\n            </Button>\n            <Button\n              variant=\"invisible\"\n              style={{\n                fontWeight:\n                  selectedFilter === 'tags'\n                    ? 'var(--base-text-weight-medium)'\n                    : 'var(--base-text-weight-normal)',\n                color: 'var(--fgColor-default)',\n              }}\n              onClick={() => setSelectedFilter('tags')}\n              count={8}\n            >\n              Tags\n            </Button>\n          </div>\n        </SelectPanel.Header>\n\n        {itemsToShow.length === 0 ? (\n          <SelectPanel.Message\n            variant=\"empty\"\n            title={`No labels found for \"${query}\"`}\n          >\n            Try a different search term\n          </SelectPanel.Message>\n        ) : (\n          <ActionList>\n            {itemsToShow.map((item) => (\n              <ActionList.Item\n                key={item.id}\n                selected={selectedRef === item.id}\n                onSelect={() => setSelectedRef(item.id)}\n              >\n                {item.name}\n                <ActionList.TrailingVisual>\n                  {item.trailingInfo}\n                </ActionList.TrailingVisual>\n              </ActionList.Item>\n            ))}\n          </ActionList>\n        )}\n\n        <SelectPanel.Footer>\n          <SelectPanel.SecondaryAction\n            variant=\"link\"\n            href={`/${selectedFilter}`}\n          >\n            View all {selectedFilter}\n          </SelectPanel.SecondaryAction>\n        </SelectPanel.Footer>\n      </SelectPanel>\n    </>\n  )\n}"
+          "code": "() => {\n  const [selectedFilter, setSelectedFilter] = React.useState<\n    'branches' | 'tags'\n  >('branches')\n\n  /* Selection */\n  const [savedInitialRef, setSavedInitialRef] = React.useState(data.ref)\n  const [selectedRef, setSelectedRef] = React.useState(savedInitialRef)\n  const onSubmit = () => {\n    setSavedInitialRef(selectedRef)\n    data.ref = selectedRef // pretending to persist changes\n\n    // eslint-disable-next-line no-console\n    console.log('form submitted')\n  }\n  const onCancel = () => {\n    setSelectedRef(savedInitialRef)\n  }\n\n  /* Filter */\n  const [query, setQuery] = React.useState('')\n  const onSearchInputChange: React.ChangeEventHandler<HTMLInputElement> = (\n    event,\n  ) => {\n    const query = event.currentTarget.value\n    setQuery(query)\n  }\n  const [filteredRefs, setFilteredRefs] = React.useState(data.branches)\n  const setSearchResults = (\n    query: string,\n    selectedFilter: 'branches' | 'tags',\n  ) => {\n    if (query === '') setFilteredRefs(data[selectedFilter])\n    else {\n      setFilteredRefs(\n        data[selectedFilter]\n          .map((item) => {\n            if (item.name.toLowerCase().startsWith(query))\n              return {\n                priority: 1,\n                item,\n              }\n            else if (item.name.toLowerCase().includes(query))\n              return {\n                priority: 2,\n                item,\n              }\n            else\n              return {\n                priority: -1,\n                item,\n              }\n          })\n          .filter((result) => result.priority > 0)\n          .map((result) => result.item),\n      )\n    }\n  }\n  React.useEffect(\n    function updateSearchResults() {\n      // eslint-disable-next-line react-hooks/set-state-in-effect, react-you-might-not-need-an-effect/no-derived-state\n      setSearchResults(query, selectedFilter)\n    },\n    [query, selectedFilter],\n  )\n  const sortingFn = (ref: { id: string }) => {\n    if (ref.id === savedInitialRef) return -1\n    else return 1\n  }\n  const itemsToShow = query\n    ? filteredRefs\n    : data[selectedFilter].sort(sortingFn)\n  return (\n    <>\n      <h1>With Filter Buttons {savedInitialRef}</h1>\n\n      <SelectPanel\n        title=\"Switch branches/tags\"\n        onSubmit={onSubmit}\n        onCancel={onCancel}\n      >\n        <SelectPanel.Button\n          leadingVisual={GitBranchIcon}\n          trailingVisual={TriangleDownIcon}\n        >\n          {savedInitialRef}\n        </SelectPanel.Button>\n\n        <SelectPanel.Header>\n          <SelectPanel.SearchInput onChange={onSearchInputChange} />\n\n          <div id=\"filters\" className={classes.FilterButtons}>\n            <Button\n              variant=\"invisible\"\n              style={{\n                fontWeight:\n                  selectedFilter === 'branches'\n                    ? 'var(--base-text-weight-medium)'\n                    : 'var(--base-text-weight-normal)',\n                color: 'var(--fgColor-default)',\n              }}\n              onClick={() => setSelectedFilter('branches')}\n              count={20}\n            >\n              Branches\n            </Button>\n            <Button\n              variant=\"invisible\"\n              style={{\n                fontWeight:\n                  selectedFilter === 'tags'\n                    ? 'var(--base-text-weight-medium)'\n                    : 'var(--base-text-weight-normal)',\n                color: 'var(--fgColor-default)',\n              }}\n              onClick={() => setSelectedFilter('tags')}\n              count={8}\n            >\n              Tags\n            </Button>\n          </div>\n        </SelectPanel.Header>\n\n        {itemsToShow.length === 0 ? (\n          <SelectPanel.Message\n            variant=\"empty\"\n            title={`No labels found for \"${query}\"`}\n          >\n            Try a different search term\n          </SelectPanel.Message>\n        ) : (\n          <ActionList>\n            {itemsToShow.map((item) => (\n              <ActionList.Item\n                key={item.id}\n                selected={selectedRef === item.id}\n                onSelect={() => setSelectedRef(item.id)}\n              >\n                {item.name}\n                <ActionList.TrailingVisual>\n                  {item.trailingInfo}\n                </ActionList.TrailingVisual>\n              </ActionList.Item>\n            ))}\n          </ActionList>\n        )}\n\n        <SelectPanel.Footer>\n          <SelectPanel.SecondaryAction\n            variant=\"link\"\n            href={`/${selectedFilter}`}\n          >\n            View all {selectedFilter}\n          </SelectPanel.SecondaryAction>\n        </SelectPanel.Footer>\n      </SelectPanel>\n    </>\n  )\n}"
         }
       ],
       "importPath": "@primer/react/experimental",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.29.0-rc.ee664b93c",
+  "version": "38.29.0",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -98,7 +98,7 @@
   "devDependencies": {
     "@actions/core": "1.11.1",
     "@babel/cli": "7.28.6",
-    "@babel/core": "7.29.0",
+    "@babel/core": "7.29.6",
     "@babel/parser": "7.29.0",
     "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
     "@babel/plugin-proposal-optional-chaining": "7.21.0",
@@ -108,6 +108,7 @@
     "@figma/code-connect": "1.3.2",
     "@primer/css": "^21.5.1",
     "@primer/doc-gen": "^0.0.1",
+    "@rolldown/plugin-babel": "^0.2.3",
     "@rollup/plugin-babel": "6.1.0",
     "@rollup/plugin-commonjs": "29.0.0",
     "@rollup/plugin-json": "6.1.0",
@@ -125,6 +126,7 @@
     "@testing-library/react": "^16.3.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.2",
+    "@types/babel__core": "^7.20.5",
     "@types/lodash.groupby": "4.6.9",
     "@types/lodash.isempty": "4.4.9",
     "@types/lodash.isobject": "3.0.9",
@@ -133,7 +135,7 @@
     "@types/react": "18.3.11",
     "@types/react-dom": "18.3.1",
     "@types/react-is": "18.3.1",
-    "@vitejs/plugin-react": "^4.3.3",
+    "@vitejs/plugin-react": "^6.0.2",
     "afterframe": "^1.0.2",
     "ajv": "8.18.0",
     "axe-core": "4.9.1",

package/dist/Blankslate/Blankslate-a039d79a.css

@@ -1,2 +0,0 @@
-.prc-Blankslate-Container-Vr9Ce{container:blankslate/inline-size}.prc-Blankslate-Blankslate-Eihy3{display:grid;justify-items:center;padding:var(--blankslate-padding)}.prc-Blankslate-Blankslate-Eihy3:where([data-border]){border:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0);border-radius:var(--borderRadius-medium,.375rem)}.prc-Blankslate-Blankslate-Eihy3:where([data-narrow]){margin:0 auto;max-width:485px}.prc-Blankslate-Blankslate-Eihy3:where([data-size=medium]){--blankslate-heading-text:var(--text-title-shorthand-medium,600 1.25rem/1.625 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");--blankslate-heading-margin-block:0 var(--base-size-4,0.25rem);--blankslate-description-text:var(--text-body-shorthand-large,400 1rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");--blankslate-padding:var(--base-size-32,2rem);--blankslate-action-margin-block-end:var(--base-size-16,1rem)}.prc-Blankslate-Blankslate-Eihy3:where([data-size=medium][data-spacious]){--blankslate-padding:var(--base-size-80,5rem) var(--base-size-40,2.5rem)}.prc-Blankslate-Blankslate-Eihy3:where([data-size=small]){--blankslate-heading-text:var(--text-title-shorthand-small,600 1rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");--blankslate-heading-margin-block:0 var(--base-size-4,0.25rem);--blankslate-description-text:var(--text-body-shorthand-medium,400 0.875rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");--blankslate-padding:var(--base-size-32,2rem) var(--base-size-20,1.25rem);--blankslate-action-margin-block-end:var(--base-size-12,0.75rem);--blankslate-visual-size:var(--base-size-24,1.5rem)}.prc-Blankslate-Blankslate-Eihy3:where([data-size=small][data-spacious]){--blankslate-padding:var(--base-size-44,2.75rem) var(--base-size-28,1.75rem)}.prc-Blankslate-Blankslate-Eihy3:where([data-size=large]){--blankslate-heading-text:var(--text-title-shorthand-large,600 2rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");--blankslate-heading-margin-block:var(--base-size-8,0.5rem) var(--base-size-4,0.25rem);--blankslate-description-text:var(--text-body-shorthand-large,400 1rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");--blankslate-description-margin-block:0 var(--base-size-8,0.5rem);--blankslate-padding:var(--base-size-32,2rem);--blankslate-action-margin-block-end:var(--base-size-16,1rem)}.prc-Blankslate-Blankslate-Eihy3:where([data-size=large][data-spacious]){--blankslate-padding:var(--base-size-80,5rem) var(--base-size-40,2.5rem)}.prc-Blankslate-Description-nqiRV,.prc-Blankslate-Heading-tVZsq{margin:0;text-align:center;text-wrap:balance}.prc-Blankslate-Heading-tVZsq{font:var(--blankslate-heading-text);margin-block:var(--blankslate-heading-margin-block)}.prc-Blankslate-Description-nqiRV{font:var(--blankslate-description-text);margin-block:var(--blankslate-description-margin-block)}.prc-Blankslate-Description-nqiRV,.prc-Blankslate-Visual-10aPl{color:var(--fgColor-muted,#59636e)}.prc-Blankslate-Visual-10aPl{display:inline-flex;margin-block-end:var(--base-size-8,.5rem);max-width:var(--blankslate-visual-size)}.prc-Blankslate-Visual-10aPl svg{width:100%}.prc-Blankslate-Action-RsgHG{font:var(--blankslate-description-text);margin-block-start:var(--base-size-16,1rem)}.prc-Blankslate-Action-RsgHG:where(:last-of-type){margin-block-end:var(--blankslate-action-margin-block-end)}@container blankslate (max-width: 34rem){.prc-Blankslate-Blankslate-Eihy3{--blankslate-padding:var(--base-size-20,1.25rem)}.prc-Blankslate-Blankslate-Eihy3:where([data-spacious=true]){--blankslate-padding:var(--base-size-44,2.75rem) var(--base-size-28,1.75rem)}.prc-Blankslate-Blankslate-Eihy3{--blankslate-heading-text:var(--text-title-shorthand-small,600 1rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");--blankslate-description-text:var(--text-body-shorthand-medium,400 0.875rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji")}.prc-Blankslate-Visual-10aPl{color:var(--fgColor-muted,#59636e);margin-bottom:var(--base-size-8,.5rem);max-width:var(--base-size-24,1.5rem)}.prc-Blankslate-Action-RsgHG{margin-top:var(--base-size-8,.5rem)}.prc-Blankslate-Action-RsgHG:first-of-type{margin-top:var(--base-size-16,1rem)}.prc-Blankslate-Action-RsgHG:last-of-type{margin-bottom:calc(var(--base-size-8,.5rem)/2)}}
-/*# sourceMappingURL=Blankslate-a039d79a.css.map */

package/dist/Blankslate/Blankslate-a039d79a.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/Blankslate/Blankslate.module.css.js"],"names":[],"mappings":"AAAA,gCACE,gCACF,CAEA,iCACE,YAAa,CACb,oBAAqB,CAErB,iCAiDF,CA/CE,sDACE,gFAAgE,CAChE,gDACF,CAEA,sDAEE,aAAc,CADd,eAEF,CAEA,2DACE,sMAA6D,CAC7D,8DAAuD,CACvD,mMAA+D,CAC/D,6CAAyC,CACzC,6DACF,CAEA,0EACE,wEACF,CAEA,0DACE,gMAA4D,CAC5D,8DAAuD,CACvD,wMAAgE,CAChE,yEAA6D,CAC7D,gEAAyD,CACzD,mDACF,CAEA,yEACE,4EACF,CAEA,0DACE,gMAA4D,CAC5D,sFAAwE,CACxE,mMAA+D,CAC/D,iEAA2D,CAC3D,6CAAyC,CACzC,6DACF,CAEA,yEACE,wEACF,CAGF,gEAEE,QAAS,CACT,iBAAkB,CAClB,iBACF,CAEA,8BAEE,mCAAoC,CAEpC,mDACF,CAEA,kCAEE,uCAAwC,CAGxC,uDACF,CAEA,+DALE,kCAeF,CAVA,6BAGE,mBAAoB,CACpB,yCAAoC,CACpC,uCAKF,CAHE,iCACE,UACF,CAGF,6BAEE,uCAAwC,CACxC,2CAMF,CAJE,kDAEE,0DACF,CAIF,yCACE,iCACE,gDAQF,CANE,6DACE,4EACF,CALF,iCAOE,gMAA4D,CAC5D,wMACF,CAEA,6BAGE,kCAA2B,CAD3B,sCAAiC,CADjC,oCAGF,CAEA,6BACE,mCASF,CAPE,2CACE,mCACF,CAEA,0CACE,8CACF,CAEJ","file":"Blankslate-a039d79a.css","sourcesContent":[".Container {\n  container: blankslate / inline-size;\n}\n\n.Blankslate {\n  display: grid;\n  justify-items: center;\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--blankslate-padding);\n\n  &:where([data-border]) {\n    border: var(--borderWidth-thin) solid var(--borderColor-default);\n    border-radius: var(--borderRadius-medium);\n  }\n\n  &:where([data-narrow]) {\n    max-width: 485px;\n    margin: 0 auto;\n  }\n\n  &:where([data-size='medium']) {\n    --blankslate-heading-text: var(--text-title-shorthand-medium);\n    --blankslate-heading-margin-block: 0 var(--base-size-4);\n    --blankslate-description-text: var(--text-body-shorthand-large);\n    --blankslate-padding: var(--base-size-32);\n    --blankslate-action-margin-block-end: var(--base-size-16);\n  }\n\n  &:where([data-size='medium'][data-spacious]) {\n    --blankslate-padding: var(--base-size-80) var(--base-size-40);\n  }\n\n  &:where([data-size='small']) {\n    --blankslate-heading-text: var(--text-title-shorthand-small);\n    --blankslate-heading-margin-block: 0 var(--base-size-4);\n    --blankslate-description-text: var(--text-body-shorthand-medium);\n    --blankslate-padding: var(--base-size-32) var(--base-size-20);\n    --blankslate-action-margin-block-end: var(--base-size-12);\n    --blankslate-visual-size: var(--base-size-24);\n  }\n\n  &:where([data-size='small'][data-spacious]) {\n    --blankslate-padding: var(--base-size-44) var(--base-size-28);\n  }\n\n  &:where([data-size='large']) {\n    --blankslate-heading-text: var(--text-title-shorthand-large);\n    --blankslate-heading-margin-block: var(--base-size-8) var(--base-size-4);\n    --blankslate-description-text: var(--text-body-shorthand-large);\n    --blankslate-description-margin-block: 0 var(--base-size-8);\n    --blankslate-padding: var(--base-size-32);\n    --blankslate-action-margin-block-end: var(--base-size-16);\n  }\n\n  &:where([data-size='large'][data-spacious]) {\n    --blankslate-padding: var(--base-size-80) var(--base-size-40);\n  }\n}\n\n.Heading,\n.Description {\n  margin: 0;\n  text-align: center;\n  text-wrap: balance;\n}\n\n.Heading {\n  /* stylelint-disable-next-line primer/typography */\n  font: var(--blankslate-heading-text);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-block: var(--blankslate-heading-margin-block);\n}\n\n.Description {\n  /* stylelint-disable-next-line primer/typography */\n  font: var(--blankslate-description-text);\n  color: var(--fgColor-muted);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-block: var(--blankslate-description-margin-block);\n}\n\n.Visual {\n  color: var(--fgColor-muted);\n  /* This display property exists so that the container matches the size of the inner svg element */\n  display: inline-flex;\n  margin-block-end: var(--base-size-8);\n  max-width: var(--blankslate-visual-size);\n\n  & svg {\n    width: 100%;\n  }\n}\n\n.Action {\n  /* stylelint-disable-next-line primer/typography */\n  font: var(--blankslate-description-text);\n  margin-block-start: var(--base-size-16);\n\n  &:where(:last-of-type) {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-block-end: var(--blankslate-action-margin-block-end);\n  }\n}\n\n/* At the time these styles were written, 34rem was our \"small\" breakpoint width */\n@container blankslate (max-width: 34rem) {\n  .Blankslate {\n    --blankslate-padding: var(--base-size-20);\n\n    &:where([data-spacious='true']) {\n      --blankslate-padding: var(--base-size-44) var(--base-size-28);\n    }\n\n    --blankslate-heading-text: var(--text-title-shorthand-small);\n    --blankslate-description-text: var(--text-body-shorthand-medium);\n  }\n\n  .Visual {\n    max-width: var(--base-size-24);\n    margin-bottom: var(--base-size-8);\n    color: var(--fgColor-muted);\n  }\n\n  .Action {\n    margin-top: var(--base-size-8);\n\n    &:first-of-type {\n      margin-top: var(--base-size-16);\n    }\n\n    &:last-of-type {\n      margin-bottom: calc(var(--base-size-8) / 2);\n    }\n  }\n}\n"]}

package/dist/FilteredActionList/FilteredActionListLoaders-a46a8ea4.css

@@ -1,2 +0,0 @@
-.prc-FilteredActionList-LoadingSkeleton-VKyQq{border-radius:4px}.prc-FilteredActionList-LoadingSpinner-I3a7Y{align-content:center;flex-grow:1;height:100%;padding:var(--base-size-16,1rem);text-align:center}.prc-FilteredActionList-LoadingSkeletonContainer-FMeRG{display:flex;flex-direction:column;flex-grow:1;padding:var(--base-size-8,.5rem)}
-/*# sourceMappingURL=FilteredActionListLoaders-a46a8ea4.css.map */

package/dist/FilteredActionList/FilteredActionListLoaders-a46a8ea4.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/FilteredActionList/FilteredActionListLoaders.module.css.js"],"names":[],"mappings":"AAAA,8CAEE,iBACF,CAEA,6CAGE,oBAAqB,CADrB,WAAY,CAGZ,WAAY,CAJZ,gCAA4B,CAG5B,iBAEF,CAEA,uDAEE,YAAa,CAEb,qBAAsB,CADtB,WAAY,CAFZ,gCAIF","file":"FilteredActionListLoaders-a46a8ea4.css","sourcesContent":[".LoadingSkeleton {\n  /* stylelint-disable-next-line primer/borders */\n  border-radius: 4px;\n}\n\n.LoadingSpinner {\n  padding: var(--base-size-16);\n  flex-grow: 1;\n  align-content: center;\n  text-align: center;\n  height: 100%;\n}\n\n.LoadingSkeletonContainer {\n  padding: var(--base-size-8);\n  display: flex;\n  flex-grow: 1;\n  flex-direction: column;\n}\n"]}