1mpacto-react-ui 1.0.1 → 2.0.1

package/dist/src/interfaces/components/Breadcrumbs/index.d.ts

@@ -1,7 +1,6 @@
 import { ReactNode, ElementType, HTMLAttributes } from 'react';
 import { IGap } from '../../../config/components/gap';
 import { TFont } from '../../../config/components/font';
-
 /**
  * [ID] : Interface untuk komponen Breadcrumbs.
  * [EN] : Interface for Breadcrumbs component.

package/dist/src/interfaces/components/Button/index.d.ts

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-
 /**
  * [ID] : Tipe varian tombol yang tersedia.
  * [EN] : Available button variant types.

package/dist/src/interfaces/components/ButtonIcon/index.d.ts

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-
 /**
  * [ID] : Tipe varian tombol ikon.
  * [EN] : Button icon variant types.

package/dist/src/interfaces/components/ButtonPopover/index.d.ts

@@ -1,7 +1,6 @@
 import { OffsetOptions, UseFloatingOptions } from '@floating-ui/react';
 import { IPopover } from '../Popover';
 import { IButton } from '../Button';
-
 /**
  * [ID] : Interface untuk komponen ButtonPopover.
  * [EN] : Interface for ButtonPopover component.

package/dist/src/interfaces/components/Calendar/index.d.ts

@@ -2,7 +2,6 @@ import { CalendarDate } from '@internationalized/date';
 import { ReactNode } from 'react';
 import { AriaButtonOptions, DateValue, RangeCalendarProps } from 'react-aria';
 import { CalendarState, CalendarStateOptions, DateRangePickerStateOptions, RangeCalendarState } from 'react-stately';
-
 /**
  * [ID] : Tipe kalender (tanggal, bulan, tahun).
  * [EN] : Calendar type (date, month, year).

package/dist/src/interfaces/components/Chart/index.d.ts

@@ -1,6 +1,5 @@
 import { ChartArea, ChartData, ChartDataset, ChartOptions, CoreScaleOptions, Scale, TooltipItem } from 'chart.js';
 import { default as React } from 'react';
-
 /**
  * [ID] : Opsi untuk grafik donat.
  * [EN] : Options for doughnut chart.

package/dist/src/interfaces/components/Checkbox/index.d.ts

@@ -1,5 +1,4 @@
 import { default as React } from 'react';
-
 /**
  * [ID] : Interface untuk komponen CheckboxTable.
  * [EN] : Interface for CheckboxTable component.

package/dist/src/interfaces/components/Chips/index.d.ts

@@ -1,7 +1,6 @@
 import { ReactNode } from 'react';
 import { Itypography } from '../../../config/components/typography';
 import { TFont } from '../../../config/components/font';
-
 /**
  * [ID] : Interface untuk komponen Chips.
  * [EN] : Interface for Chips component.

package/dist/src/interfaces/components/Collapse/index.d.ts

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-
 /**
  * [ID] : Interface untuk komponen Collapse.
  * [EN] : Interface for Collapse component.

package/dist/src/interfaces/components/DatePicker/index.d.ts

@@ -1,7 +1,6 @@
 import { ReactNode } from 'react';
 import { ICalendarButtonConfirm, ICalendarPrevNextIcon, IDateRange, TDateType } from '../Calendar';
 import { OffsetOptions, UseFloatingOptions } from '@floating-ui/react';
-
 /**
  * [ID] : Interface untuk komponen DatePicker tunggal.
  * [EN] : Interface for single DatePicker component.

package/dist/src/interfaces/components/FilterContainer/index.d.ts

@@ -1,5 +1,4 @@
 import { default as React } from 'react';
-
 /**
  * [ID] : Interface untuk properti anak FilterContainer.
  * [EN] : Interface for FilterContainer child properties.

package/dist/src/interfaces/components/Input/index.d.ts

@@ -1,5 +1,4 @@
 import { InputHTMLAttributes, ReactNode } from 'react';
-
 /**
  * [ID] : Interface untuk input dengan label mengambang di dalam.
  * [EN] : Interface for input with floating inner label.

package/dist/src/interfaces/components/Modal/index.d.ts

@@ -1,5 +1,4 @@
 import { ReactNode, ElementType } from 'react';
-
 /**
  * [ID] : Interface untuk komponen ModalDialog.
  * [EN] : Interface for ModalDialog component.

package/dist/src/interfaces/components/NumberFormat/index.d.ts

@@ -1,5 +1,4 @@
 import { NumericFormatProps } from 'react-number-format';
-
 /**
  * [ID] : Interface untuk komponen NumberFormat.
  * [EN] : Interface for NumberFormat component.

package/dist/src/interfaces/components/Pagination/index.d.ts

@@ -1,7 +1,6 @@
 import { OffsetOptions } from '@floating-ui/react';
 import { ReactNode } from 'react';
 import { TKeyLocale } from '../Calendar';
-
 /**
  * [ID] : Tipe jenis pagination.
  * [EN] : Pagination kind type.

package/dist/src/interfaces/components/Popover/index.d.ts

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
 import { FlipOptions, AutoPlacementOptions, UseFloatingOptions, OffsetOptions, FloatingArrowProps, FloatingFocusManagerProps, UseDismissProps } from '@floating-ui/react';
-
 /**
  * [ID] : Interface untuk komponen Popover.
  * [EN] : Interface for Popover component.

package/dist/src/interfaces/components/RadioCheckbox/RadioCheckbox.d.ts

@@ -2,7 +2,6 @@ import { InputHTMLAttributes, ReactNode } from 'react';
 import { IBorderRadius } from '../../../config/components/borderRadius';
 import { Itypography } from '../../../config/components/typography';
 import { TFont } from '../../../config/components/font';
-
 /**
  * [ID] : Interface untuk komponen RadioCheckbox.
  * [EN] : Interface for RadioCheckbox component.

package/dist/src/interfaces/components/RadioCheckbox/RadioCheckboxLabel.d.ts

@@ -3,7 +3,6 @@ import { Itypography } from '../../../config/components/typography';
 import { IRadioCheckbox } from './RadioCheckbox';
 import { IBorderRadius } from '../../../config/components/borderRadius';
 import { TFont } from '../../../config/components/font';
-
 /**
  * [ID] : Interface untuk komponen RadioCheckboxLabel.
  * [EN] : Interface for RadioCheckboxLabel component.

package/dist/src/interfaces/components/SelectDropdownContainer/index.d.ts

@@ -1,7 +1,6 @@
 import { default as React } from 'react';
 import { Props as SelectProps, ActionMeta, GroupBase, SelectComponentsConfig, MultiValue, SingleValue } from 'react-select';
 import { AutoPlacementOptions, FlipOptions, OffsetOptions, UseFloatingOptions } from '@floating-ui/react';
-
 /**
  * [ID] : Interface untuk komponen SelectDropdownContainer.
  * [EN] : Interface for SelectDropdownContainer component.

package/dist/src/interfaces/components/Sidebar/index.d.ts

@@ -1,5 +1,4 @@
 import { default as React } from 'react';
-
 /**
  * [ID] : Tipe varian sidebar.
  * [EN] : Sidebar variant type.

package/dist/src/interfaces/components/Step/index.d.ts

@@ -1,5 +1,4 @@
 import { default as React } from 'react';
-
 /**
  * [ID] : Interface untuk data daftar langkah.
  * [EN] : Interface for step list data.

package/dist/src/interfaces/components/Table/index.d.ts

@@ -1,7 +1,6 @@
-import { Table as ITableTanstack, Row, ColumnDef } from '@tanstack/react-table';
+import { Table as ITableTanstack, Row, ColumnDef, Header } from '@tanstack/react-table';
 import { default as React } from 'react';
 import { ITableVirtualization, IWrapperProps } from '../Virtualization/TableVirtualization';
-
 /**
  * [ID] : Definisi kolom tabel.
  * [EN] : Table column definition.
@@ -113,6 +112,13 @@ export interface ITable<T = unknown> {
      * [EN] : Header ID (optional).
      */
     headerId?: string;
+    /**
+     * [ID] : Fungsi ID header.
+     * [EN] : Header ID function.
+     * @param head - [ID] : Objek header. [EN] : Header object.
+     * @returns [ID] : ID header. [EN] : Header ID.
+     */
+    theadTrId?: (head: Header<T, unknown>) => string | undefined;
     /**
      * [ID] : Fungsi ID baris body (opsional).
      * [EN] : Body row ID function (optional).
@@ -210,6 +216,13 @@ export interface INonVirtualization<T = unknown> {
      * [EN] : Header ID (optional).
      */
     headerId?: string;
+    /**
+     * [ID] : Fungsi ID header.
+     * [EN] : Header ID function.
+     * @param head - [ID] : Objek header. [EN] : Header object.
+     * @returns [ID] : ID header. [EN] : Header ID.
+     */
+    theadTrId: (head: Header<T, unknown>) => string | undefined;
     /**
      * [ID] : Fungsi ID baris body.
      * [EN] : Body row ID function.
@@ -325,6 +338,13 @@ export interface IVirtualization<T = unknown> {
      * [EN] : Header ID (optional).
      */
     headerId?: string;
+    /**
+     * [ID] : Fungsi ID header.
+     * [EN] : Header ID function.
+     * @param head - [ID] : Objek header. [EN] : Header object.
+     * @returns [ID] : ID header. [EN] : Header ID.
+     */
+    theadTrId: (head: Header<T, unknown>) => string | undefined;
     /**
      * [ID] : Fungsi ID baris body.
      * [EN] : Body row ID function.

package/dist/src/interfaces/components/Tabs/index.d.ts

@@ -1,6 +1,5 @@
 import { IBorderRadius } from '../../../config/components/borderRadius';
 import { TKeyLocale } from '../Calendar';
-
 /**
  * [ID] : Tipe varian tab.
  * [EN] : Tab variant type.

package/dist/src/interfaces/components/TextEditor/index.d.ts

@@ -1,5 +1,4 @@
 import { IAllProps } from '@tinymce/tinymce-react';
-
 /**
  * [ID] : Interface untuk komponen TextEditor.
  * [EN] : Interface for TextEditor component.

package/dist/src/interfaces/components/Textarea/index.d.ts

@@ -1,5 +1,4 @@
 import { default as React } from 'react';
-
 /**
  * [ID] : Interface untuk komponen Textarea.
  * [EN] : Interface for Textarea component.

package/dist/src/interfaces/components/TimeRange/index.d.ts

@@ -1,7 +1,6 @@
 import { UseFloatingOptions } from '@floating-ui/react';
 import { ReactNode } from 'react';
 import { TKeyLocale } from '../Calendar';
-
 /**
  * [ID] : Tipe nilai rentang waktu.
  * [EN] : Time range value type.

package/dist/src/interfaces/components/Timeline/index.d.ts

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-
 /**
  * [ID] : Interface untuk layout timeline.
  * [EN] : Interface for timeline layout.

package/dist/src/interfaces/components/Tooltip/index.d.ts

@@ -2,7 +2,6 @@ import { FloatingArrowProps, UseFloatingOptions } from '@floating-ui/react';
 import { default as React } from 'react';
 import { IColor } from '../../../config/tailwind/colors';
 import { IPopover } from '../Popover';
-
 /**
  * [ID] : Interface untuk komponen Tooltip.
  * [EN] : Interface for Tooltip component.

package/dist/src/interfaces/components/UploadFile/index.d.ts

@@ -1,7 +1,6 @@
 import { default as React } from 'react';
 import { IInputReguler } from '../Input';
 import { IButton } from '../Button';
-
 /**
  * [ID] : Interface untuk komponen UploadFile.
  * [EN] : Interface for UploadFile component.

package/dist/src/interfaces/components/Virtualization/ListVirtualization.d.ts

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
 import { Components } from 'react-virtuoso';
-
 /**
  * [ID] : Interface untuk gaya tinggi.
  * [EN] : Interface for height style.

package/dist/src/interfaces/components/Virtualization/TableVirtualization.d.ts

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
 import { TableComponents } from 'react-virtuoso';
-
 /**
  * [ID] : Interface untuk gaya tinggi.
  * [EN] : Interface for height style.

package/dist/src/main.d.ts

@@ -1 +0,0 @@
-

package/dist/src/utils/common.d.ts

@@ -1,7 +1,6 @@
 import { TDateType, TKeyLocale } from '../interfaces/components/Calendar';
 import { IMergeState } from '../interfaces/components/FilterContainer';
 import { TBigNumber, TypeBigNumber } from '../config/bigNumber';
-
 export declare const isAccurateBigNumber: (value: unknown) => boolean;
 export declare const isAccurateNumber: (value: unknown) => boolean;
 export declare function parseBigDecimal<T extends {

package/dist/tinymce/js/tinymce/langs/README.md

@@ -1,3 +1,3 @@
-This is where language files should be placed.
-
-Please DO NOT translate these directly, use this service instead: https://crowdin.com/project/tinymce
+This is where language files should be placed.
+
+Please DO NOT translate these directly, use this service instead: https://crowdin.com/project/tinymce

package/dist/tinymce/js/tinymce/license.md

@@ -1,6 +1,6 @@
-# Software License Agreement
-
-**TinyMCE** – [<https://github.com/tinymce/tinymce>](https://github.com/tinymce/tinymce)
-Copyright (c) 2024, Ephox Corporation DBA Tiny Technologies, Inc.
-
-Licensed under the terms of [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html).
+# Software License Agreement
+
+**TinyMCE** – [<https://github.com/tinymce/tinymce>](https://github.com/tinymce/tinymce)
+Copyright (c) 2024, Ephox Corporation DBA Tiny Technologies, Inc.
+
+Licensed under the terms of [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html).

package/dist/tinymce/js/tinymce/plugins/help/js/i18n/keynav/ar.js

@@ -1,93 +1,93 @@
-tinymce.Resource.add('tinymce.html-i18n.help-keynav.ar',
-'<h1>بدء التنقل بواسطة لوحة المفاتيح</h1>\n' +
-  '\n' +
-  '<dl>\n' +
-  '  <dt>التركيز على شريط القوائم</dt>\n' +
-  '  <dd>نظاما التشغيل Windows أو Linux: Alt + F9</dd>\n' +
-  '  <dd>نظام التشغيل macOS: &#x2325;F9</dd>\n' +
-  '  <dt>التركيز على شريط الأدوات</dt>\n' +
-  '  <dd>نظاما التشغيل Windows أو Linux: Alt + F10</dd>\n' +
-  '  <dd>نظام التشغيل macOS: &#x2325;F10</dd>\n' +
-  '  <dt>التركيز على التذييل</dt>\n' +
-  '  <dd>نظاما التشغيل Windows أو Linux: Alt + F11</dd>\n' +
-  '  <dd>نظام التشغيل macOS: &#x2325;F11</dd>\n' +
-  '  <dt>تركيز الإشعارات</dt>\n' +
-  '  <dd>نظاما التشغيل Windows أو Linux: Alt + F12</dd>\n' +
-  '  <dd>نظام التشغيل macOS: &#x2325;F12</dd>\n' +
-  '  <dt>التركيز على شريط أدوات السياق</dt>\n' +
-  '  <dd>أنظمة التشغيل Windows أو Linux أو macOS: Ctrl+F9</dd>\n' +
-  '</dl>\n' +
-  '\n' +
-  '<p>سيبدأ التنقل عند عنصر واجهة المستخدم الأول، والذي سيتم تمييزه أو تسطيره في حالة العنصر الأول في\n' +
-  '  مسار عنصر التذييل.</p>\n' +
-  '\n' +
-  '<h1>التنقل بين أقسام واجهة المستخدم</h1>\n' +
-  '\n' +
-  '<p>للانتقال من أحد أقسام واجهة المستخدم إلى القسم التالي، اضغط على <strong>Tab</strong>.</p>\n' +
-  '\n' +
-  '<p>للانتقال من أحد أقسام واجهة المستخدم إلى القسم السابق، اضغط على <strong>Shift+Tab</strong>.</p>\n' +
-  '\n' +
-  '<p>ترتيب علامات <strong>Tab</strong> لأقسام واجهة المستخدم هذه هو:</p>\n' +
-  '\n' +
-  '<ol>\n' +
-  '  <li>شريط القوائم</li>\n' +
-  '  <li>كل مجموعة شريط الأدوات</li>\n' +
-  '  <li>الشريط الجانبي</li>\n' +
-  '  <li>مسار العنصر في التذييل</li>\n' +
-  '  <li>زر تبديل عدد الكلمات في التذييل</li>\n' +
-  '  <li>رابط إدراج العلامة التجارية في التذييل</li>\n' +
-  '  <li>مؤشر تغيير حجم المحرر في التذييل</li>\n' +
-  '</ol>\n' +
-  '\n' +
-  '<p>إذا لم يكن قسم واجهة المستخدم موجودًا، فسيتم تخطيه.</p>\n' +
-  '\n' +
-  '<p>إذا كان التذييل يحتوي على التركيز على ‏‫التنقل بواسطة لوحة المفاتيح، ولا يوجد شريط جانبي مرئي، فإن الضغط على <strong>Shift+Tab</strong>\n' +
-  '  ينقل التركيز إلى مجموعة شريط الأدوات الأولى، وليس الأخيرة.</p>\n' +
-  '\n' +
-  '<h1>التنقل بين أقسام واجهة المستخدم</h1>\n' +
-  '\n' +
-  '<p>للانتقال من أحد عناصر واجهة المستخدم إلى العنصر التالي، اضغط على مفتاح <strong>السهم</strong> المناسب.</p>\n' +
-  '\n' +
-  '<p>مفتاحا السهمين <strong>اليسار‎</strong> و<strong>اليمين‎</strong></p>\n' +
-  '\n' +
-  '<ul>\n' +
-  '  <li>التنقل بين القوائم في شريط القوائم.</li>\n' +
-  '  <li>فتح قائمة فرعية في القائمة.</li>\n' +
-  '  <li>التنقل بين الأزرار في مجموعة شريط الأدوات.</li>\n' +
-  '  <li>التنقل بين العناصر في مسار عنصر التذييل.</li>\n' +
-  '</ul>\n' +
-  '\n' +
-  '<p>مفتاحا السهمين <strong>لأسفل‎</strong> و<strong>لأعلى‎</strong></p>\n' +
-  '\n' +
-  '<ul>\n' +
-  '  <li>التنقل بين عناصر القائمة في القائمة.</li>\n' +
-  '  <li>التنقل بين العناصر في قائمة شريط الأدوات المنبثقة.</li>\n' +
-  '</ul>\n' +
-  '\n' +
-  '<p>دورة مفاتيح <strong>الأسهم‎</strong> داخل قسم واجهة المستخدم التي تم التركيز عليها.</p>\n' +
-  '\n' +
-  '<p>لإغلاق قائمة مفتوحة أو قائمة فرعية مفتوحة أو قائمة منبثقة مفتوحة، اضغط على مفتاح <strong>Esc</strong>.</p>\n' +
-  '\n' +
-  '<p>إذا كان التركيز الحالي على "الجزء العلوي" من قسم معين لواجهة المستخدم، فإن الضغط على مفتاح <strong>Esc</strong> يؤدي أيضًا إلى الخروج\n' +
-  '  من التنقل بواسطة لوحة المفاتيح بالكامل.</p>\n' +
-  '\n' +
-  '<h1>تنفيذ عنصر قائمة أو زر شريط أدوات</h1>\n' +
-  '\n' +
-  '<p>عندما يتم تمييز عنصر القائمة المطلوب أو زر شريط الأدوات، اضغط على زر <strong>Return</strong>، أو <strong>Enter</strong>،\n' +
-  '  أو <strong>مفتاح المسافة</strong> لتنفيذ العنصر.</p>\n' +
-  '\n' +
-  '<h1>التنقل في مربعات الحوار غير المبوبة</h1>\n' +
-  '\n' +
-  '<p>في مربعات الحوار غير المبوبة، يتم التركيز على المكون التفاعلي الأول عند فتح مربع الحوار.</p>\n' +
-  '\n' +
-  '<p>التنقل بين مكونات الحوار التفاعلي بالضغط على زر <strong>Tab</strong> أو <strong>Shift+Tab</strong>.</p>\n' +
-  '\n' +
-  '<h1>التنقل في مربعات الحوار المبوبة</h1>\n' +
-  '\n' +
-  '<p>في مربعات الحوار المبوبة، يتم التركيز على الزر الأول في قائمة علامات التبويب عند فتح مربع الحوار.</p>\n' +
-  '\n' +
-  '<p>التنقل بين المكونات التفاعلية لعلامة التبويب لمربع الحوار هذه بالضغط على زر <strong>Tab</strong> أو\n' +
-  '  <strong>Shift+Tab</strong>.</p>\n' +
-  '\n' +
-  '<p>التبديل إلى علامة تبويب أخرى لمربع الحوار من خلال التركيز على قائمة علامة التبويب ثم الضغط على زر <strong>السهم</strong> المناسب\n' +
+tinymce.Resource.add('tinymce.html-i18n.help-keynav.ar',
+'<h1>بدء التنقل بواسطة لوحة المفاتيح</h1>\n' +
+  '\n' +
+  '<dl>\n' +
+  '  <dt>التركيز على شريط القوائم</dt>\n' +
+  '  <dd>نظاما التشغيل Windows أو Linux: Alt + F9</dd>\n' +
+  '  <dd>نظام التشغيل macOS: &#x2325;F9</dd>\n' +
+  '  <dt>التركيز على شريط الأدوات</dt>\n' +
+  '  <dd>نظاما التشغيل Windows أو Linux: Alt + F10</dd>\n' +
+  '  <dd>نظام التشغيل macOS: &#x2325;F10</dd>\n' +
+  '  <dt>التركيز على التذييل</dt>\n' +
+  '  <dd>نظاما التشغيل Windows أو Linux: Alt + F11</dd>\n' +
+  '  <dd>نظام التشغيل macOS: &#x2325;F11</dd>\n' +
+  '  <dt>تركيز الإشعارات</dt>\n' +
+  '  <dd>نظاما التشغيل Windows أو Linux: Alt + F12</dd>\n' +
+  '  <dd>نظام التشغيل macOS: &#x2325;F12</dd>\n' +
+  '  <dt>التركيز على شريط أدوات السياق</dt>\n' +
+  '  <dd>أنظمة التشغيل Windows أو Linux أو macOS: Ctrl+F9</dd>\n' +
+  '</dl>\n' +
+  '\n' +
+  '<p>سيبدأ التنقل عند عنصر واجهة المستخدم الأول، والذي سيتم تمييزه أو تسطيره في حالة العنصر الأول في\n' +
+  '  مسار عنصر التذييل.</p>\n' +
+  '\n' +
+  '<h1>التنقل بين أقسام واجهة المستخدم</h1>\n' +
+  '\n' +
+  '<p>للانتقال من أحد أقسام واجهة المستخدم إلى القسم التالي، اضغط على <strong>Tab</strong>.</p>\n' +
+  '\n' +
+  '<p>للانتقال من أحد أقسام واجهة المستخدم إلى القسم السابق، اضغط على <strong>Shift+Tab</strong>.</p>\n' +
+  '\n' +
+  '<p>ترتيب علامات <strong>Tab</strong> لأقسام واجهة المستخدم هذه هو:</p>\n' +
+  '\n' +
+  '<ol>\n' +
+  '  <li>شريط القوائم</li>\n' +
+  '  <li>كل مجموعة شريط الأدوات</li>\n' +
+  '  <li>الشريط الجانبي</li>\n' +
+  '  <li>مسار العنصر في التذييل</li>\n' +
+  '  <li>زر تبديل عدد الكلمات في التذييل</li>\n' +
+  '  <li>رابط إدراج العلامة التجارية في التذييل</li>\n' +
+  '  <li>مؤشر تغيير حجم المحرر في التذييل</li>\n' +
+  '</ol>\n' +
+  '\n' +
+  '<p>إذا لم يكن قسم واجهة المستخدم موجودًا، فسيتم تخطيه.</p>\n' +
+  '\n' +
+  '<p>إذا كان التذييل يحتوي على التركيز على ‏‫التنقل بواسطة لوحة المفاتيح، ولا يوجد شريط جانبي مرئي، فإن الضغط على <strong>Shift+Tab</strong>\n' +
+  '  ينقل التركيز إلى مجموعة شريط الأدوات الأولى، وليس الأخيرة.</p>\n' +
+  '\n' +
+  '<h1>التنقل بين أقسام واجهة المستخدم</h1>\n' +
+  '\n' +
+  '<p>للانتقال من أحد عناصر واجهة المستخدم إلى العنصر التالي، اضغط على مفتاح <strong>السهم</strong> المناسب.</p>\n' +
+  '\n' +
+  '<p>مفتاحا السهمين <strong>اليسار‎</strong> و<strong>اليمين‎</strong></p>\n' +
+  '\n' +
+  '<ul>\n' +
+  '  <li>التنقل بين القوائم في شريط القوائم.</li>\n' +
+  '  <li>فتح قائمة فرعية في القائمة.</li>\n' +
+  '  <li>التنقل بين الأزرار في مجموعة شريط الأدوات.</li>\n' +
+  '  <li>التنقل بين العناصر في مسار عنصر التذييل.</li>\n' +
+  '</ul>\n' +
+  '\n' +
+  '<p>مفتاحا السهمين <strong>لأسفل‎</strong> و<strong>لأعلى‎</strong></p>\n' +
+  '\n' +
+  '<ul>\n' +
+  '  <li>التنقل بين عناصر القائمة في القائمة.</li>\n' +
+  '  <li>التنقل بين العناصر في قائمة شريط الأدوات المنبثقة.</li>\n' +
+  '</ul>\n' +
+  '\n' +
+  '<p>دورة مفاتيح <strong>الأسهم‎</strong> داخل قسم واجهة المستخدم التي تم التركيز عليها.</p>\n' +
+  '\n' +
+  '<p>لإغلاق قائمة مفتوحة أو قائمة فرعية مفتوحة أو قائمة منبثقة مفتوحة، اضغط على مفتاح <strong>Esc</strong>.</p>\n' +
+  '\n' +
+  '<p>إذا كان التركيز الحالي على "الجزء العلوي" من قسم معين لواجهة المستخدم، فإن الضغط على مفتاح <strong>Esc</strong> يؤدي أيضًا إلى الخروج\n' +
+  '  من التنقل بواسطة لوحة المفاتيح بالكامل.</p>\n' +
+  '\n' +
+  '<h1>تنفيذ عنصر قائمة أو زر شريط أدوات</h1>\n' +
+  '\n' +
+  '<p>عندما يتم تمييز عنصر القائمة المطلوب أو زر شريط الأدوات، اضغط على زر <strong>Return</strong>، أو <strong>Enter</strong>،\n' +
+  '  أو <strong>مفتاح المسافة</strong> لتنفيذ العنصر.</p>\n' +
+  '\n' +
+  '<h1>التنقل في مربعات الحوار غير المبوبة</h1>\n' +
+  '\n' +
+  '<p>في مربعات الحوار غير المبوبة، يتم التركيز على المكون التفاعلي الأول عند فتح مربع الحوار.</p>\n' +
+  '\n' +
+  '<p>التنقل بين مكونات الحوار التفاعلي بالضغط على زر <strong>Tab</strong> أو <strong>Shift+Tab</strong>.</p>\n' +
+  '\n' +
+  '<h1>التنقل في مربعات الحوار المبوبة</h1>\n' +
+  '\n' +
+  '<p>في مربعات الحوار المبوبة، يتم التركيز على الزر الأول في قائمة علامات التبويب عند فتح مربع الحوار.</p>\n' +
+  '\n' +
+  '<p>التنقل بين المكونات التفاعلية لعلامة التبويب لمربع الحوار هذه بالضغط على زر <strong>Tab</strong> أو\n' +
+  '  <strong>Shift+Tab</strong>.</p>\n' +
+  '\n' +
+  '<p>التبديل إلى علامة تبويب أخرى لمربع الحوار من خلال التركيز على قائمة علامة التبويب ثم الضغط على زر <strong>السهم</strong> المناسب\n' +
   '  مفتاح للتنقل بين علامات التبويب المتاحة.</p>\n');