Pull changes

.github/workflows/analyze.yml

@@ -7,6 +7,8 @@ on:
       - main # change this if your default branch is named differently
   workflow_dispatch:
 
+permissions: {}
+
 jobs:
   analyze:
     runs-on: ubuntu-latest
@@ -23,7 +25,7 @@ jobs:
       - name: Restore cached node_modules
         uses: actions/cache@v4
         with:
-          path: "**/node_modules"
+          path: '**/node_modules'
           key: node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
 
       - name: Install deps
@@ -55,7 +57,7 @@ jobs:
           name: bundle_analysis.json
 
       - name: Download base branch bundle stats
-        uses: dawidd6/action-download-artifact@v2
+        uses: dawidd6/action-download-artifact@268677152d06ba59fcec7a7f0b5d961b6ccd7e1e
         if: success() && github.event.number
         with:
           workflow: analyze.yml
@@ -82,6 +84,7 @@ jobs:
 
       - name: Upload analysis comment
         uses: actions/upload-artifact@v4
+        if: success() && github.event.number
         with:
           name: analysis_comment.txt
           path: .next/analyze/__bundle_analysis_comment.txt

.github/workflows/analyze_comment.yml

@@ -2,27 +2,30 @@ name: Analyze Bundle (Comment)
 
 on:
   workflow_run:
-    workflows: ["Analyze Bundle"]
+    workflows: ['Analyze Bundle']
     types:
       - completed
 
+permissions: 
+  pull-requests: write
+
 jobs:
   comment:
     runs-on: ubuntu-latest
     if: >
-      ${{ github.event.workflow_run.event == 'pull_request' &&
-      github.event.workflow_run.conclusion == 'success' }}
+      github.event.workflow_run.event == 'pull_request' &&
+      github.event.workflow_run.conclusion == 'success'
     steps:
       - name: Download base branch bundle stats
-        uses: dawidd6/action-download-artifact@v2
+        uses: dawidd6/action-download-artifact@268677152d06ba59fcec7a7f0b5d961b6ccd7e1e
         with:
           workflow: analyze.yml
           run_id: ${{ github.event.workflow_run.id }}
           name: analysis_comment.txt
           path: analysis_comment.txt
 
       - name: Download PR number
-        uses: dawidd6/action-download-artifact@v2
+        uses: dawidd6/action-download-artifact@268677152d06ba59fcec7a7f0b5d961b6ccd7e1e
         with:
           workflow: analyze.yml
           run_id: ${{ github.event.workflow_run.id }}
@@ -48,7 +51,7 @@ jobs:
           echo "pr-number=$pr_number" >> $GITHUB_OUTPUT
 
       - name: Comment
-        uses: marocchino/sticky-pull-request-comment@v2
+        uses: marocchino/sticky-pull-request-comment@52423e01640425a022ef5fd42c6fb5f633a02728
         with:
           header: next-bundle-analysis
           number: ${{ steps.get-comment-body.outputs.pr-number }}

.github/workflows/discord_notify.yml

@@ -2,14 +2,18 @@ name: Discord Notify
 
 on:
   pull_request_target:
-    types: [labeled]
+    types: [opened, ready_for_review]
+
+permissions: {}
 
 jobs:
   check_maintainer:
     uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main
+    permissions:
+      # Used by check_maintainer
+      contents: read
     with:
       actor: ${{ github.event.pull_request.user.login }}
-      is_remote: true
 
   notify:
     if: ${{ needs.check_maintainer.outputs.is_core_team == 'true' }}

.github/workflows/discord_notify_utlc.yml

@@ -0,0 +1,26 @@
+# Discord notify for a Ukrainian community--UTLC (#react-docs-alert channel)
+name: Discord Notify
+
+on:
+  pull_request_target:
+    types: [closed, opened, reopened, ready_for_review]
+
+permissions: {}
+
+jobs:
+  notify:
+    if: github.repository == 'reactjs/uk.react.dev'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Discord Webhook Action (UTLC)
+        uses: tsickert/discord-webhook@v6.0.0
+        with:
+          webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL_UTLC }}
+          embed-author-name: ${{ github.event.sender.login }}
+          embed-author-url: ${{ github.event.sender.html_url }}
+          embed-author-icon-url: ${{ github.event.sender.avatar_url }}
+          embed-title: "${{ github.event.action == 'closed' && github.event.pull_request.merged == true && 'merged' || github.event.action }} #${{ github.event.number }}: ${{ github.event.pull_request.title }}"
+          embed-description: ${{ github.event.pull_request.body }}
+          embed-url: ${{ github.event.pull_request.html_url }}
+          embed-footer-text: >
+            diff: +${{github.event.pull_request.additions}} -${{github.event.pull_request.deletions}}

.github/workflows/label_core_team_prs.yml

@@ -3,6 +3,8 @@ name: Label Core Team PRs
 on:
   pull_request_target:
 
+permissions: {}
+
 env:
   TZ: /usr/share/zoneinfo/America/Los_Angeles
   # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout
@@ -11,14 +13,21 @@ env:
 jobs:
   check_maintainer:
     uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main
+    permissions:
+      # Used by check_maintainer
+      contents: read
     with:
       actor: ${{ github.event.pull_request.user.login }}
-      is_remote: true
 
   label:
     if: ${{ needs.check_maintainer.outputs.is_core_team == 'true' }}
     runs-on: ubuntu-latest
     needs: check_maintainer
+    permissions:
+      # Used to add labels on issues
+      issues: write
+      # Used to add labels on PRs
+      pull-requests: write
     steps:
       - name: Label PR as React Core Team
         uses: actions/github-script@v7

.github/workflows/site_lint.yml

@@ -7,6 +7,8 @@ on:
   pull_request:
     types: [opened, synchronize, reopened]
 
+permissions: {}
+
 jobs:
   lint:
     runs-on: ubuntu-latest
@@ -25,7 +27,7 @@ jobs:
       - name: Restore cached node_modules
         uses: actions/cache@v4
         with:
-          path: "**/node_modules"
+          path: '**/node_modules'
           key: node_modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
 
       - name: Install deps

TRANSLATION.md

@@ -74,12 +74,23 @@
 | Орудний | _пропом_ | _пропсами_ |
 | Місцевий | _пропі_ | _пропсах_ |
 
+Бандл
+
+| Відмінок | Однина | Множина |
+| -------- | ------ | ------- |
+| Називний | _бандл_ | _бандли_ |
+| Родовий | _бандла_ | _бандлів_ |
+| Давальний | _бандлу_ | _бандлам_ |
+| Знахідний | _бандл_ | _бандли_ |
+| Орудний | _бандлом_ | _бандлами_ |
+| Місцевий | _бандлі_ | _бандлах_ |
+
 Бандлер
 
 | Відмінок | Однина | Множина |
 | -------- | ------ | ------- |
 | Називний | _бандлер_ | _бандлери_ |
-| Родовий | _бандлеру_ | _бандлерів_ |
+| Родовий | _бандлера_ | _бандлерів_ |
 | Давальний | _бандлеру_ | _бандлерам_ |
 | Знахідний | _бандлер_ | _бандлери_ |
 | Орудний | _бандлером_ | _бандлерами_ |
@@ -100,15 +111,19 @@
 
 | Оригінал | Переклад |
 | ------------------ | ---------- |
-| API reference | API довідник |
+| API reference | Довідник API |
 | app | застосунок |
 | array | масив |
 | arrow function | стрілкова функція |
 | attribute | атрибут |
 | batch | група оновлень |
 | batching | групування |
 | browser | браузер |
+| build | збірка (результат); збирання (процес створення збірки); збирати (пакет, збірку); будувати, створити (компонент, архітектуру) |
+| build tool | інструмент збирання |
+| build tooling | інструменти збирання |
 | bug | помилка, дефект |
+| bundle | бандл; запаковувати |
 | bundler | бандлер |
 | callback | функція зворотного виклику |
 | camelCase | *camelCase* |
@@ -125,7 +140,7 @@
 | development | розробка |
 | development mode | режим розробки |
 | developer tools | інструменти розробника |
-| React developer tools | інструменти React розробника |
+| React developer tools | інструменти розробника React |
 | DOM container | DOM-контейнер |
 | effect | ефект |
 | encapsulation | інкапсуляція |
@@ -135,7 +150,7 @@
 | error log | лог помилок |
 | event handler | обробник події |
 | fallback | запасний |
-| feature | особливість |
+| feature | функція; особливість |
 | framework | фреймворк |
 | function component | функційний компонент |
 | helper | допоміжний(а); *helper function — допоміжна функція* |
@@ -160,12 +175,15 @@
 | Note | Примітка |
 | online | онлайн |
 | online playground | онлайн пісочниця |
+| overview | огляд; вступ (тільки як вступна частина розділів та сторінок)|
 | package manager | менеджер пакетів |
+| package registry | реєстр пакетів |
 | paint | фарбування, перефарбування |
+| performance | продуктивність (TODO: розглянути "швидкодію") |
 | prop | проп |
 | props | пропси |
-| production | продакшн |
-| production mode | продакшн-режим |
+| production | публічне середовище; впровадження |
+| production mode | (у режимі) публічного середовища; режим публічного впровадження |
 | reducer | редюсер |
 | reuse | повторне використання, перевикористання |
 | React | React |

postcss.config.js

@@ -17,4 +17,4 @@ module.exports = {
       },
     },
   },
-}
+};

public/js/jsfiddle-integration-babel.js

@@ -4,12 +4,14 @@
 
 // Do not delete or move this file.
 // Many fiddles reference it so we have to keep it here.
-(function() {
+(function () {
   var tag = document.querySelector(
     'script[type="application/javascript;version=1.7"]'
   );
   if (!tag || tag.textContent.indexOf('window.onload=function(){') !== -1) {
-    alert('Bad JSFiddle configuration, please fork the original React JSFiddle');
+    alert(
+      'Bad JSFiddle configuration, please fork the original React JSFiddle'
+    );
   }
   tag.setAttribute('type', 'text/babel');
   tag.textContent = tag.textContent.replace(/^\/\/<!\[CDATA\[/, '');

public/js/jsfiddle-integration.js

@@ -4,12 +4,14 @@
 
 // Do not delete or move this file.
 // Many fiddles reference it so we have to keep it here.
-(function() {
+(function () {
   var tag = document.querySelector(
     'script[type="application/javascript;version=1.7"]'
   );
   if (!tag || tag.textContent.indexOf('window.onload=function(){') !== -1) {
-    alert('Bad JSFiddle configuration, please fork the original React JSFiddle');
+    alert(
+      'Bad JSFiddle configuration, please fork the original React JSFiddle'
+    );
   }
   tag.setAttribute('type', 'text/jsx;harmony=true');
   tag.textContent = tag.textContent.replace(/^\/\/<!\[CDATA\[/, '');

scripts/headingIDHelpers/walk.js

@@ -2,10 +2,10 @@ const fs = require('fs');
 
 module.exports = function walk(dir) {
   let results = [];
-  /** 
+  /**
    * If the param is a directory we can return the file
    */
-  if(dir.includes('md')){
+  if (dir.includes('md')) {
     return [dir];
   }
   const list = fs.readdirSync(dir);

scripts/headingIdLinter.js

@@ -1,12 +1,12 @@
 const validateHeaderIds = require('./headingIDHelpers/validateHeadingIDs');
 const generateHeadingIds = require('./headingIDHelpers/generateHeadingIDs');
 
-/** 
+/**
  * yarn lint-heading-ids --> Checks all files and causes an error if heading ID is missing
  * yarn lint-heading-ids --fix --> Fixes all markdown file's heading IDs
  * yarn lint-heading-ids path/to/markdown.md --> Checks that particular file for missing heading ID (path can denote a directory or particular file)
  * yarn lint-heading-ids --fix path/to/markdown.md --> Fixes that particular file's markdown IDs (path can denote a directory or particular file)
-*/
+ */
 
 const markdownPaths = process.argv.slice(2);
 if (markdownPaths.includes('--fix')) {

src/components/DocsFooter.tsx

@@ -80,7 +80,7 @@ function FooterLink({
       />
       <div className="flex flex-col overflow-hidden">
         <span className="text-sm font-bold tracking-wide no-underline uppercase text-secondary dark:text-secondary-dark group-focus:text-link dark:group-focus:text-link-dark group-focus:text-opacity-100">
-          {type}
+          {type === 'Previous' ? 'Попередня' : 'Наступна'}
         </span>
         <span className="text-lg break-words group-hover:underline">
           {title}

src/components/Icon/IconExperimental.tsx

@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+
+export const IconExperimental = memo<
+  JSX.IntrinsicElements['svg'] & {title?: string; size?: 's' | 'md'}
+>(function IconCanary(
+  {className, title, size} = {
+    className: undefined,
+    title: undefined,
+    size: 'md',
+  }
+) {
+  return (
+    <svg
+      className={className}
+      width={size === 's' ? '12px' : '20px'}
+      height={size === 's' ? '12px' : '20px'}
+      viewBox="0 0 20 20"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg">
+      {title && <title>{title}</title>}
+      <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <g
+          id="noun-labs-1201738-(2)"
+          transform="translate(2, 0)"
+          fill="currentColor"
+          fillRule="nonzero">
+          <path
+            d="M10.2865804,5.55665262 L10.2865804,2.22331605 L10.8591544,2.22331605 C11.0103911,2.22244799 11.1551447,2.16342155 11.2617505,2.05914367 C11.3684534,1.95486857 11.4282767,1.81370176 11.4282767,1.66667106 L11.4282767,0.556642208 C11.4282767,0.40907262 11.3678934,0.26747526 11.2605218,0.16308627 C11.1531503,0.0587028348 11.0074938,0 10.8556998,0 L5.14338868,0 C4.9915947,0 4.84594391,0.0587028348 4.73856664,0.16308627 C4.63119507,0.267469704 4.57081178,0.40907262 4.57081178,0.556642208 L4.57081178,1.66667106 C4.57081178,1.81434899 4.63119507,1.95594912 4.73856664,2.06033811 C4.8459382,2.16472155 4.9915947,2.22331605 5.14338868,2.22331605 L5.71596273,2.22331605 L5.71596273,5.55665262 C5.71596273,8.38665538 2.97295619,9.88999017 0.651686904,15.5566623 C-0.0957823782,17.360053 -2.00560068,20 7.99951567,20 C18.004632,20 16.0948137,17.3600252 15.3507732,15.5566623 C13.0124432,9.88999017 10.2865804,8.38665538 10.2865804,5.55665262 Z M9.89570197,10.709991 C10.0921412,10.709991 10.2805515,10.7858383 10.4193876,10.9209301 C10.5583466,11.0559135 10.6363652,11.2390693 10.6363652,11.4300417 C10.6363652,11.6210141 10.5583466,11.8040698 10.4193876,11.9391533 C10.2805401,12.0741367 10.0921412,12.1499813 9.89570197,12.1499813 C9.6992627,12.1499813 9.51096673,12.074134 9.37201631,11.9391533 C9.23316875,11.8040615 9.15515307,11.6210141 9.15515307,11.4300417 C9.15515307,11.2390693 9.2331716,11.0559024 9.37201631,10.9209301 C9.57264221,10.7258996 9.61239426,10.709991 9.89570197,10.709991 Z M8.98919546,9.04212824 C9.09790709,9.14792278 9.15884755,9.29158681 9.1585213,9.44110085 C9.15829001,9.59073155 9.09678989,9.73407335 8.98763252,9.83954568 C8.87847514,9.945018 8.73069852,10.0039347 8.57678157,10.0033977 C8.42286747,10.0027392 8.27565088,9.94273467 8.16727355,9.83639845 C8.05900765,9.73006224 7.99873866,9.58628988 7.99963013,9.43664806 C8.00052304,9.28788403 8.0620221,9.14542556 8.17051087,9.04048101 C8.27911107,8.93555591 8.42599335,8.87663641 8.57913312,8.87663641 C8.73291864,8.87665585 8.88047525,8.93622535 8.98919546,9.04212824 Z M7.99965585,17.9999981 C4.91377349,17.9999981 3.29882839,17.7332867 2.51364277,17.4999976 C2.37780966,17.4476975 2.26954376,17.3439641 2.21396931,17.2125528 C2.15838628,17.0811499 2.16006066,16.9334692 2.21876871,16.8033858 C2.6144474,15.5921346 3.14916224,14.4280501 3.81316983,13.3333824 C5.980145,9.82337899 8.22941036,13.8867718 10.0980836,13.8867718 C11.9666996,13.8867718 11.4695868,12.1534924 12.1827971,13.3333824 C12.8511505,14.4269112 13.3916656,15.5896902 13.794259,16.8000524 C13.8533022,16.9322137 13.8537479,17.0822749 13.7952635,17.2147751 C13.7368889,17.3472613 13.6248314,17.4504531 13.4856467,17.5000531 C12.6833967,17.7332867 11.0855382,17.9999981 7.99965585,17.9999981 Z"
+            id="Shape"></path>
+        </g>
+      </g>
+    </svg>
+  );
+});

src/components/Layout/Feedback.tsx

@@ -67,11 +67,11 @@ function SendFeedback({onSubmit}: {onSubmit: () => void}) {
         {exit: isSubmitted}
       )}>
       <p className="w-full text-lg font-bold text-primary dark:text-primary-dark me-4">
-        {isSubmitted ? 'Thank you for your feedback!' : 'Is this page useful?'}
+        {isSubmitted ? 'Дякуємо за відгук!' : 'Ця сторінка корисна?'}
       </p>
       {!isSubmitted && (
         <button
-          aria-label="Yes"
+          aria-label="Так"
           className="px-3 rounded-lg bg-secondary-button dark:bg-secondary-button-dark text-primary dark:text-primary-dark me-2"
           onClick={() => {
             setIsSubmitted(true);
@@ -83,7 +83,7 @@ function SendFeedback({onSubmit}: {onSubmit: () => void}) {
       )}
       {!isSubmitted && (
         <button
-          aria-label="No"
+          aria-label="Ні"
           className="px-3 rounded-lg bg-secondary-button dark:bg-secondary-button-dark text-primary dark:text-primary-dark"
           onClick={() => {
             setIsSubmitted(true);