@base-ui/react 1.4.0 → 1.4.1

package/calendar/day-button/CalendarDayButton.d.ts

@@ -1,47 +0,0 @@
-import * as React from 'react';
-import { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
-/**
- * An individual interactive day button in the calendar.
- * Renders a `<button>` element.
- *
- * Documentation: [Base UI Calendar](https://base-ui.com/react/components/calendar)
- */
-export declare const CalendarDayButton: React.NamedExoticComponent<Omit<CalendarDayButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export interface CalendarDayButtonState {
-  /**
-   * Whether the day is selected.
-   */
-  selected: boolean;
-  /**
-   * Whether the day is disabled.
-   */
-  disabled: boolean;
-  /**
-   * Whether the day is not available.
-   */
-  unavailable: boolean;
-  /**
-   * Whether the day contains the current date.
-   */
-  current: boolean;
-  /**
-   * Whether the day is outside the month rendered by the day grid wrapping it.
-   */
-  outsideMonth: boolean;
-}
-export interface CalendarDayButtonProps extends Omit<BaseUIComponentProps<'button', CalendarDayButtonState>, 'value'>, NativeButtonProps {
-  /**
-   * The format used to display the day.
-   * @default adapter.formats.dayOfMonth
-   */
-  format?: string | undefined;
-  /**
-   * When `true` the item remains focusable when disabled.
-   * @default false
-   */
-  focusableWhenDisabled?: boolean | undefined;
-}
-export declare namespace CalendarDayButton {
-  type State = CalendarDayButtonState;
-  type Props = CalendarDayButtonProps;
-}

package/calendar/day-button/CalendarDayButton.js

@@ -1,130 +0,0 @@
-"use strict";
-'use client';
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CalendarDayButton = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _store = require("@base-ui/utils/store");
-var _useRenderElement = require("../../utils/useRenderElement");
-var _CalendarDayButtonDataAttributes = require("./CalendarDayButtonDataAttributes");
-var _useButton = require("../../use-button");
-var _SharedCalendarRootContext = require("../root/SharedCalendarRootContext");
-var _SharedCalendarDayGridBodyContext = require("../day-grid-body/SharedCalendarDayGridBodyContext");
-var _TemporalAdapterContext = require("../../temporal-adapter-provider/TemporalAdapterContext");
-var _SharedCalendarDayGridCellContext = require("../day-grid-cell/SharedCalendarDayGridCellContext");
-var _CompositeItem = require("../../composite/item/CompositeItem");
-var _store2 = require("../store");
-var _jsxRuntime = require("react/jsx-runtime");
-const stateAttributesMapping = {
-  selected(value) {
-    return value ? {
-      [_CalendarDayButtonDataAttributes.CalendarDayButtonDataAttributes.selected]: ''
-    } : null;
-  },
-  disabled(value) {
-    return value ? {
-      [_CalendarDayButtonDataAttributes.CalendarDayButtonDataAttributes.disabled]: ''
-    } : null;
-  },
-  unavailable(value) {
-    return value ? {
-      [_CalendarDayButtonDataAttributes.CalendarDayButtonDataAttributes.unavailable]: ''
-    } : null;
-  },
-  current(value) {
-    return value ? {
-      [_CalendarDayButtonDataAttributes.CalendarDayButtonDataAttributes.current]: ''
-    } : null;
-  },
-  outsideMonth(value) {
-    return value ? {
-      [_CalendarDayButtonDataAttributes.CalendarDayButtonDataAttributes.outsideMonth]: ''
-    } : null;
-  }
-};
-const InnerCalendarDayButton = /*#__PURE__*/React.forwardRef(function InnerCalendarDayButton(componentProps, forwardedRef) {
-  const adapter = (0, _TemporalAdapterContext.useTemporalAdapter)();
-  const {
-    className,
-    render,
-    nativeButton,
-    format = adapter.formats.dayOfMonth,
-    disabled,
-    focusableWhenDisabled = false,
-    style,
-    ...elementProps
-  } = componentProps;
-  const store = (0, _SharedCalendarRootContext.useSharedCalendarRootContext)();
-  const {
-    month,
-    today
-  } = (0, _SharedCalendarDayGridBodyContext.useSharedCalendarDayGridBodyContext)();
-  const {
-    isDisabled: isCellDisabled,
-    isUnavailable,
-    isOutsideCurrentMonth,
-    value
-  } = (0, _SharedCalendarDayGridCellContext.useCalendarDayGridCellContext)();
-  const isSelected = (0, _store.useStore)(store, _store2.selectors.isDayButtonSelected, value);
-  const isTabbable = (0, _store.useStore)(store, _store2.selectors.isDayButtonTabbable, value, month);
-  const isCurrent = adapter.isSameDay(value, today);
-  const formattedDate = React.useMemo(() => adapter.format(value, 'localizedDateWithFullMonthAndWeekDay'), [adapter, value]);
-  const isDisabled = disabled ?? isCellDisabled;
-  const isInteractionDisabled = isDisabled || isOutsideCurrentMonth;
-  const {
-    getButtonProps,
-    buttonRef
-  } = (0, _useButton.useButton)({
-    disabled: isInteractionDisabled,
-    native: nativeButton,
-    focusableWhenDisabled
-  });
-  const formattedValue = React.useMemo(() => adapter.formatByString(value, format), [adapter, value, format]);
-  const itemMetadata = React.useMemo(() => ({
-    focusable: (focusableWhenDisabled || !isDisabled) && !isOutsideCurrentMonth
-  }), [focusableWhenDisabled, isDisabled, isOutsideCurrentMonth]);
-  const props = {
-    'aria-label': formattedDate,
-    'aria-selected': isSelected ? true : undefined,
-    'aria-current': isCurrent ? 'date' : undefined,
-    'aria-disabled': isDisabled || isOutsideCurrentMonth || isUnavailable ? true : undefined,
-    children: formattedValue,
-    tabIndex: isTabbable ? 0 : -1,
-    onClick(event) {
-      if (isUnavailable || isInteractionDisabled) {
-        return;
-      }
-      store.selectDate(value, event);
-    }
-  };
-  const state = React.useMemo(() => ({
-    selected: isSelected,
-    disabled: isDisabled,
-    unavailable: isUnavailable,
-    current: isCurrent,
-    outsideMonth: isOutsideCurrentMonth
-  }), [isSelected, isDisabled, isUnavailable, isCurrent, isOutsideCurrentMonth]);
-  const element = (0, _useRenderElement.useRenderElement)('button', componentProps, {
-    state,
-    ref: [buttonRef, forwardedRef],
-    props: [props, elementProps, getButtonProps],
-    stateAttributesMapping
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeItem.CompositeItem, {
-    metadata: itemMetadata,
-    render: element
-  });
-});
-
-/**
- * An individual interactive day button in the calendar.
- * Renders a `<button>` element.
- *
- * Documentation: [Base UI Calendar](https://base-ui.com/react/components/calendar)
- */
-if (process.env.NODE_ENV !== "production") InnerCalendarDayButton.displayName = "InnerCalendarDayButton";
-const CalendarDayButton = exports.CalendarDayButton = /*#__PURE__*/React.memo(InnerCalendarDayButton);
-if (process.env.NODE_ENV !== "production") CalendarDayButton.displayName = "CalendarDayButton";

package/calendar/day-button/CalendarDayButtonDataAttributes.d.ts

@@ -1,22 +0,0 @@
-export declare enum CalendarDayButtonDataAttributes {
-  /**
-   * Present when the day is selected.
-   */
-  selected = "data-selected",
-  /**
-   * Present when the day is disabled.
-   */
-  disabled = "data-disabled",
-  /**
-   * Present when the day is unavailable.
-   */
-  unavailable = "data-unavailable",
-  /**
-   * Present when the day is the current date.
-   */
-  current = "data-current",
-  /**
-   * Present when the day is outside the month rendered by the day grid wrapping it.
-   */
-  outsideMonth = "data-outside-month",
-}

package/calendar/day-button/CalendarDayButtonDataAttributes.js

@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CalendarDayButtonDataAttributes = void 0;
-let CalendarDayButtonDataAttributes = exports.CalendarDayButtonDataAttributes = /*#__PURE__*/function (CalendarDayButtonDataAttributes) {
-  /**
-   * Present when the day is selected.
-   */
-  CalendarDayButtonDataAttributes["selected"] = "data-selected";
-  /**
-   * Present when the day is disabled.
-   */
-  CalendarDayButtonDataAttributes["disabled"] = "data-disabled";
-  /**
-   * Present when the day is unavailable.
-   */
-  CalendarDayButtonDataAttributes["unavailable"] = "data-unavailable";
-  /**
-   * Present when the day is the current date.
-   */
-  CalendarDayButtonDataAttributes["current"] = "data-current";
-  /**
-   * Present when the day is outside the month rendered by the day grid wrapping it.
-   */
-  CalendarDayButtonDataAttributes["outsideMonth"] = "data-outside-month";
-  return CalendarDayButtonDataAttributes;
-}({});

package/calendar/day-grid/CalendarDayGrid.d.ts

@@ -1,15 +0,0 @@
-import * as React from 'react';
-import { BaseUIComponentProps } from "../../utils/types.js";
-/**
- * Groups all the parts of the calendar's day grid.
- * Renders a `<table>` element.
- *
- * Documentation: [Base UI Calendar](https://base-ui.com/react/components/calendar)
- */
-export declare const CalendarDayGrid: React.ForwardRefExoticComponent<Omit<CalendarDayGridProps, "ref"> & React.RefAttributes<HTMLTableElement>>;
-export interface CalendarDayGridState {}
-export interface CalendarDayGridProps extends BaseUIComponentProps<'table', CalendarDayGridState> {}
-export declare namespace CalendarDayGrid {
-  type State = CalendarDayGridState;
-  type Props = CalendarDayGridProps;
-}

package/calendar/day-grid/CalendarDayGrid.js

@@ -1,32 +0,0 @@
-"use strict";
-'use client';
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CalendarDayGrid = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _useRenderElement = require("../../utils/useRenderElement");
-/**
- * Groups all the parts of the calendar's day grid.
- * Renders a `<table>` element.
- *
- * Documentation: [Base UI Calendar](https://base-ui.com/react/components/calendar)
- */
-const CalendarDayGrid = exports.CalendarDayGrid = /*#__PURE__*/React.forwardRef(function CalendarDayGrid(componentProps, forwardedRef) {
-  const {
-    className,
-    render,
-    style,
-    ...elementProps
-  } = componentProps;
-  const element = (0, _useRenderElement.useRenderElement)('table', componentProps, {
-    ref: forwardedRef,
-    props: [{
-      role: 'grid'
-    }, elementProps]
-  });
-  return element;
-});
-if (process.env.NODE_ENV !== "production") CalendarDayGrid.displayName = "CalendarDayGrid";

package/calendar/day-grid-body/CalendarDayGridBody.d.ts

@@ -1,16 +0,0 @@
-import * as React from 'react';
-import { BaseUIComponentProps } from "../../utils/types.js";
-import { UseSharedCalendarDayGridBodyParameters } from "./useSharedCalendarDayGridBody.js";
-/**
- * Groups all parts of the calendar's day grid.
- * Renders a `<tbody>` element.
- *
- * Documentation: [Base UI Calendar](https://base-ui.com/react/components/calendar)
- */
-export declare const CalendarDayGridBody: React.ForwardRefExoticComponent<Omit<CalendarDayGridBodyProps, "ref"> & React.RefAttributes<HTMLTableSectionElement>>;
-export interface CalendarDayGridBodyState {}
-export interface CalendarDayGridBodyProps extends Omit<BaseUIComponentProps<'tbody', CalendarDayGridBodyState>, 'children'>, UseSharedCalendarDayGridBodyParameters {}
-export declare namespace CalendarDayGridBody {
-  type State = CalendarDayGridBodyState;
-  type Props = CalendarDayGridBodyProps;
-}

package/calendar/day-grid-body/CalendarDayGridBody.js

@@ -1,53 +0,0 @@
-"use strict";
-'use client';
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CalendarDayGridBody = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _useRenderElement = require("../../utils/useRenderElement");
-var _SharedCalendarDayGridBodyContext = require("./SharedCalendarDayGridBodyContext");
-var _useSharedCalendarDayGridBody = require("./useSharedCalendarDayGridBody");
-var _CompositeRoot = require("../../composite/root/CompositeRoot");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Groups all parts of the calendar's day grid.
- * Renders a `<tbody>` element.
- *
- * Documentation: [Base UI Calendar](https://base-ui.com/react/components/calendar)
- */
-const CalendarDayGridBody = exports.CalendarDayGridBody = /*#__PURE__*/React.forwardRef(function CalendarDayGridBody(componentProps, forwardedRef) {
-  const {
-    className,
-    render,
-    children,
-    fixedWeekNumber,
-    offset,
-    style,
-    ...elementProps
-  } = componentProps;
-  const {
-    props,
-    compositeRootProps,
-    context,
-    ref
-  } = (0, _useSharedCalendarDayGridBody.useSharedCalendarDayGridBody)({
-    children,
-    fixedWeekNumber,
-    offset
-  });
-  const element = (0, _useRenderElement.useRenderElement)('tbody', componentProps, {
-    ref: [forwardedRef, ref],
-    props: [props, elementProps]
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SharedCalendarDayGridBodyContext.SharedCalendarDayGridBodyContext.Provider, {
-    value: context,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeRoot.CompositeRoot, {
-      ...compositeRootProps,
-      render: element
-    })
-  });
-});
-if (process.env.NODE_ENV !== "production") CalendarDayGridBody.displayName = "CalendarDayGridBody";

package/calendar/day-grid-body/SharedCalendarDayGridBodyContext.d.ts

@@ -1,14 +0,0 @@
-import * as React from 'react';
-import { TemporalSupportedObject } from "../../types/temporal/index.js";
-export interface SharedCalendarDayGridBodyContext {
-  /**
-   * The month of this component.
-   */
-  month: TemporalSupportedObject;
-  /**
-   * Today's date, computed once at the grid body level.
-   */
-  today: TemporalSupportedObject;
-}
-export declare const SharedCalendarDayGridBodyContext: React.Context<SharedCalendarDayGridBodyContext | undefined>;
-export declare function useSharedCalendarDayGridBodyContext(): SharedCalendarDayGridBodyContext;

package/calendar/day-grid-body/SharedCalendarDayGridBodyContext.js

@@ -1,21 +0,0 @@
-"use strict";
-'use client';
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SharedCalendarDayGridBodyContext = void 0;
-exports.useSharedCalendarDayGridBodyContext = useSharedCalendarDayGridBodyContext;
-var _formatErrorMessage2 = _interopRequireDefault(require("@base-ui/utils/formatErrorMessage"));
-var React = _interopRequireWildcard(require("react"));
-const SharedCalendarDayGridBodyContext = exports.SharedCalendarDayGridBodyContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== "production") SharedCalendarDayGridBodyContext.displayName = "SharedCalendarDayGridBodyContext";
-function useSharedCalendarDayGridBodyContext() {
-  const context = React.useContext(SharedCalendarDayGridBodyContext);
-  if (context === undefined) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: SharedCalendarDayGridBodyContext is missing. <Calendar.DayGridRow /> must be placed within <Calendar.DayGridBody /> and <RangeCalendar.DayGridRow /> must be placed within <RangeCalendar.DayGridBody />.' : (0, _formatErrorMessage2.default)(95));
-  }
-  return context;
-}

package/calendar/day-grid-body/useSharedCalendarDayGridBody.d.ts

@@ -1,45 +0,0 @@
-import * as React from 'react';
-import { SharedCalendarDayGridBodyContext } from "./SharedCalendarDayGridBodyContext.js";
-import { HTMLProps } from "../../utils/types.js";
-import { TemporalSupportedObject } from "../../types/temporal/index.js";
-import { CompositeRoot } from "../../composite/root/CompositeRoot.js";
-export declare function useSharedCalendarDayGridBody(parameters: UseSharedCalendarDayGridBodyParameters): UseSharedCalendarDayGridBodyReturnValue;
-export interface UseSharedCalendarDayGridBodyParameters {
-  /**
-   * The children of the component.
-   * If a function is provided, it will be called for each week to render as its parameter.
-   */
-  children?: React.ReactNode | ((week: TemporalSupportedObject, index: number, weeks: TemporalSupportedObject[]) => React.ReactNode);
-  /**
-   * Will render the requested amount of weeks by adding weeks of the next month if needed.
-   * Set it to 6 to create a Gregorian calendar where all months have the same number of weeks.
-   */
-  fixedWeekNumber?: number | undefined;
-  /**
-   * The offset to apply to the rendered month compared to the current month.
-   * This is mostly useful when displaying multiple day grids.
-   * @default 0
-   */
-  offset?: number | undefined;
-}
-export interface UseSharedCalendarDayGridBodyItemMetadata {
-  focusable?: boolean | undefined;
-}
-export interface UseSharedCalendarDayGridBodyReturnValue {
-  /**
-   * The props to apply to the element.
-   */
-  props: HTMLProps;
-  /**
-   * The props to apply to the composite root.
-   */
-  compositeRootProps: CompositeRoot.Props<UseSharedCalendarDayGridBodyItemMetadata, any>;
-  /**
-   * The context to provide to the children of the component.
-   */
-  context: SharedCalendarDayGridBodyContext;
-  /**
-   * The ref to apply to the element.
-   */
-  ref: React.RefObject<HTMLTableSectionElement | null>;
-}