fix: correct typos

Author: iobuhov

packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss

@@ -551,7 +551,7 @@ $root: ".widget-datagrid";
     display: contents;
 }
 
-:where(#{$root}-paging-bottom, #{$root}-padding-top) {
+:where(#{$root}-paging-bottom, #{$root}-paging-top) {
     display: flex;
     flex-flow: row nowrap;
     align-items: center;

packages/pluggableWidgets/datagrid-web/src/Datagrid.editorPreview.tsx

@@ -52,7 +52,7 @@ const numberOfItems = 3;
 const cls = {
     root: "widget-datagrid",
     topBar: "widget-datagrid-top-bar table-header",
-    pagingTop: "widget-datagrid-padding-top",
+    pagingTop: "widget-datagrid-paging-top",
     ptStart: "widget-datagrid-tb-start",
     ptEnd: "widget-datagrid-tb-end",
     header: "widget-datagrid-header header-filters",
@@ -61,7 +61,7 @@ const cls = {
     gridHeader: "widget-datagrid-grid-head",
     gridBody: "widget-datagrid-grid-body table-content",
     footer: "widget-datagrid-footer table-footer",
-    pb: "widget-datagrid-padding-bottom",
+    pb: "widget-datagrid-paging-bottom",
     pbStart: "widget-datagrid-pb-start",
     pbMid: "widget-datagrid-pb-middle",
     pbEnd: "widget-datagrid-pb-end"
@@ -300,7 +300,7 @@ const SelectionCounter = (): ReactNode => {
     return (
         <div className="widget-datagrid-selection-counter">
             <span className="widget-datagrid-selection-text" aria-live="polite" aria-atomic="true">
-                {props.selectedCountTemplateSingular}
+                {props.selectedCountTemplateSingular || "[row count]"}
             </span>
             &nbsp;|&nbsp;
             <button className="widget-datagrid-btn-link">{props.clearSelectionButtonLabel}</button>

packages/pluggableWidgets/datagrid-web/src/components/WidgetTopBar.tsx

@@ -12,7 +12,7 @@ export const WidgetTopBar = observer(function WidgetTopBar(): ReactElement {
 
     return (
         <div className="widget-datagrid-top-bar table-header">
-            <div className="widget-datagrid-padding-top">
+            <div className="widget-datagrid-paging-top">
                 <div className="widget-datagrid-tb-start">
                     <If condition={selectionCounter.isTopCounterVisible}>
                         <SelectionCounter />

packages/pluggableWidgets/gallery-web/src/Gallery.editorPreview.tsx

@@ -113,7 +113,7 @@ const Content = (): ReactNode => {
                     [`widget-gallery-lg-${lg}`]: lg
                 })}
             >
-                <Item key="selectable_DO_NOE_REMOVE!_ALWAYS_RENDER!" />
+                <Item key="selectable_DO_NOT_REMOVE!_ALWAYS_RENDER!" />
                 {Array.from({ length: lgCount }).map((_, index) => (
                     <Item key={index} className="visible-md visible-lg" />
                 ))}

…src/components/GalleryTobBarControls.tsx …src/components/GalleryTopBarControls.tsxpackages/pluggableWidgets/gallery-web/src/components/GalleryTobBarControls.tsx renamed to packages/pluggableWidgets/gallery-web/src/components/GalleryTopBarControls.tsx packages/pluggableWidgets/gallery-web/src/components/GalleryTobBarControls.tsx renamed to packages/pluggableWidgets/gallery-web/src/components/GalleryTopBarControls.tsx

@@ -6,7 +6,7 @@ import { SelectionCounter } from "../features/selection-counter/SelectionCounter
 import { usePaginationConfig } from "../model/hooks/injection-hooks";
 import { Pagination } from "./Pagination";
 
-export const GalleryTobBarControls = observer(function GalleryTobBarControls(): ReactElement {
+export const GalleryTopBarControls = observer(function GalleryTopBarControls(): ReactElement {
     const counterVM = useSelectionCounterViewModel();
     const pgConfig = usePaginationConfig();
 

packages/pluggableWidgets/gallery-web/src/components/GalleryWidget.tsx

@@ -6,8 +6,8 @@ import { GalleryFooterControls as FooterControls } from "./GalleryFooterControls
 import { GalleryHeader as Header } from "./GalleryHeader";
 import { GalleryItems as Items } from "./GalleryItems";
 import { GalleryRoot as Root } from "./GalleryRoot";
-import { GalleryTobBarControls as TopBarControls } from "./GalleryTobBarControls";
 import { GalleryTopBar as TopBar } from "./GalleryTopBar";
+import { GalleryTopBarControls as TopBarControls } from "./GalleryTopBarControls";
 import { RefreshStatus } from "./RefreshStatus";
 
 export function GalleryWidget(): ReactElement {

packages/shared/widget-plugin-grid/src/core/models/datasource.model.ts

@@ -36,7 +36,7 @@ export function offsetAtom(gate: DerivedPropsGate<{ datasource: { offset: number
  * @injectable
  */
 export function limitAtom(gate: DerivedPropsGate<{ datasource: { limit: number } }>): ComputedAtom<number> {
-    return computed(() => gate.props.datasource.limit, { name: 'plugin:@computed:limitAtom' });
+    return computed(() => gate.props.datasource.limit, { name: "plugin:@computed:limitAtom" });
 }
 
 /**