@bloomreach/react-banana-ui 1.32.2 → 1.33.0

package/dist/utils/date-range-presets.d.ts

@@ -0,0 +1,144 @@
+import { DateRangeValue } from './types/date.types';
+/**
+ * Time unit types for date range calculations
+ */
+export type TimeUnit = 'day' | 'month' | 'quarter' | 'week' | 'year';
+/**
+ * Week type for start of week calculations
+ */
+export type WeekStartDay = 'monday' | 'sunday';
+/**
+ * Configuration options for date range presets
+ */
+export interface DateRangeConfig {
+    /**
+     * First month of fiscal year (0-11, default: 0 for January)
+     */
+    fiscalYearStartMonth?: number;
+    /**
+     * First day of the week (default: 'sunday')
+     */
+    weekStartsOn?: WeekStartDay;
+}
+/**
+ * Configure date range preset behavior
+ */
+export declare function configureDateRangePresets(options: DateRangeConfig): void;
+/**
+ * Creates a date range for a relative period (e.g., "this month", "last week", "next year")
+ *
+ * @param unit - The time unit (day, week, month, quarter, year)
+ * @param offset - Offset from current period (0 = this, -1 = last, 1 = next)
+ * @returns A function that returns the date range
+ *
+ * @example
+ * createRelativePeriod('month', 0)  // This month
+ * createRelativePeriod('week', -1)  // Last week
+ * createRelativePeriod('year', 1)   // Next year
+ */
+export declare function createRelativePeriod(unit: TimeUnit, offset?: number): () => DateRangeValue;
+/**
+ * Creates a rolling date range (e.g., "last 7 days", "next 30 days")
+ *
+ * @param count - Number of units
+ * @param unit - The time unit (day, week, month, year)
+ * @param direction - 'past' for last N units, 'future' for next N units
+ * @returns A function that returns the date range
+ *
+ * @example
+ * createRollingPeriod(7, 'day', 'past')    // Last 7 days
+ * createRollingPeriod(3, 'month', 'past')  // Last 3 months
+ * createRollingPeriod(30, 'day', 'future') // Next 30 days
+ */
+export declare function createRollingPeriod(count: number, unit: TimeUnit, direction?: 'future' | 'past'): () => DateRangeValue;
+/**
+ * Creates a "period to date" range (e.g., "month to date", "year to date")
+ *
+ * @param unit - The time unit (week, month, quarter, year)
+ * @returns A function that returns the date range from start of period to now
+ *
+ * @example
+ * createPeriodToDate('month')   // Month to date
+ * createPeriodToDate('year')    // Year to date
+ * createPeriodToDate('quarter') // Quarter to date
+ */
+export declare function createPeriodToDate(unit: Exclude<TimeUnit, 'day'>): () => DateRangeValue;
+/**
+ * Creates a date range for a specific absolute period
+ *
+ * @param year - The year
+ * @param unit - The time unit
+ * @param period - The period number (month: 0-11, quarter: 1-4, week: 1-53)
+ * @returns A function that returns the date range
+ *
+ * @example
+ * createSpecificPeriod(2024, 'year')           // Entire year 2024
+ * createSpecificPeriod(2024, 'quarter', 2)     // Q2 2024
+ * createSpecificPeriod(2024, 'month', 5)       // June 2024 (month 5)
+ */
+export declare function createSpecificPeriod(year: number, unit: TimeUnit, period?: number): () => DateRangeValue;
+/**
+ * Creates a custom date range between two specific dates
+ *
+ * @param startDate - Start date
+ * @param endDate - End date
+ * @returns A function that returns the date range
+ *
+ * @example
+ * createCustomRange(new Date('2024-01-01'), new Date('2024-12-31'))
+ */
+export declare function createCustomRange(startDate: Date, endDate: Date): () => DateRangeValue;
+/**
+ * Creates a fiscal year date range
+ *
+ * @param year - The fiscal year
+ * @param startMonth - Starting month of fiscal year (0-11, defaults to configured value)
+ * @returns A function that returns the date range
+ *
+ * @example
+ * createFiscalYear(2024)        // Uses configured fiscal year start
+ * createFiscalYear(2024, 3)     // Fiscal year starting in April
+ */
+export declare function createFiscalYear(year: number, startMonth?: number): () => DateRangeValue;
+/**
+ * Common date range preset functions using the builder API
+ */
+export declare const dateRangePresets: {
+    allTime: () => DateRangeValue;
+    last2Weeks: () => DateRangeValue;
+    last2Years: () => DateRangeValue;
+    last3Months: () => DateRangeValue;
+    last6Months: () => DateRangeValue;
+    last7Days: () => DateRangeValue;
+    last12Months: () => DateRangeValue;
+    last14Days: () => DateRangeValue;
+    last30Days: () => DateRangeValue;
+    last60Days: () => DateRangeValue;
+    last90Days: () => DateRangeValue;
+    last180Days: () => DateRangeValue;
+    last365Days: () => DateRangeValue;
+    lastMonth: () => DateRangeValue;
+    lastQuarter: () => DateRangeValue;
+    lastWeek: () => DateRangeValue;
+    lastYear: () => DateRangeValue;
+    lifetime: () => DateRangeValue;
+    monthToDate: () => DateRangeValue;
+    next7Days: () => DateRangeValue;
+    next14Days: () => DateRangeValue;
+    next30Days: () => DateRangeValue;
+    next90Days: () => DateRangeValue;
+    nextMonth: () => DateRangeValue;
+    nextQuarter: () => DateRangeValue;
+    nextWeek: () => DateRangeValue;
+    nextYear: () => DateRangeValue;
+    quarterToDate: () => DateRangeValue;
+    thisMonth: () => DateRangeValue;
+    thisQuarter: () => DateRangeValue;
+    thisWeek: () => DateRangeValue;
+    thisYear: () => DateRangeValue;
+    today: () => DateRangeValue;
+    tomorrow: () => DateRangeValue;
+    weekToDate: () => DateRangeValue;
+    yesterday: () => DateRangeValue;
+    yearToDate: () => DateRangeValue;
+};

package/dist/utils/hooks/index.d.ts

@@ -2,3 +2,4 @@ export { default as useElementWidth } from './use-element-width';
 export { default as useHover } from './use-hover';
 export { default as useStyleProps } from './use-style-props';
 export * from './use-style-props';
+export * from './use-sync-max-height';

package/dist/utils/hooks/use-sync-max-height.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from 'react';
+interface Options {
+    enabled: boolean;
+    property?: 'height' | 'maxHeight';
+    round?: boolean;
+}
+export declare const useSyncMaxHeight: (sourceRef: RefObject<HTMLElement>, targetRef: RefObject<HTMLElement>, { enabled, property, round }: Options) => void;
+export {};

package/dist/utils/index.d.ts

@@ -1,5 +1,7 @@
 export * from './date';
+export * from './date-range-presets';
 export * from './extract-data-aria-attributes';
 export { default as filterStyleProps } from './filter-style-props';
 export * from './hooks';
 export * from './types';
+export * from './use-id';

package/dist/utils/use-id.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Hook to generate or use a stable field ID.
+ * Prefers the provided ID, falling back to a generated one that remains
+ * consistent across re-renders.
+ *
+ * This implementation uses a global counter with `useEffect` for SSR safety:
+ * - Ensures no hydration mismatches between server and client
+ * - Returns undefined during SSR (before useEffect runs)
+ * - Generates stable IDs on the client side using the prefix format
+ *
+ * The hook ensures the ID is only generated once per component instance,
+ * preventing issues with form field associations and accessibility.
+ *
+ * @param providedId - Optional ID provided by the component props
+ * @param prefix - Prefix for the generated ID (e.g., 'rbui-input-field')
+ * @returns A stable field ID string (may be undefined during SSR)
+ *
+ * @example
+ * ```tsx
+ * function MyField({ id, ...props }) {
+ *   const controlId = useFieldId(id, 'rbui-my-field');
+ *
+ *   return (
+ *     <>
+ *       <label htmlFor={controlId}>Label</label>
+ *       <input id={controlId} {...props} />
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export declare function useFieldId(providedId: string | undefined, prefix: string): string | undefined;
+/**
+ * Reset the global ID counter. Useful for testing environments
+ * where you need predictable IDs across test runs.
+ *
+ * @internal
+ */
+export declare function resetIdCounter(): void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bloomreach/react-banana-ui",
   "type": "module",
-  "version": "1.32.2",
+  "version": "1.33.0",
   "private": false,
   "repository": {
     "type": "git",
@@ -70,77 +70,77 @@
   "dependencies": {
     "@bloomreach/banana-theme": "0.0.28",
     "@floating-ui/react": "0.27.16",
-    "@internationalized/date": "3.9.0",
+    "@internationalized/date": "3.10.0",
     "@mui/base": "5.0.0-beta.70",
     "@radix-ui/react-accordion": "1.2.12",
-    "@radix-ui/react-slot": "1.2.3",
-    "@react-aria/calendar": "3.9.1",
-    "@react-aria/datepicker": "3.15.1",
-    "@react-aria/i18n": "3.12.12",
-    "@react-stately/calendar": "3.8.4",
-    "@react-stately/datepicker": "3.15.1",
+    "@radix-ui/react-slot": "1.2.4",
+    "@react-aria/calendar": "3.9.2",
+    "@react-aria/datepicker": "3.15.2",
+    "@react-aria/i18n": "3.12.13",
+    "@react-stately/calendar": "3.9.0",
+    "@react-stately/datepicker": "3.15.2",
     "classnames": "2.5.1",
     "react-hot-toast": "2.6.0",
     "react-merge-refs": "2.1.1"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "5.4.1",
-    "@commitlint/cli": "19.8.1",
-    "@commitlint/config-conventional": "19.8.1",
-    "@commitlint/types": "19.8.1",
+    "@antfu/eslint-config": "6.2.0",
+    "@commitlint/cli": "20.1.0",
+    "@commitlint/config-conventional": "20.0.0",
+    "@commitlint/types": "20.0.0",
     "@eslint-community/eslint-plugin-eslint-comments": "4.5.0",
-    "@eslint-react/eslint-plugin": "1.53.1",
-    "@eslint/js": "9.36.0",
+    "@eslint-react/eslint-plugin": "2.3.5",
+    "@eslint/js": "9.39.1",
     "@laynezh/vite-plugin-lib-assets": "2.1.3",
-    "@playwright/test": "1.55.0",
+    "@playwright/test": "1.56.1",
     "@semantic-release/changelog": "6.0.3",
     "@semantic-release/git": "10.0.1",
-    "@storybook/addon-a11y": "9.1.7",
-    "@storybook/addon-docs": "9.1.7",
-    "@storybook/addon-links": "9.1.7",
-    "@storybook/react-vite": "9.1.7",
+    "@storybook/addon-a11y": "10.0.8",
+    "@storybook/addon-docs": "10.0.8",
+    "@storybook/addon-links": "10.0.8",
+    "@storybook/react-vite": "10.0.8",
     "@testing-library/dom": "10.4.1",
-    "@testing-library/jest-dom": "6.8.0",
+    "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
-    "@types/node": "22.16.5",
+    "@types/node": "24.10.1",
     "@types/react": "18.x.x",
     "@types/react-dom": "18.x.x",
-    "@vitejs/plugin-react-swc": "4.1.0",
-    "@vitest/coverage-v8": "3.2.4",
-    "@vitest/eslint-plugin": "1.3.12",
-    "@vitest/ui": "3.2.4",
-    "autoprefixer": "10.4.21",
+    "@vitejs/plugin-react-swc": "4.2.2",
+    "@vitest/coverage-v8": "4.0.12",
+    "@vitest/eslint-plugin": "1.4.3",
+    "@vitest/ui": "4.0.12",
+    "autoprefixer": "10.4.22",
     "conventional-changelog-conventionalcommits": "9.1.0",
-    "eslint": "9.36.0",
+    "eslint": "9.39.1",
     "eslint-config-prettier": "10.1.8",
     "eslint-import-resolver-typescript": "4.4.4",
     "eslint-plugin-jsx-a11y": "6.10.2",
-    "eslint-plugin-perfectionist": "4.15.0",
+    "eslint-plugin-perfectionist": "4.15.1",
     "eslint-plugin-prettier": "5.5.4",
     "eslint-plugin-react": "7.37.5",
-    "eslint-plugin-react-hooks": "5.2.0",
-    "eslint-plugin-react-refresh": "0.4.20",
-    "eslint-plugin-storybook": "9.1.7",
-    "eslint-plugin-unicorn": "61.0.2",
-    "globals": "16.4.0",
+    "eslint-plugin-react-hooks": "7.0.1",
+    "eslint-plugin-react-refresh": "0.4.24",
+    "eslint-plugin-storybook": "10.0.8",
+    "eslint-plugin-unicorn": "62.0.0",
+    "globals": "16.5.0",
     "husky": "9.1.7",
-    "jsdom": "27.0.0",
-    "lint-staged": "16.1.6",
-    "plop": "4.0.2",
+    "jsdom": "27.2.0",
+    "lint-staged": "16.2.7",
+    "plop": "4.0.4",
     "prettier": "3.6.2",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "resize-observer-polyfill": "1.5.1",
-    "sass": "1.93.0",
+    "sass": "1.94.2",
     "semantic-release": "24.2.9",
-    "storybook": "9.1.7",
-    "typescript": "5.9.2",
-    "typescript-eslint": "8.44.0",
-    "vite": "7.1.6",
+    "storybook": "10.0.8",
+    "typescript": "5.9.3",
+    "typescript-eslint": "8.47.0",
+    "vite": "7.2.4",
     "vite-plugin-dts": "4.5.4",
     "vite-plugin-svgr": "4.5.0",
-    "vitest": "3.2.4"
+    "vitest": "4.0.12"
   },
   "browserslist": [
     "> 0.25%",

package/dist/components/dropdowns/menu/menu/menu.stories.d.ts

@@ -1,6 +0,0 @@
-import { Menu } from '..';
-import { Meta, StoryObj } from '@storybook/react-vite';
-declare const meta: Meta;
-export default meta;
-export type Story = StoryObj<typeof Menu>;
-export declare const MenuStory: Story;

package/dist/components/dropdowns/menu/menu-button/menu-button.stories.d.ts

@@ -1,6 +0,0 @@
-import { default as MenuButton } from './menu-button';
-import { Meta, StoryObj } from '@storybook/react-vite';
-declare const meta: Meta;
-export default meta;
-export type Story = StoryObj<typeof MenuButton>;
-export declare const MenuButtonStory: Story;

package/dist/components/dropdowns/menu/menu-content/menu-content.stories.d.ts

@@ -1,10 +0,0 @@
-import { default as MenuContent } from './menu-content';
-import { Meta, StoryObj } from '@storybook/react-vite';
-declare const meta: Meta;
-export default meta;
-export type Story = StoryObj<typeof MenuContent>;
-export declare const MenuContentStory: Story;
-export declare const MenuContentTopPlacement: Story;
-export declare const MenuContentRightPlacement: Story;
-export declare const MenuContentBottomPlacement: Story;
-export declare const MenuContentLeftPlacement: Story;

package/dist/components/dropdowns/menu/menu-group/menu-group.stories.d.ts

@@ -1,6 +0,0 @@
-import { default as MenuGroup } from './menu-group';
-import { Meta, StoryObj } from '@storybook/react-vite';
-declare const meta: Meta;
-export default meta;
-export type Story = StoryObj<typeof MenuGroup>;
-export declare const MenuGroupStory: Story;

package/dist/components/dropdowns/menu/menu-group-label/menu-group-label.stories.d.ts

@@ -1,6 +0,0 @@
-import { default as MenuGroupLabel } from './menu-group-label';
-import { Meta, StoryObj } from '@storybook/react-vite';
-declare const meta: Meta;
-export default meta;
-export type Story = StoryObj<typeof MenuGroupLabel>;
-export declare const MenuGroupLabelStory: Story;

package/dist/components/dropdowns/menu/menu-item/menu-item.stories.d.ts

@@ -1,6 +0,0 @@
-import { default as MenuItem } from './menu-item';
-import { Meta, StoryObj } from '@storybook/react-vite';
-declare const meta: Meta;
-export default meta;
-export type Story = StoryObj<typeof MenuItem>;
-export declare const MenuItemStory: Story;

package/dist/components/dropdowns/menu/menu-separator/menu-separator.stories.d.ts

@@ -1,6 +0,0 @@
-import { default as MenuSeparator } from './menu-separator';
-import { Meta, StoryObj } from '@storybook/react-vite';
-declare const meta: Meta;
-export default meta;
-export type Story = StoryObj<typeof MenuSeparator>;
-export declare const MenuSeparatorStory: Story;

package/dist/components/inputs/base-field/generate-field-id.d.ts

@@ -1,4 +0,0 @@
-/**
- * Generate a unique id based on the field name
- */
-export declare const generateFieldId: (fieldName: string) => string;