@ostack.tech/ui 0.6.3 → 0.6.4

package/dist/types/components/DataTable/DataTableBody.d.ts

@@ -3,7 +3,7 @@ import { TableBody } from '../Table';
 import { DataTableContentProps } from './DataTableContent.tsx';
 /** Properties of the data table foot component. */
 export interface DataTableBodyProps extends ComponentPropsWithoutRef<typeof TableBody>, Pick<DataTableContentProps, "emptyMessage" | "emptyMessageProps"> {
-    containerRef: RefObject<HTMLDivElement | null>;
+    scrollableRef: RefObject<HTMLDivElement | null>;
 }
 /** Body of the data table. */
 export declare const DataTableBody: import('react').ForwardRefExoticComponent<DataTableBodyProps & import('react').RefAttributes<HTMLTableSectionElement>>;

package/dist/types/components/DataTable/DataTableFilter.d.ts

@@ -2,6 +2,13 @@ import { ComponentPropsWithoutRef } from 'react';
 import { Input } from '../Input';
 /** Properties of the data table filter component. */
 export interface DataTableFilterProps extends Omit<ComponentPropsWithoutRef<typeof Input>, "defaultValue" | "value"> {
+    /**
+     * Whether the component should preferably be aligned to the right. This only
+     * has an effect when the component is nested directly under the `DataTable`.
+     *
+     * @default true
+     */
+    preferRightAlignment?: boolean;
 }
 /** Input used to globally filter a data table. */
 export declare const DataTableFilter: import('react').ForwardRefExoticComponent<DataTableFilterProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/types/components/DataTable/DataTablePagination.d.ts

@@ -14,6 +14,13 @@ export interface DataTablePaginationProps extends ComponentPropsWithoutRef<"div"
     previousPageButtonLabel?: string;
     /** Label of the next page button (only relevant in paged mode). */
     nextPageButtonLabel?: string;
+    /**
+     * Whether the component should preferably be aligned to the right. This only
+     * has an effect when the component is nested directly under the `DataTable`.
+     *
+     * @default true
+     */
+    preferRightAlignment?: boolean;
     /**
      * Properties to pass to the previous page button (only relevant in paged
      * mode).

package/dist/types/components/DataTable/DataTableRowsPerPage.d.ts

@@ -14,6 +14,13 @@ export interface DataTableRowsPerPageProps extends ComponentPropsWithoutRef<"div
      * @param rows Node representing the number of rows (a select).
      */
     label?: ReactNode;
+    /**
+     * Whether the component should preferably be aligned to the right. This only
+     * has an effect when the component is nested directly under the `DataTable`.
+     *
+     * @default false
+     */
+    preferRightAlignment?: boolean;
 }
 /** Component displaying a select used to change the number of rows per page. */
 export declare const DataTableRowsPerPage: import('react').ForwardRefExoticComponent<DataTableRowsPerPageProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/components/DataTable/DataTableSelectionTrigger.d.ts

@@ -2,6 +2,13 @@ import { ComponentPropsWithoutRef, Key, MouseEvent, ReactNode } from 'react';
 import { Button } from '../Button';
 /** Properties of the data table selection trigger component. */
 export interface DataTableSelectionTriggerProps extends Omit<ComponentPropsWithoutRef<typeof Button>, "onClick"> {
+    /**
+     * Whether the component should preferably be aligned to the right. This only
+     * has an effect when the component is nested directly under the `DataTable`.
+     *
+     * @default true
+     */
+    preferRightAlignment?: boolean;
     /**
      * Whether the button should be displayed when no rows are selected.
      *

package/dist/types/components/DataTable/PagedDataTablePagination.d.ts

@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef } from 'react';
 import { DataTablePaginationProps } from './DataTablePagination.tsx';
 /** Properties of the scrolled data table pagination. */
-export interface PagedDataTablePaginationProps extends ComponentPropsWithoutRef<"div">, Pick<DataTablePaginationProps, "rowsRange" | "previousPageButtonLabel" | "nextPageButtonLabel" | "previousPageButtonProps" | "nextPageButtonProps"> {
+export interface PagedDataTablePaginationProps extends ComponentPropsWithoutRef<"div">, Pick<DataTablePaginationProps, "rowsRange" | "previousPageButtonLabel" | "nextPageButtonLabel" | "preferRightAlignment" | "previousPageButtonProps" | "nextPageButtonProps"> {
 }
 /** Pagination component of the scrolled data table. */
 export declare const PagedDataTablePagination: import('react').ForwardRefExoticComponent<PagedDataTablePaginationProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/components/DataTable/ScrolledDataTablePagination.d.ts

@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef } from 'react';
 import { DataTablePaginationProps } from './DataTablePagination.tsx';
 /** Properties of the scrolled data table pagination. */
-export interface ScrolledDataTablePaginationProps extends ComponentPropsWithoutRef<"div">, Pick<DataTablePaginationProps, "rowsRange"> {
+export interface ScrolledDataTablePaginationProps extends ComponentPropsWithoutRef<"div">, Pick<DataTablePaginationProps, "rowsRange" | "preferRightAlignment"> {
 }
 /** Pagination component of the scrolled data table. */
 export declare const ScrolledDataTablePagination: import('react').ForwardRefExoticComponent<ScrolledDataTablePaginationProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/components/DataTable/ScrolledDataTableRows.d.ts

@@ -1,7 +1,7 @@
 import { DataTableBodyProps } from './DataTableBody.tsx';
 /** Properties of the scrolled data table body component. */
-interface ScrolledDataTableRowsProps extends Pick<DataTableBodyProps, "containerRef"> {
+interface ScrolledDataTableRowsProps extends Pick<DataTableBodyProps, "scrollableRef"> {
 }
 /** Body of the data table in "scrolled" display mode. */
-export declare function ScrolledDataTableRows<T = unknown>({ containerRef, }: ScrolledDataTableRowsProps): import("react/jsx-runtime").JSX.Element;
+export declare function ScrolledDataTableRows<T = unknown>({ scrollableRef, }: ScrolledDataTableRowsProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ostack.tech/ui",
   "description": "ostack/UI component library.",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "homepage": "https://ui.ostack.tech/",
   "author": {
     "name": "Opensoft",
@@ -45,7 +45,7 @@
   },
   "dependencies": {
     "@fortawesome/react-fontawesome": "^3.1.1",
-    "@tanstack/react-virtual": "^3.13.12",
+    "@tanstack/react-virtual": "^3.13.13",
     "cmdk": "^1.1.1",
     "from-exponential": "^1.1.1",
     "radix-ui": "^1.4.3",

package/scss/_utils.scss

@@ -28,6 +28,7 @@
 @forward "components/Checkbox/Checkbox-variables";
 @forward "components/Code/Code-variables";
 @forward "components/Collapsible/Collapsible-variables";
+@forward "components/DataTable/DataTable-variables";
 @forward "components/Dialog/Dialog-variables";
 @forward "components/CommandMenu/CommandMenu-variables";
 @forward "components/Container/Container-variables";

package/scss/components/Calendar/_Calendar.scss

@@ -36,6 +36,7 @@
     margin: $calendar-month-padding;
     border-spacing: 0;
     border-collapse: collapse;
+    font: inherit;
   }
 
   &__weeks,

package/scss/components/DataTable/_DataTable-variables.scss

@@ -0,0 +1,25 @@
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/spacing" as *;
+
+// Cell - Loading
+$data-table-cell-loading-padding-y: spacing(2.5) !default;
+$data-table-cell-loading-padding-x: spacing(3) !default;
+
+// Empty message
+$data-table-empty-message-color: var(--#{$prefix}neutral-10) !default;
+
+// Filter
+$data-table-filter-max-width: 250px !default;
+
+// Rows per page
+$data-table-rows-per-page-gap-x: spacing(1) !default;
+
+// Pagination
+$data-table-pagination-gap-x: spacing(2) !default;
+
+// Pagination arrows
+$data-table-pagination-arrows-gap-x: spacing(1) !default;
+
+// Direct children
+$data-table-child-gap-y: spacing(1) !default;
+$data-table-child-gap-x: spacing(2) !default;

package/scss/components/DataTable/_DataTable.scss

@@ -1,3 +1,4 @@
+@use "DataTable-variables" as *;
 @use "../ControlCode/ControlCode-variables" as *;
 @use "../../scss/base-variables" as *;
 @use "../../scss/utils/breakpoints" as *;
@@ -11,16 +12,9 @@
   flex-wrap: wrap;
   align-items: center;
 
-  // Clearfix due to usage of floats for the default positioning
-  &::after {
-    content: "";
-    display: table;
-    clear: both;
-  }
-
   // Empty message
   &__empty-message {
-    color: $neutral-10;
+    color: $data-table-empty-message-color;
   }
 
   // When in scrolled mode, the virtualization component uses mock rows
@@ -31,7 +25,8 @@
   }
 
   &__cell[data-loading] {
-    padding: spacing(2.5) spacing(3) !important;
+    padding: $data-table-cell-loading-padding-y
+      $data-table-cell-loading-padding-x !important;
   }
 
   // Spinner within a cell
@@ -41,7 +36,7 @@
 
   // Filter
   &__filter-root {
-    max-width: 250px;
+    max-width: $data-table-filter-max-width;
   }
 
   // Rows per page, pagination
@@ -52,7 +47,7 @@
   }
 
   &__rows-per-page-label {
-    margin-right: spacing(1);
+    margin-right: $data-table-rows-per-page-gap-x;
   }
 
   &__rows-per-page-select-root,
@@ -67,40 +62,43 @@
   }
 
   &__pagination-arrows {
-    margin-left: spacing(2);
+    margin-left: $data-table-pagination-gap-x;
     flex: 0 0 auto;
 
     & > :first-child {
-      margin-right: spacing(1);
+      margin-right: $data-table-pagination-arrows-gap-x;
     }
   }
 
+  // Selection column
+  &__selection-column-cell .#{$prefix}checkbox__container {
+    background-color: transparent;
+  }
+
   // Auto-layout of data table components (when they're direct children of the
   // data table):
 
-  // Add margins to elements
-  & > *:not(:last-child) {
-    margin-bottom: spacing(1);
+  // Add spacing to children
+  & > *:not(&__content-container) {
+    margin-bottom: $data-table-child-gap-y;
+  }
+  & > &__content-container ~ * {
+    margin-top: $data-table-child-gap-y;
+    margin-bottom: 0;
   }
-
-  // Separate elements
   & > *:not(&__content-container):not(:first-child) {
-    margin-left: spacing(2);
+    margin-left: $data-table-child-gap-x;
   }
   & > &__content-container + * {
     margin-left: 0 !important;
   }
 
-  // The filter, pagination, and selection default to being on the right
-  & > :is(&__filter-root, &__pagination, &__selection-trigger):first-child,
-  &
-    > &__content-container
-    + :is(&__filter-root, &__pagination, &__selection-trigger) {
-    margin-left: auto;
+  // Some elements prefer to be right-aligned
+  & > [data-prefer-right-alignment] {
+    margin-left: auto !important;
   }
-
-  & > :is(.#{$prefix}label__container, &__rows-per-page) {
-    flex: 1;
+  & > [data-prefer-right-alignment] + [data-prefer-right-alignment] {
+    margin-left: $data-table-child-gap-x !important;
   }
 
   // Label styles
@@ -114,11 +112,6 @@
     margin-left: $control-code-label-margin-x;
   }
 
-  // Selection column
-  &__selection-column-cell .#{$prefix}checkbox__container {
-    background-color: transparent;
-  }
-
   @include media-breakpoint-down(sm) {
     &__rows-per-page,
     &__pagination {

package/scss/components/FieldGroup/_FieldGroup-variables.scss

@@ -17,15 +17,12 @@ $field-group-code-font-size: var(--#{$prefix}font-size-sm) !default;
 $field-group-code-line-height: var(--#{$prefix}line-height-sm) !default;
 $field-group-code-font-weight: $font-weight-semibold !default;
 $field-group-code-border-radius: var(--#{$prefix}border-radius-sm) !default;
-$field-group-code-border-color: color.adjust(
-  $primary-6,
-  $lightness: 10%
-) !default;
+$field-group-code-border-color: var(--#{$prefix}primary-a5) !default;
 $field-group-code-background-color: var(--#{$prefix}background-color) !default;
-$field-group-code-color: $primary-9 !default;
+$field-group-code-color: var(--#{$prefix}primary-11) !default;
 
 // Field group title
-$field-group-title-font-size: var(--#{$prefix}font-size-lg) !default;
-$field-group-title-line-height: var(--#{$prefix}line-height-lg) !default;
-$field-group-title-font-weight: $font-weight-semibold !default;
-$field-group-title-color: color.adjust($primary-11, $lightness: -5%) !default;
+$field-group-title-font-size: var(--#{$prefix}font-size-sm) !default;
+$field-group-title-line-height: var(--#{$prefix}line-height-sm) !default;
+$field-group-title-font-weight: $font-weight-medium !default;
+$field-group-title-color: var(--#{$prefix}primary-11) !default;