@equinor/eds-core-react 0.36.0 → 0.37.0

package/dist/esm/components/Datepicker/calendars/CalendarHeader.js

@@ -0,0 +1,90 @@
+import styled from 'styled-components';
+import { Button } from '../../Button/index.js';
+import { Icon } from '../../Icon/index.js';
+import { chevron_left, chevron_up, chevron_down, chevron_right } from '@equinor/eds-icons';
+import { CalendarDate } from '@internationalized/date';
+import { tokens } from '@equinor/eds-tokens';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+const HeaderWrapper = styled.div.withConfig({
+  displayName: "CalendarHeader__HeaderWrapper",
+  componentId: "sc-kuy15-0"
+})(["display:flex;justify-content:space-between;align-items:center;text-transform:capitalize;width:100%;"]);
+function TodayPicker({
+  onClick,
+  disabled
+}) {
+  const today = new Date();
+  return /*#__PURE__*/jsx(Button, {
+    disabled: disabled,
+    onClick: () => onClick(new CalendarDate(today.getFullYear(), today.getMonth() + 1, today.getDate())),
+    variant: 'ghost',
+    style: {
+      marginLeft: 16
+    },
+    children: "Today"
+  });
+}
+const HeaderActions = styled.div.withConfig({
+  displayName: "CalendarHeader__HeaderActions",
+  componentId: "sc-kuy15-1"
+})(["display:flex;align-items:center;width:100%;"]);
+
+/**
+ * The default header for the calendar components if no custom header is provided
+ */
+function CalendarHeader({
+  state,
+  title,
+  previousMonthDisabled,
+  nextMonthDisabled,
+  showYearPicker,
+  setShowYearPicker
+}) {
+  return /*#__PURE__*/jsx(HeaderWrapper, {
+    children: /*#__PURE__*/jsxs(HeaderActions, {
+      children: [/*#__PURE__*/jsx(Button, {
+        variant: 'ghost_icon',
+        "aria-label": 'Previous month',
+        disabled: previousMonthDisabled || showYearPicker,
+        onClick: () => state.focusPreviousPage(),
+        children: /*#__PURE__*/jsx(Icon, {
+          data: chevron_left
+        })
+      }), /*#__PURE__*/jsx("span", {
+        style: {
+          flex: '1 1 auto'
+        }
+      }), /*#__PURE__*/jsxs(Button, {
+        onClick: () => setShowYearPicker(!showYearPicker),
+        "data-testid": 'heading',
+        "aria-live": 'polite',
+        variant: 'ghost',
+        style: {
+          fontSize: tokens.typography.heading.h5.fontSize,
+          textTransform: 'capitalize'
+        },
+        children: [title, /*#__PURE__*/jsx(Icon, {
+          data: showYearPicker ? chevron_up : chevron_down
+        })]
+      }), /*#__PURE__*/jsx(TodayPicker, {
+        disabled: showYearPicker,
+        onClick: v => state.setFocusedDate(v)
+      }), /*#__PURE__*/jsx("span", {
+        style: {
+          flex: '1 1 auto'
+        }
+      }), /*#__PURE__*/jsx(Button, {
+        variant: 'ghost_icon',
+        onClick: () => state.focusNextPage(),
+        disabled: nextMonthDisabled || showYearPicker,
+        "aria-label": 'Next month',
+        children: /*#__PURE__*/jsx(Icon, {
+          data: chevron_right
+        })
+      })]
+    })
+  });
+}
+
+export { CalendarHeader };

package/dist/esm/components/Datepicker/calendars/CalendarWrapper.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+const CalendarWrapper = styled.div.withConfig({
+  displayName: "CalendarWrapper",
+  componentId: "sc-14hqwiu-0"
+})(["display:grid;grid-gap:16px;max-height:80vh;width:max-content;max-width:560px;overflow:auto;"]);
+
+export { CalendarWrapper };

package/dist/esm/components/Datepicker/calendars/RangeCalendar.js

@@ -0,0 +1,72 @@
+import { useLocale, useRangeCalendar } from 'react-aria';
+import { useRangeCalendarState } from '@react-stately/calendar';
+import { createCalendar } from '@internationalized/date';
+import { CalendarGrid } from './CalendarGrid.js';
+import { forwardRef, useState } from 'react';
+import { CalendarHeader } from './CalendarHeader.js';
+import { Popover } from '../../Popover/index.js';
+import { CalendarWrapper } from './CalendarWrapper.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const RangeCalendar = /*#__PURE__*/forwardRef(({
+  Header,
+  Footer,
+  ...props
+}, ref) => {
+  const [showYearPicker, setShowYearPicker] = useState(false);
+  const {
+    locale
+  } = useLocale();
+  const state = useRangeCalendarState({
+    ...props,
+    locale,
+    createCalendar
+  });
+  const {
+    calendarProps,
+    title
+  } = useRangeCalendar(props, state, ref);
+  return /*#__PURE__*/jsxs(CalendarWrapper, {
+    ...calendarProps,
+    ref: ref,
+    children: [/*#__PURE__*/jsx(Popover.Header, {
+      children: Header ? /*#__PURE__*/jsx(Header, {
+        month: state.focusedDate.month,
+        state: state,
+        setMonth: month => state.setFocusedDate(state.focusedDate.set({
+          month
+        })),
+        setYear: year => state.setFocusedDate(state.focusedDate.set({
+          year
+        })),
+        year: state.focusedDate.year
+      }) : /*#__PURE__*/jsx(CalendarHeader, {
+        state: state,
+        title: title,
+        setShowYearPicker: setShowYearPicker,
+        showYearPicker: showYearPicker
+      })
+    }), /*#__PURE__*/jsx(Popover.Content, {
+      children: /*#__PURE__*/jsx(CalendarGrid, {
+        state: state,
+        setShowYearPicker: setShowYearPicker,
+        showYearPicker: showYearPicker
+      })
+    }), Footer && /*#__PURE__*/jsx(Popover.Actions, {
+      children: /*#__PURE__*/jsx(Footer, {
+        month: state.focusedDate.month,
+        state: state,
+        setMonth: month => state.setFocusedDate(state.focusedDate.set({
+          month
+        })),
+        setYear: year => state.setFocusedDate(state.focusedDate.set({
+          year
+        })),
+        year: state.focusedDate.year
+      })
+    })]
+  });
+});
+RangeCalendar.displayName = 'RangeCalendar';
+
+export { RangeCalendar };

package/dist/esm/components/Datepicker/calendars/YearGrid.js

@@ -0,0 +1,90 @@
+import styled from 'styled-components';
+import { tokens } from '@equinor/eds-tokens';
+import { FocusScope, useFocusManager } from 'react-aria';
+import { jsx } from 'react/jsx-runtime';
+
+// Disable no-autofocus - it's not the native autofocus attribute, but react-aria's autoFocus prop
+/* eslint-disable jsx-a11y/no-autofocus */
+const Grid = styled.div.withConfig({
+  displayName: "YearGrid__Grid",
+  componentId: "sc-1l9jho8-0"
+})(["display:grid;grid-template-columns:repeat(6,1fr);grid-gap:8px;margin:8px;"]);
+const GridColumn = styled.button.withConfig({
+  displayName: "YearGrid__GridColumn",
+  componentId: "sc-1l9jho8-1"
+})(["background-color:transparent;outline:none;border:none;display:flex;justify-content:center;cursor:pointer;padding:8px;font-size:", ";font-family:", ";font-weight:", ";line-height:", ";color:", ";border-radius:999px;", ";&:hover{background-color:#f0f0f0;}&:focus{outline:2px dashed ", ";}"], tokens.typography.navigation.button.fontSize, tokens.typography.navigation.button.fontFamily, tokens.typography.navigation.button.fontWeight, tokens.typography.navigation.button.lineHeight, tokens.colors.text.static_icons__default.rgba, ({
+  $active
+}) => $active ? `background-color: ${tokens.colors.interactive.primary__selected_highlight.rgba}` : '', tokens.colors.interactive.primary__resting.rgba);
+const GridFocusManager = ({
+  year: selectedYear,
+  setFocusedYear
+}) => {
+  const focusManager = useFocusManager();
+  const onKeyDown = e => {
+    const target = e.currentTarget;
+    const parent = target.parentElement;
+    switch (e.key) {
+      case 'ArrowRight':
+        e.preventDefault();
+        focusManager.focusNext({
+          wrap: true
+        });
+        break;
+      case 'ArrowLeft':
+        e.preventDefault();
+        focusManager.focusPrevious({
+          wrap: true
+        });
+        break;
+      case 'ArrowDown':
+        {
+          e.preventDefault();
+          const selfIndex = Array.from(parent.children).indexOf(target);
+          const focusElement = Array.from(parent.children).at(selfIndex + 5);
+          focusManager.focusNext({
+            from: focusElement
+          });
+          break;
+        }
+      case 'ArrowUp':
+        {
+          e.preventDefault();
+          const selfIndex = Array.from(parent.children).indexOf(target);
+          const focusElement = Array.from(parent.children).at(selfIndex - 5);
+          focusManager.focusPrevious({
+            from: focusElement
+          });
+          break;
+        }
+    }
+  };
+  const years = Array.from({
+    length: 36
+  }, (_, i) => i + (selectedYear - 30 / 2));
+  return years.map(year => /*#__PURE__*/jsx(GridColumn, {
+    $active: selectedYear === year,
+    onKeyDown: onKeyDown,
+    onClick: () => setFocusedYear(year),
+    "aria-label": `Set year to ${year}`,
+    tabIndex: 0,
+    children: year
+  }, year));
+};
+const YearGrid = ({
+  setFocusedYear,
+  year: selectedYear
+}) => {
+  return /*#__PURE__*/jsx(Grid, {
+    children: /*#__PURE__*/jsx(FocusScope, {
+      contain: true,
+      restoreFocus: true,
+      autoFocus: true,
+      children: /*#__PURE__*/jsx(GridFocusManager, {
+        year: selectedYear,
+        setFocusedYear: setFocusedYear
+      })
+    })
+  });
+};
+
+export { YearGrid };

package/dist/esm/components/Datepicker/fields/DateField.js

@@ -0,0 +1,40 @@
+import { useDateFieldState } from '@react-stately/datepicker';
+import { forwardRef, useRef } from 'react';
+import { InputFieldWrapper } from './FieldWrapper.js';
+import { DateFieldSegments } from './DateFieldSegments.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+/**
+ * Datefield is the input field used in {@link DatePicker} to type in a single date.
+ * Encapsulates styling / functionality for typing a date
+ */
+const DateField = /*#__PURE__*/forwardRef(function ({
+  fieldProps,
+  groupProps,
+  variant,
+  dateCreateProps,
+  ...props
+}, ref) {
+  const state = useDateFieldState(dateCreateProps);
+  const inputRef = useRef(null);
+  return /*#__PURE__*/jsxs(InputFieldWrapper, {
+    ...groupProps,
+    readonly: fieldProps.isReadOnly,
+    disabled: state.isDisabled,
+    color: state.isInvalid ? 'warning' : variant,
+    ref: ref,
+    className: `field ${state.isInvalid ? 'invalid' : 'valid'}`,
+    children: [/*#__PURE__*/jsx(DateFieldSegments, {
+      ...state,
+      ...fieldProps,
+      ref: inputRef
+    }), /*#__PURE__*/jsx("span", {
+      style: {
+        flex: '1 1 auto'
+      }
+    }), props.rightAdornments]
+  });
+});
+DateField.displayName = 'DateField';
+
+export { DateField };

package/dist/esm/components/Datepicker/fields/DateFieldSegments.js

@@ -0,0 +1,43 @@
+import { useDateFieldState } from '@react-stately/datepicker';
+import { useLocale, useDateField } from 'react-aria';
+import { createCalendar } from '@internationalized/date';
+import { DateSegment } from './DateSegment.js';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// In some cases we need to use the index as key
+/* eslint-disable react/no-array-index-key */
+/**
+ * A field that wraps segments for inputting a date / date-time
+ */
+const DateFieldSegments = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    locale
+  } = useLocale();
+  const state = useDateFieldState({
+    ...props,
+    locale,
+    createCalendar
+  });
+  const {
+    fieldProps
+  } = useDateField({
+    ...props,
+    // Type-casting as react-aria expects string | ReactNode, but we only pass strings
+    'aria-label': props.label ?? 'Date input field'
+  }, state, ref);
+  return /*#__PURE__*/jsx("div", {
+    ...fieldProps,
+    style: {
+      display: 'flex'
+    },
+    ref: ref,
+    children: state.segments.map((segment, i) => /*#__PURE__*/jsx(DateSegment, {
+      segment: segment,
+      state: state
+    }, i))
+  });
+});
+DateFieldSegments.displayName = 'SingleDateField';
+
+export { DateFieldSegments };

package/dist/esm/components/Datepicker/fields/DateRangeField.js

@@ -0,0 +1,43 @@
+import { forwardRef, useRef } from 'react';
+import { InputFieldWrapper } from './FieldWrapper.js';
+import { DateFieldSegments } from './DateFieldSegments.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Typography } from '../../Typography/Typography.js';
+
+/**
+ * DateRangeField is the input field used in {@link DateRangePicker} to type in a date range.
+ */
+const DateRangeField = /*#__PURE__*/forwardRef(function (props, ref) {
+  const fromRef = useRef(null);
+  const toRef = useRef(null);
+  return /*#__PURE__*/jsxs(InputFieldWrapper, {
+    ref: ref,
+    readonly: props.startFieldProps.isReadOnly,
+    className: "field",
+    disabled: props.disabled,
+    color: props.variant,
+    ...props.groupProps,
+    children: [/*#__PURE__*/jsx(DateFieldSegments, {
+      ...props.startFieldProps,
+      ref: fromRef
+    }), /*#__PURE__*/jsx(Typography, {
+      as: 'span',
+      variant: 'text',
+      group: 'input',
+      style: {
+        padding: '0 4px'
+      },
+      children: "\u2014"
+    }), /*#__PURE__*/jsx(DateFieldSegments, {
+      ...props.endFieldProps,
+      ref: toRef
+    }), /*#__PURE__*/jsx("span", {
+      style: {
+        flex: '1 1 auto'
+      }
+    }), props.rightAdornments]
+  });
+});
+DateRangeField.displayName = 'DateRangeField';
+
+export { DateRangeField };

package/dist/esm/components/Datepicker/fields/DateSegment.js

@@ -0,0 +1,47 @@
+import { useRef } from 'react';
+import { useDateSegment } from 'react-aria';
+import styled from 'styled-components';
+import { tokens } from '@equinor/eds-tokens';
+import { jsx } from 'react/jsx-runtime';
+
+const Segment = styled.div.withConfig({
+  displayName: "DateSegment__Segment",
+  componentId: "sc-19uidpx-0"
+})(["color:", ";font-family:", ";&:focus-visible{outline:2px solid ", ";background-color:", ";}", ""], tokens.typography.input.text.color, tokens.typography.input.text.fontFamily, tokens.colors.interactive.primary__resting.rgba, tokens.colors.ui.background__medium.rgba, ({
+  $disabled
+}) => $disabled && `color: ${tokens.colors.interactive.disabled__text.rgba};`);
+
+/**
+ * DateSegment is used to represent a single segment of a date in the DateField (i.e. day, month, year)
+ */
+function DateSegment({
+  segment,
+  state
+}) {
+  const ref = useRef(null);
+  const {
+    segmentProps
+  } = useDateSegment(segment, state, ref);
+  return /*#__PURE__*/jsx(Segment, {
+    ...segmentProps,
+    $invalid: state.isInvalid,
+    $disabled: state.isDisabled,
+    $placeholder: segment.isPlaceholder,
+    style: {
+      padding: segment.type === 'literal' ? '0 2px' : '0'
+    },
+    onKeyDown: e => {
+      if (e.code === 'Enter' || e.code === 'Space') {
+        e.stopPropagation();
+        e.preventDefault();
+      } else if (segmentProps.onKeyDown) {
+        segmentProps.onKeyDown(e);
+      }
+    },
+    ref: ref,
+    className: `segment ${segment.isPlaceholder ? 'placeholder' : ''}`,
+    children: segment.isPlaceholder || segment.type === 'literal' ? segment.text : segment.text.padStart(segment.type === 'year' ? 4 : 2, '0')
+  });
+}
+
+export { DateSegment };

package/dist/esm/components/Datepicker/fields/FieldWrapper.js

@@ -0,0 +1,136 @@
+import styled from 'styled-components';
+import { tokens } from '@equinor/eds-tokens';
+import { forwardRef, useEffect } from 'react';
+import { Popover } from '../../Popover/index.js';
+import { filterDOMProps } from '@react-aria/utils';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { InputWrapper } from '../../InputWrapper/InputWrapper.js';
+import { useEds } from '../../EdsProvider/eds.context.js';
+
+const getVariant = variant => {
+  if (variant === 'error') {
+    return tokens.colors.interactive.danger__resting.rgba;
+  }
+  if (variant === 'success') {
+    return tokens.colors.interactive.success__resting.rgba;
+  }
+  if (variant === 'warning') {
+    return tokens.colors.interactive.warning__resting.rgba;
+  }
+  return tokens.colors.interactive.primary__resting.rgba;
+};
+const getVariantText = variant => {
+  if (variant === 'error') {
+    return tokens.colors.interactive.danger__text.rgba;
+  }
+  if (variant === 'success') {
+    return tokens.colors.interactive.success__text.rgba;
+  }
+  if (variant === 'warning') {
+    return tokens.colors.interactive.warning__text.rgba;
+  }
+  return tokens.typography.input.text.color;
+};
+const StyledInputFieldWrapper = styled.div.withConfig({
+  displayName: "FieldWrapper__StyledInputFieldWrapper",
+  componentId: "sc-1h0kqs9-0"
+})(["display:flex;align-items:center;background-color:", ";height:", ";padding:0 8px;", " ", " color:", ";cursor:default;"], tokens.colors.ui.background__light.rgba, ({
+  $density
+}) => $density === 'compact' ? '24px' : '36px', ({
+  $variant,
+  $disabled,
+  $readonly
+}) => {
+  if (!$variant && !$readonly) {
+    return `&:focus-within:not(.invalid) {
+    outline: 2px solid
+      ${tokens.colors.interactive.primary__resting.rgba};
+  }
+
+  ${!$disabled && `&:not(:focus-within) {
+    box-shadow: inset 0 -1px 0 0 ${tokens.colors.text.static_icons__tertiary.rgba};`}
+  }
+  `;
+  }
+  return `outline: 2px solid ${getVariant($variant)};`;
+}, ({
+  $readonly
+}) => {
+  return $readonly && `background-color: ${tokens.colors.ui.background__default.rgba};
+      outline: none;`;
+}, p => getVariantText(p.$variant));
+/**
+ * Applies styles around the date input fields (density, color etc.)
+ */
+const InputFieldWrapper = /*#__PURE__*/forwardRef(({
+  children,
+  color,
+  disabled,
+  readonly,
+  ...props
+}, ref) => {
+  const {
+    density
+  } = useEds();
+  // As the props returned are designed for react-aria, some of them are not valid DOM props (i.e. onPress).
+  // The filterDOMProps-method strips out the invalid props, but it also removes event listeners due to casing
+  const filteredProps = filterDOMProps(props);
+  // filterDOMProps also strips event handlers
+  const eventHandlers = Object.keys(props).filter(k => k.startsWith('on')).reduce((a, b) => ({
+    ...a,
+    [b]: props[b]
+  }), {});
+  return /*#__PURE__*/jsx(StyledInputFieldWrapper, {
+    ref: ref,
+    $density: density,
+    $variant: color,
+    $disabled: disabled ?? false,
+    $readonly: readonly ?? false,
+    ...filteredProps,
+    ...eventHandlers,
+    children: children
+  });
+});
+const FieldWrapper = /*#__PURE__*/forwardRef(({
+  children,
+  pickerRef,
+  calendar,
+  isOpen,
+  setIsOpen,
+  label,
+  readonly,
+  ...props
+}, ref) => {
+  useEffect(() => {
+    if (isOpen === false) {
+      // Focus the first segment in the input field
+      const segment = ref.current?.querySelector('.segment');
+      segment?.focus();
+    }
+  }, [ref, isOpen, pickerRef]);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(InputWrapper, {
+      readOnly: readonly,
+      label: label,
+      onKeyDownCapture: event => {
+        const isIconTarget = event.target instanceof SVGSVGElement;
+        if (!isIconTarget && (event.code === 'Space' || event.code === 'Enter')) {
+          setIsOpen(true);
+        }
+      },
+      ...props,
+      children: children
+    }), /*#__PURE__*/jsx(Popover, {
+      open: isOpen ?? false,
+      onClose: () => setIsOpen(false),
+      anchorEl: ref.current,
+      placement: 'bottom-start',
+      withinPortal: true,
+      children: calendar
+    })]
+  });
+});
+InputFieldWrapper.displayName = 'InputFieldWrapper';
+FieldWrapper.displayName = 'FieldWrapper';
+
+export { FieldWrapper, InputFieldWrapper };

package/dist/esm/components/Datepicker/fields/Toggle.js

@@ -0,0 +1,61 @@
+import { Icon } from '../../Icon/index.js';
+import { close } from '@equinor/eds-icons';
+import { Button } from '../../Button/Button.js';
+import styled from 'styled-components';
+import { filterDOMProps } from '@react-aria/utils';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+const StyledButton = styled(Button).withConfig({
+  displayName: "Toggle__StyledButton",
+  componentId: "sc-1bwqcj7-0"
+})(["height:24px;width:24px;"]);
+
+/**
+ * Toggle component encapsulates the reset and open calendar buttons
+ */
+const Toggle = ({
+  reset,
+  setOpen,
+  open,
+  icon,
+  disabled,
+  buttonProps,
+  valueString,
+  readonly
+}) => {
+  return readonly || disabled ? null : /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(StyledButton, {
+      disabled: disabled,
+      variant: 'ghost_icon',
+      "aria-label": 'Reset',
+      onClick: () => {
+        reset();
+      },
+      onKeyDown: e => {
+        if (e.code === 'Enter' || e.code === 'Space') {
+          e.preventDefault();
+          e.stopPropagation();
+          reset();
+        }
+      },
+      children: /*#__PURE__*/jsx(Icon, {
+        data: close
+      })
+    }), /*#__PURE__*/jsx(StyledButton, {
+      ...filterDOMProps(buttonProps),
+      disabled: disabled,
+      "aria-label": valueString ? `Change date, ${valueString}` : `Change date`,
+      variant: 'ghost_icon',
+      onClick: e => {
+        e.preventDefault();
+        e.stopPropagation();
+        setOpen(!open);
+      },
+      children: /*#__PURE__*/jsx(Icon, {
+        data: icon
+      })
+    })]
+  });
+};
+
+export { Toggle };

package/dist/esm/components/Datepicker/utils/context.js

@@ -0,0 +1,21 @@
+import { createContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+const intl = new Intl.DateTimeFormat();
+const defaultTimezone = intl.resolvedOptions().timeZone;
+const DatePickerContext = /*#__PURE__*/createContext({
+  timezone: defaultTimezone
+});
+const DatePickerProvider = ({
+  timezone,
+  children
+}) => {
+  return /*#__PURE__*/jsx(DatePickerContext.Provider, {
+    value: {
+      timezone: timezone ?? defaultTimezone
+    },
+    children: children
+  });
+};
+
+export { DatePickerProvider, defaultTimezone };

package/dist/esm/components/Datepicker/utils/get-calendar-date.js

@@ -0,0 +1,8 @@
+import { toCalendarDateTime, fromDate, toCalendarDate } from '@internationalized/date';
+
+const getCalendarDate = (value, timezone, showTimeInput = false) => {
+  if (!value) return null;
+  return showTimeInput ? toCalendarDateTime(fromDate(value, timezone)) : toCalendarDate(fromDate(value, timezone));
+};
+
+export { getCalendarDate };

package/dist/esm/components/Datepicker/utils/useConvertedValidationFunctions.js

@@ -0,0 +1,20 @@
+import { toCalendarDate, fromDate } from '@internationalized/date';
+import { defaultTimezone } from './context.js';
+
+const useConvertedValidationFunctions = (minValue, maxValue, isDateUnavailable, timezone) => {
+  const tz = timezone ?? defaultTimezone;
+  const _minValue = minValue ? toCalendarDate(fromDate(minValue, tz)) : undefined;
+  const _maxValue = maxValue ? toCalendarDate(fromDate(maxValue, tz)) : undefined;
+  const _minTimeValue = minValue ? fromDate(minValue, tz) : undefined;
+  const _maxTimeValue = maxValue ? fromDate(maxValue, tz) : undefined;
+  const _isDateUnavailable = value => isDateUnavailable ? isDateUnavailable(value.toDate(tz)) : false;
+  return {
+    _minValue,
+    _maxValue,
+    _isDateUnavailable,
+    _minTimeValue,
+    _maxTimeValue
+  };
+};
+
+export { useConvertedValidationFunctions };