@ostack.tech/ui 0.11.0 → 0.11.2

package/dist/types/components/Calendar/Calendar.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithRef } from 'react';
+import { ComponentPropsWithRef, RefObject } from 'react';
 import { DayPickerProps } from 'react-day-picker';
 import { IconButton } from '../IconButton';
 import { Select } from '../Select';
@@ -18,10 +18,22 @@ export interface DateRange {
     /** End of the date-range. */
     end: Date | null;
 }
+/** API to manipulate the calendar imperatively. */
+export interface CalendarApi<TValue extends Date | Date[] | DateRange | null = Date | Date[] | DateRange | null> {
+    getValue: () => TValue;
+    /** Sets the selected value of the calendar. */
+    setValue: (value: string | Date | (string | Date)[] | AcceptedDateRange | null) => void;
+    /** Gets the currently visible month of the calendar. */
+    getMonth: () => Date;
+    /** Sets the visible month of the calendar. */
+    setMonth: (month: Date) => void;
+    /** Whether the provided date is visible in the calendar. */
+    isVisible: (date: Date | string) => boolean;
+}
 /** Properties of the calendar component. */
 export type CalendarProps = CalendarNoneSelectionProps | CalendarSingleSelectionProps | CalendarMultipleSelectionProps | CalendarRangeSelectionProps;
 /** Base properties of the calendar component. */
-export interface CalendarPropsBase<TValue extends Date | Date[] | DateRange | null = Date | Date[] | DateRange | null> extends Pick<DayPickerProps, "required" | "className" | "style" | "id" | "defaultMonth" | "month" | "numberOfMonths" | "pagedNavigation" | "disableNavigation" | "fixedWeeks" | "hideWeekdays" | "showOutsideDays" | "showWeekNumber" | "broadcastCalendar" | "ISOWeek" | "timeZone" | "noonSafe" | "footer" | "autoFocus" | "disabled" | "hidden" | "today" | "modifiers" | "aria-label" | "aria-labelledby" | "numerals" | "weekStartsOn" | "firstWeekContainsDate" | "useAdditionalWeekYearTokens" | "useAdditionalDayOfYearTokens" | "onMonthChange" | "onNextClick" | "onPrevClick" | "onDayClick" | "onDayFocus" | "onDayBlur" | "onDayKeyDown" | "onDayMouseEnter" | "onDayMouseLeave"> {
+export interface CalendarPropsBase<TValue extends Date | Date[] | DateRange | null = Date | Date[] | DateRange | null> extends Pick<DayPickerProps, "required" | "className" | "style" | "id" | "numberOfMonths" | "pagedNavigation" | "disableNavigation" | "fixedWeeks" | "hideWeekdays" | "showOutsideDays" | "showWeekNumber" | "broadcastCalendar" | "ISOWeek" | "timeZone" | "noonSafe" | "footer" | "autoFocus" | "disabled" | "hidden" | "today" | "modifiers" | "aria-label" | "aria-labelledby" | "numerals" | "weekStartsOn" | "firstWeekContainsDate" | "useAdditionalWeekYearTokens" | "useAdditionalDayOfYearTokens" | "onMonthChange" | "onNextClick" | "onPrevClick" | "onDayClick" | "onDayFocus" | "onDayBlur" | "onDayKeyDown" | "onDayMouseEnter" | "onDayMouseLeave"> {
     /**
      * Mode for selecting calendar dates.
      *
@@ -34,6 +46,10 @@ export interface CalendarPropsBase<TValue extends Date | Date[] | DateRange | nu
     value?: string | Date | (string | Date)[] | AcceptedDateRange | null;
     /** Function called when the selected value changes. */
     onValueChange?: (value: TValue) => void;
+    /** The initial month to show in the calendar. */
+    defaultMonth?: string | Date;
+    /** Controlled month displayed in the calendar. */
+    month?: string | Date;
     /** Minimum date allowed. */
     minDate?: string | Date | null;
     /** Maximum date allowed. */
@@ -54,6 +70,8 @@ export interface CalendarPropsBase<TValue extends Date | Date[] | DateRange | nu
     previousMonthLabel?: string;
     /** Label of the "next month" button. */
     nextMonthLabel?: string;
+    /** Reference to the calendar API. */
+    apiRef?: RefObject<CalendarApi<TValue> | null>;
     /** Properties to pass to the header element. */
     headerProps?: ComponentPropsWithRef<"header">;
     /** Properties to pass to the header label element. */
@@ -97,4 +115,4 @@ export interface CalendarRangeSelectionProps extends CalendarPropsBase<DateRange
  * }
  * ```
  */
-export declare function Calendar({ selectionMode, defaultValue, value: controlledValue, onValueChange, required, minDate, maxDate, minMonth, maxMonth, minYear, maxYear, monthSelectLabel, yearSelectLabel, previousMonthLabel, nextMonthLabel, defaultMonth, month: controlledMonth, onMonthChange, onDayClick, onDayFocus, onDayMouseEnter, numberOfMonths, fixedWeeks, showOutsideDays, disableNavigation, disabled, modifiers, headerProps, headerLabelProps, previousButtonProps, nextButtonProps, monthSelectProps, yearSelectProps, pagedNavigation, ...otherProps }: CalendarProps): import("react/jsx-runtime").JSX.Element;
+export declare function Calendar({ selectionMode, defaultValue, value: controlledValue, onValueChange, required, minDate, maxDate, minMonth, maxMonth, minYear, maxYear, monthSelectLabel, yearSelectLabel, previousMonthLabel, nextMonthLabel, defaultMonth, month: controlledMonth, onMonthChange, onDayClick, onDayFocus, onDayMouseEnter, numberOfMonths, fixedWeeks, showOutsideDays, disableNavigation, disabled, modifiers, apiRef, headerProps, headerLabelProps, previousButtonProps, nextButtonProps, monthSelectProps, yearSelectProps, pagedNavigation, ...otherProps }: CalendarProps): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ostack.tech/ui",
   "description": "ostack/UI component library.",
-  "version": "0.11.0",
+  "version": "0.11.2",
   "homepage": "https://ui.ostack.tech/",
   "author": {
     "name": "Opensoft",

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

@@ -1,3 +1,4 @@
+@use "../Label/Label-variables" as *;
 @use "../../scss/base-variables" as *;
 @use "../../scss/utils/spacing" as *;
 
@@ -13,15 +14,17 @@ $data-table-filter-max-width: 250px !default;
 
 // Rows per page
 $data-table-rows-per-page-gap-x: spacing(1) !default;
-$data-table-rows-per-page-font-size: var(--#{$prefix}font-size-sm) !default;
-$data-table-rows-per-page-line-height: var(--#{$prefix}line-height-sm) !default;
+$data-table-rows-per-page-font-size: null !default;
+$data-table-rows-per-page-line-height: null !default;
 $data-table-rows-per-page-font-weight: $font-weight-normal !default;
+$data-table-rows-per-page-color: null !default;
 
 // Pagination
 $data-table-pagination-gap-x: spacing(2) !default;
-$data-table-pagination-font-size: var(--#{$prefix}font-size-sm) !default;
-$data-table-pagination-line-height: var(--#{$prefix}line-height-sm) !default;
-$data-table-pagination-font-weight: null !default;
+$data-table-pagination-font-size: $label-font-size !default;
+$data-table-pagination-line-height: $label-line-height !default;
+$data-table-pagination-font-weight: $font-weight-normal !default;
+$data-table-pagination-color: $label-color !default;
 
 // Pagination arrows
 $data-table-pagination-arrows-gap-x: spacing(1) !default;

package/scss/components/DataTable/_DataTable.scss

@@ -49,9 +49,10 @@
 
   &__rows-per-page-label {
     margin-right: $data-table-rows-per-page-gap-x;
-    font-size: $data-table-rows-per-page-font-size;
-    line-height: $data-table-rows-per-page-line-height;
+    font-size: maybe-important($data-table-rows-per-page-font-size);
+    line-height: maybe-important($data-table-rows-per-page-line-height);
     font-weight: maybe-important($data-table-rows-per-page-font-weight);
+    color: maybe-important($data-table-rows-per-page-color);
   }
 
   &__rows-per-page-select-root,
@@ -66,6 +67,7 @@
     font-size: $data-table-pagination-font-size;
     line-height: $data-table-pagination-line-height;
     font-weight: $data-table-pagination-font-weight;
+    color: $data-table-pagination-color;
   }
 
   &__pagination-arrows {

package/scss/components/DateRangeInput/_DateRangeInput.scss

@@ -49,11 +49,16 @@
     }
   }
 
+  &__popover-anchor {
+    box-shadow: none;
+  }
+
   &__popover-anchor > &__container {
     margin: calc(var(--#{$prefix}control-border-width) * -1);
-    background: none;
+
     &:not([data-focused]) {
       border-color: transparent;
+      background: none;
     }
 
     // When necessary, tweak spacing around containers so that the focus ring

package/scss/components/FeedbackList/_FeedbackList.scss

@@ -18,6 +18,7 @@
 
   & > .#{$prefix}feedback {
     margin-left: $feedback-list-feedback-margin-x !important;
+    text-align: left !important;
 
     & ~ .#{$prefix}feedback {
       margin-top: $feedback-list-feedback-margin-y;

package/scss/components/Stepper/_Stepper.scss

@@ -48,7 +48,7 @@
       background-color: $stepper-step-line-status-background-color;
     }
 
-    &:is([data-completed], [data-active]) {
+    &:is([data-completed], [data-current]) {
       &::before {
         background-color: $stepper-step-line-completed-background-color;
       }
@@ -70,7 +70,7 @@
     margin-bottom: $stepper-step-label-margin-y;
     text-align: center;
 
-    &:not([data-completed], [data-active]) {
+    &:not([data-completed], [data-current]) {
       color: $stepper-step-label-incomplete-color;
     }
   }
@@ -106,13 +106,13 @@
     }
 
     // TODO: Improve animations
-    &[data-active] {
+    &[data-current] {
       @include accessible-animation(
         $animation-fade-in $stepper-step-content-animation-duration
           $stepper-step-content-animation-timing-function
       );
     }
-    //&:not([data-active]) {
+    //&:not([data-current]) {
     //  @include accessible-animation-close();
     //}
 

package/scss/components/Tabs/_Tabs-variables.scss

@@ -213,6 +213,7 @@ $tabs-tab-content-label-border-bottom: 2px solid var(--#{$prefix}primary-9) !def
 $tabs-tab-content-label-font-size: var(--#{$prefix}font-size-sm) !default;
 $tabs-tab-content-label-line-height: var(--#{$prefix}font-size-sm) !default;
 $tabs-tab-content-label-font-weight: $font-weight-medium !default;
+$tabs-tab-content-label-color: null !default;
 
 // Tab content
 $tabs-tab-content-gap-y: spacing(2) !default;

package/scss/components/Tabs/_Tabs.scss

@@ -447,6 +447,7 @@
     font-size: $tabs-tab-content-label-font-size;
     line-height: $tabs-tab-content-label-line-height;
     font-weight: $tabs-tab-content-label-font-weight;
+    color: $tabs-tab-content-label-color;
   }
 
   // Tab content