@coinbase/cds-common 0.0.0 → 8.13.2

package/esm/color/getBlendedColor.js

@@ -0,0 +1,202 @@
+import { color } from 'd3-color';
+import { blendColors } from './blendColors';
+import { getLuminance } from './getLuminance';
+
+/**
+ * Configuration for the color scheme.
+ *
+ * For each color scheme, it has an underlay color and a high contrast luminance threshold.
+ * The underlay color is the color that is used to blend with the overlay color.
+ * The high contrast luminance threshold is the luminance value, above (in dark color scheme)
+ * or below (in light color scheme) which the overlay color is considered in high contrast to the underlay color.
+ */
+
+const defaultColorBlendConfigByColorScheme = {
+  light: {
+    underlayColor: '#fff',
+    highContrastLuminanceThreshold: 0.11
+  },
+  dark: {
+    underlayColor: '#000',
+    highContrastLuminanceThreshold: 0.4
+  }
+};
+
+/**
+ * The type of easing function to use for opacity adjustment.
+ * - `linear`: A straight linear progression.
+ * - `ease-out`: An "ease-out" curve, where the adjustment starts fast and slows down as the luminance delta gets larger. This is the default.
+ * - `ease-in`: An "ease-in" curve, where the adjustment starts slow and speeds up as the luminance delta.
+ */
+
+/**
+ * Configuration for fine-tuning the automatic blend opacity adjustment.
+ */
+
+const defaultBlendOpacityAdjustmentConfig = {
+  noAdjustmentLuminanceDelta: 0.2,
+  adjustmentStrengthRatio: 0.75,
+  adjustmentEasingFunction: 'ease-out'
+};
+
+/**
+ * Adjusts the blend opacity based on the luminance difference between the overlay and underlay colors.
+ * When the luminance difference is large (e.g., a light overlay color on a dark underlay color), the blending
+ * effect is toned down (opacity of the overlay color is increased). This makes the resulting color variation more subtle
+ * and preserves the overlay color's character.
+ *
+ * Conversely, when the luminance difference is small (less than the `noAdjustmentLuminanceDelta`), the original blend opacity is used to allow
+ * for a more pronounced blending effect. This ensures that colors with similar brightness to the
+ * background still produce a noticeable visual change.
+ */
+const getAdjustedBlendOpacity = _ref => {
+  let {
+    overlayColorLuminance,
+    underlayColorLuminance,
+    blendOpacity,
+    blendOpacityAdjustmentConfig: {
+      noAdjustmentLuminanceDelta,
+      adjustmentStrengthRatio,
+      adjustmentEasingFunction
+    } = defaultBlendOpacityAdjustmentConfig
+  } = _ref;
+  // Calculate absolute difference in luminance (0 to 1)
+  const luminanceDelta = Math.abs(overlayColorLuminance - underlayColorLuminance);
+
+  // If luminance difference is below threshold, return original blend opacity unchanged
+  if (luminanceDelta < noAdjustmentLuminanceDelta) {
+    return blendOpacity;
+  }
+
+  // Normalize the luminance difference to a 0-to-1 scale. This ensures the adjustment
+  // starts from 0 and increases smoothly and predictably as the luminance difference
+  // surpasses the threshold.
+  // Example: if noAdjustmentLuminanceDelta is 0.2 and luminanceDelta is 0.6,
+  // the raw difference is 0.4. The total possible adjustment range is 0.8 (from 0.2 to 1.0).
+  // The normalizedDiff is 0.4 / 0.8 = 0.5, meaning we are 50% of the way through the adjustable range.
+  // This provides a consistent 0-1 scale for the easing curve.
+  const normalizedDiff = (luminanceDelta - noAdjustmentLuminanceDelta) / (1 - noAdjustmentLuminanceDelta);
+
+  // Apply the selected easing to the normalized difference for gentler scaling
+  let scaleFactor;
+  switch (adjustmentEasingFunction) {
+    case 'linear':
+      scaleFactor = normalizedDiff;
+      break;
+    case 'ease-in':
+      scaleFactor = Math.pow(normalizedDiff, 2);
+      break;
+    case 'ease-out':
+    default:
+      scaleFactor = Math.pow(normalizedDiff, 0.5);
+      break;
+  }
+  const scale = scaleFactor * adjustmentStrengthRatio;
+
+  // Calculate how much we can increase the blendOpacity (cannot exceed 1.0)
+  const maxIncrease = 1 - blendOpacity;
+  const blendStrengthIncrease = maxIncrease * scale;
+
+  // Return adjusted blend opacity, increased based on luminance difference
+  return blendOpacity + blendStrengthIncrease;
+};
+
+/**
+ * Configuration for the `getBlendedColor` function.
+ */
+
+/**
+ * Creates subtle color variations by blending overlay color with underlay color based on the input color's luminance
+ * and current theme. Automatically optimizes for contrast unless disabled.
+ *
+ * @param config - The configuration for the function.
+ * @returns CSS color string with the blended result.
+ *
+ * @example
+ * ```typescript
+ * // Light theme
+ * const lightVariation = getBlendedColor({
+ *   overlayColor: '#0052ff',
+ *   blendOpacity: 0.88,
+ *   colorScheme: 'light'
+ * });
+ *
+ * // Dark theme
+ * const darkVariation = getBlendedColor({
+ *   overlayColor: '#0052ff',
+ *   blendOpacity: 0.82,
+ *   colorScheme: 'dark'
+ * });
+ *
+ * // Skip contrast optimization
+ * const simpleVariation = getBlendedColor({
+ *   overlayColor: '#0052ff',.
+ *   blendOpacity: 0.75,
+ *   colorScheme: 'light',
+ *   skipContrastOptimization: true
+ * });
+ * ```
+ */
+export const getBlendedColor = _ref2 => {
+  var _getLuminance, _getLuminance2;
+  let {
+    overlayColor,
+    blendOpacity,
+    blendOpacityAdjustmentConfig,
+    colorScheme,
+    configByColorScheme = defaultColorBlendConfigByColorScheme,
+    skipContrastOptimization = false
+  } = _ref2;
+  // Special cases: these color values cannot be analyzed or blended, return as-is
+  if (overlayColor === 'currentColor' || overlayColor === 'transparent') {
+    return overlayColor;
+  }
+  const overlayColorRgba = color(overlayColor);
+  if (overlayColorRgba === null) {
+    return overlayColor;
+  }
+
+  // Preserve original opacity for semi-transparent overlay colors (e.g., bgLine, bgLineHeavy),
+  // which will be re-applied post-blending.
+  const overlayColorOpacity = overlayColorRgba.opacity;
+  // Handle fully transparent colors (alpha = 0)
+  if (overlayColorOpacity === 0) {
+    return 'transparent';
+  }
+  const overlayColorLuminance = (_getLuminance = getLuminance(overlayColor)) !== null && _getLuminance !== void 0 ? _getLuminance : 1;
+  const oppositeColorScheme = colorScheme === 'dark' ? 'light' : 'dark';
+
+  // Determine if overlay color has high contrast with the theme background
+  // High contrast overlays use current scheme underlay, low contrast overlays use opposite scheme underlay
+  const isHighContrast = colorScheme === 'dark' ? overlayColorLuminance >= configByColorScheme.dark.highContrastLuminanceThreshold // Light overlays on dark background = high contrast
+  : overlayColorLuminance <= configByColorScheme.light.highContrastLuminanceThreshold; // Dark overlays on light background = high contrast
+
+  const shouldUseCurrentColorScheme = skipContrastOptimization || isHighContrast;
+  // Choose underlay color from the current scheme when skipping optimization or high-contrast,
+  // otherwise use the one from the opposite scheme.
+  const underlayColor = shouldUseCurrentColorScheme ? configByColorScheme[colorScheme].underlayColor : configByColorScheme[oppositeColorScheme].underlayColor;
+  const underlayColorLuminance = (_getLuminance2 = getLuminance(underlayColor)) !== null && _getLuminance2 !== void 0 ? _getLuminance2 : 1;
+
+  // Automatically adjust blend opacity based on luminance difference for optimal visual contrast
+  const adjustedBlendOpacity = getAdjustedBlendOpacity({
+    overlayColorLuminance,
+    underlayColorLuminance,
+    blendOpacity,
+    blendOpacityAdjustmentConfig
+  });
+
+  // Create adjusted overlay color with the calculated blend strength
+  const overlayColorWithAdjustedBlendOpacity = overlayColorRgba.copy({
+    opacity: adjustedBlendOpacity
+  });
+  const blendedRgb = blendColors({
+    underlayColor,
+    overlayColor: overlayColorWithAdjustedBlendOpacity
+  });
+  if (overlayColorOpacity < 1) {
+    return blendedRgb.copy({
+      opacity: overlayColorOpacity
+    }).formatRgb();
+  }
+  return blendedRgb.formatRgb();
+};

package/esm/color/getContrastRatio.js

@@ -0,0 +1,11 @@
+import { getLuminance } from './getLuminance';
+/**
+ * The Web Content Accessibility Guidelines (WCAG) include convenient quantitative recommendations for making text and graphics accessible based on the minimum acceptable contrast of foreground against background.
+ * For example, black on yellow has a high contrast ratio (19.56) and therefore should be easier to read, whereas blue on blue is low contrast (2.31) and harder to read.
+ */
+export const getContrastRatio = (background, foreground) => {
+  const backgroundLuminance = getLuminance(background);
+  const foregroundLuminance = getLuminance(foreground);
+  if (backgroundLuminance === undefined || foregroundLuminance === undefined) return 1;
+  return (Math.max(backgroundLuminance, foregroundLuminance) + 0.05) / (Math.min(backgroundLuminance, foregroundLuminance) + 0.05);
+};

package/esm/color/getLuminance.js

@@ -0,0 +1,28 @@
+import { color } from 'd3-color';
+
+/**
+ * Relative luminance is the relative brightness of any point in an RGB colorspace, normalized to 0 for darkest black and 1 for lightest white.
+ *
+ * Edge cases:
+ * - Returns undefined for invalid color values or non-parseable color strings
+ * - HSL colors outside the RGB gamut will have their RGB components clamped to [0,255], which may not preserve the original color relationships
+ * - Special color keywords like 'currentColor' or 'transparent' will return undefined
+ * - CSS Variables or dynamic values cannot be calculated
+ *
+ * @see https://contrastchecker.online/color-relative-luminance-calculator
+ */
+export const getLuminance = value => {
+  var _color;
+  const rgbObject = (_color = color(value)) === null || _color === void 0 ? void 0 : _color.rgb();
+  if (!rgbObject) return undefined;
+  const {
+    r,
+    g,
+    b
+  } = rgbObject;
+  const red = Number.isNaN(r) ? 0 : r;
+  const green = Number.isNaN(g) ? 0 : g;
+  const blue = Number.isNaN(b) ? 0 : b;
+  const [redLinear, greenLinear, blueLinear] = [red / 255, green / 255, blue / 255].map(item => item <= 0.04045 ? item / 12.92 : ((item + 0.055) / 1.055) ** 2.4);
+  return 0.2126 * redLinear + 0.7152 * greenLinear + 0.0722 * blueLinear;
+};

package/esm/color/isAccessibleColor.js

@@ -0,0 +1,31 @@
+import { getContrastRatio } from './getContrastRatio';
+const contrastRatioMap = {
+  minimum: {
+    normalText: 4.5,
+    largeText: 3,
+    graphic: 3
+  },
+  enhanced: {
+    normalText: 7,
+    largeText: 4.5,
+    graphic: 3
+  }
+};
+/**
+ * isAccessibleColor will default to using "minimum" contrast ratios
+ * Contrast ratios can range from 1 to 21 (commonly written 1:1 to 21:1).
+ * 7 - "enhanced" contrast for regular sized text under WCAG 2.0 1.4.6 (Level AAA)
+ * 4.5 - minimum contrast for regular sized text under WCAG 2.0 1.4.3 (Level AA)
+ * 3 - minimum contrast for "large scale" text (18 pt or 14 pt bold, or larger) under WCAG 2.0 1.4.3 (Level AA)
+ * https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
+ */
+export const isAccessibleColor = _ref => {
+  let {
+    background,
+    foreground,
+    usage,
+    enhanced
+  } = _ref;
+  const ratio = getContrastRatio(background, foreground);
+  return ratio >= contrastRatioMap[enhanced ? 'enhanced' : 'minimum'][usage];
+};

package/esm/color/isLightOrDarkColor.js

@@ -0,0 +1,21 @@
+import { color } from 'd3-color';
+export const isLightOrDarkColor = value => {
+  var _color;
+  const rgbObject = (_color = color(value)) === null || _color === void 0 ? void 0 : _color.rgb();
+  if (rgbObject) {
+    const {
+      r: red,
+      g: green,
+      b: blue
+    } = rgbObject;
+    // HSP (Highly Sensitive Poo) equation from http://alienryderflex.com/hsp.html
+    const hsp = Math.sqrt(0.299 * (red * red) + 0.587 * (green * green) + 0.114 * (blue * blue));
+    // Using the HSP value, determine whether the color is light or dark
+    if (hsp > 127.5) {
+      return 'light';
+    }
+    return 'dark';
+  }
+  // Fallback to light luminosity
+  return 'light';
+};

package/esm/color/overrideAlpha.js

@@ -0,0 +1,15 @@
+import { color } from 'd3-color';
+
+/**
+ * Modify the alpha value of an rgba string
+ * @param color - valid color value, i.e. `#ffffff` or`rgba(255, 255, 255, 1)`
+ * @param newOpacity - 0.5
+ * @returns rgbaString - `rgba(255, 255, 255, 0.5)`
+ */
+export const overrideAlpha = (value, opacity) => {
+  var _d3Color$copy$formatR;
+  const d3Color = color(value);
+  return (_d3Color$copy$formatR = d3Color === null || d3Color === void 0 ? void 0 : d3Color.copy({
+    opacity
+  }).formatRgb()) !== null && _d3Color$copy$formatR !== void 0 ? _d3Color$copy$formatR : value;
+};

package/esm/core/theme.js

@@ -0,0 +1,26 @@
+/**
+ * These are the core CDS Theme variable types used across mobile and web.
+ */
+/* eslint-disable no-restricted-syntax, @typescript-eslint/no-empty-object-type */
+/**
+ * This utility type makes the final intellisense into human-redable literal values.
+ */
+/**
+ * This is the default set of Theme variables available to all CDS components.
+ * Only the interface keys are used to define the available Theme variables.
+ * The interface values are not used.
+ * @danger You probably don't want to use this namespace directly, unless you are
+ * referring explicitly to ONLY the default CDS variables. Otherwise, you probably
+ * want to use the ThemeVars namespace instead, which inherits from this namespace.
+ * @docs http://cds.coinbase.com/getting-started/theming/#themevars-namespace
+ */
+export let ThemeVarsDefault;
+/**
+ * This is the complete set of Theme variables available to all CDS components.
+ * Combines all variables from the ThemeVarsDefault and ThemeVarsExtended
+ * namespaces. You can use this namespace to read all available Theme variables.
+ * You can use the ThemeVarsExtended namespace to extend this namespace with new
+ * variables.
+ * @docs http://cds.coinbase.com/getting-started/theming/#themevars-namespace
+ */
+export let ThemeVars;

package/esm/dates/DateInputValidationError.js

@@ -0,0 +1,7 @@
+export class DateInputValidationError extends Error {
+  constructor(type, message) {
+    super(message);
+    this.name = 'DateInputValidationError';
+    this.type = type;
+  }
+}

package/esm/dates/IntlDateFormat.js

@@ -0,0 +1,66 @@
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
+ * IntlDateFormat is a utility class that uses the Intl.DateTimeFormat API to determine the date format for a given locale.
+ * It can be used to parse and format date strings based on the locale's date format.
+ * @param locale A valid JavaScript Intl locale used to determine the date format.
+ * @param separator Character used to separate values in the date format, e.g. the forward slash in "MM/DD/YYYY".
+ * @example
+ * const intlDateFormat = new IntlDateFormat({ locale: 'en-US', separator: '/' });
+ * const date = intlDateFormat.date('12/31/2020');
+ * const dateString = intlDateFormat.format(new Date());
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
+ */
+export class IntlDateFormat {
+  constructor(props) {
+    this.locale = props.locale;
+    this.separator = props.separator;
+    this.invalidDateFormatRegex = new RegExp("[^0-9".concat(this.separator, "]"));
+    this.duplicateSeparatorRegex = new RegExp("".concat(this.separator, "{2,}"), 'g');
+    this.dateTimeFormat = new Intl.DateTimeFormat(props.locale);
+    this.dateTimeFormatParts = this.dateTimeFormat.formatToParts(new Date());
+    this.dateStringFormat = this.dateTimeFormatParts.map(part => IntlDateFormat.datePartTypeMap[part.type]).filter(Boolean).join(this.separator);
+    this.separatorIndices = this.dateStringFormat.split('').map((char, index) => char === this.separator ? index : undefined).filter(Boolean);
+  }
+
+  /**
+   * Converts a valid date string to a Date object based on the locale's date format.
+   */
+  date(dateString) {
+    const dateValues = dateString.split(this.separator);
+    const {
+      year,
+      month,
+      day
+    } = this.dateTimeFormatParts.filter(part => part.type !== 'literal').reduce((acc, part, index) => {
+      acc[part.type] = parseInt(dateValues[index], 10);
+      return acc;
+    }, {});
+    const date = new Date(year, month - 1, day);
+
+    // Ignore technically valid date inputs like `30/30/2015` that would cause the month or year to roll over
+    if (date.getMonth() !== month - 1 || date.getFullYear() !== year) return null;
+    return date;
+  }
+
+  /**
+   * Converts a Date object to a date string based on the locale's date format.
+   */
+  format(date) {
+    return this.dateTimeFormat.formatToParts(date).map(part => part.type === 'literal' ? this.separator : part.type === 'year' ? date.getFullYear() : part.value.padStart(2, '0')).join('');
+  }
+}
+/** A valid JavaScript Intl locale used to determine the date format. */
+/** Character used to separate values in the date format, e.g. the forward slash in "MM/DD/YYYY". */
+/** The indices of the separator characters in the date format. */
+/** Matches any character except digits and the separator character. */
+/** Matches two or more consecutive separator characters. */
+/** Intl.DateTimeFormat class for the locale. */
+/** Array of Intl.DateTimeFormatParts - including day, month, year, and separators. */
+/** The date format, based on the locale and including separator characters, e.g. "MM/DD/YYYY". */
+_defineProperty(IntlDateFormat, "datePartTypeMap", {
+  day: 'dd',
+  month: 'mm',
+  year: 'yyyy'
+});

package/esm/dates/generateCalendarMonth.js

@@ -0,0 +1,22 @@
+/**
+ * Generates an array of Dates for a calendar month. Not localized with Intl. Assumes a Gregorian calendar with "en-US" DateTimeFormat. Treats Sunday as the first day of the week.
+ */
+export const generateCalendarMonth = seedDate => {
+  const firstOfMonth = new Date(seedDate.getFullYear(), seedDate.getMonth(), 1);
+  const firstOfCalendar = new Date(firstOfMonth.getFullYear(), firstOfMonth.getMonth(), 1 - firstOfMonth.getDay());
+  const daysInMonth = new Date(firstOfMonth.getFullYear(), firstOfMonth.getMonth() + 1, 0).getDate();
+  const daysFromNextMonth = 7 - (daysInMonth + firstOfMonth.getDay()) % 7;
+  const month = [];
+  for (let i = 0; i < firstOfMonth.getDay(); i++) {
+    month.push(new Date(firstOfCalendar.getFullYear(), firstOfCalendar.getMonth(), firstOfCalendar.getDate() + i));
+  }
+  for (let i = 1; i <= daysInMonth; i++) {
+    month.push(new Date(firstOfMonth.getFullYear(), firstOfMonth.getMonth(), i));
+  }
+  if (daysFromNextMonth !== 7) {
+    for (let i = 1; i <= daysFromNextMonth; i++) {
+      month.push(new Date(firstOfMonth.getFullYear(), firstOfMonth.getMonth() + 1, i));
+    }
+  }
+  return month;
+};

package/esm/dates/getISOStringLocal.js

@@ -0,0 +1,8 @@
+/**
+ * Converts a Date to an ISO 8601 string (YYYY-MM-DD) in the local timezone (not UTC)
+ */
+export const getISOStringLocal = date => {
+  const day = date.getDate().toString().padStart(2, '0');
+  const month = (date.getMonth() + 1).toString().padStart(2, '0');
+  return "".concat(date.getFullYear(), "-").concat(month, "-").concat(day);
+};

package/esm/dates/getMidnightDate.js

@@ -0,0 +1,4 @@
+/**
+ * Clones a Date with the time set to midnight (00:00:00.000)
+ */
+export const getMidnightDate = date => new Date(date.getFullYear(), date.getMonth(), date.getDate());

package/esm/dates/getTimesFromDatesAndRanges.js

@@ -0,0 +1,16 @@
+import { getMidnightDate } from './getMidnightDate';
+
+/**
+ * Takes an array of Dates and Date tuples for date ranges, and generates a flattened array of corresponding Date.getTime() numbers, with the time set to midnight. A number will be generated for every individual date within a date range.
+ */
+export const getTimesFromDatesAndRanges = datesAndRanges => datesAndRanges.flatMap(value => {
+  if (value instanceof Date) return getMidnightDate(value).getTime();
+  const [startDate, endDate] = value;
+  const startDisabledDate = getMidnightDate(startDate);
+  const endDisabledDate = getMidnightDate(endDate);
+  const times = [];
+  for (let date = startDisabledDate; date <= endDisabledDate; date.setDate(date.getDate() + 1)) {
+    times.push(date.getTime());
+  }
+  return times;
+});

package/esm/dates/useDateInput.js

@@ -0,0 +1,105 @@
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { useDateInputValidation } from './useDateInputValidation';
+/** Accepts DateInputOptions and returns a DateInputApi, which can be used to control a custom DateInput component. */
+export const useDateInput = _ref => {
+  let {
+    date,
+    onChangeDate,
+    error,
+    onErrorDate,
+    intlDateFormat,
+    required,
+    disabledDates,
+    minDate,
+    maxDate,
+    requiredError,
+    invalidDateError,
+    disabledDateError
+  } = _ref;
+  const [previousDateProp, setPreviousDateProp] = useState(date);
+  const [inputValue, setInputValue] = useState(date ? intlDateFormat.format(date) : '');
+  const hadCompleteDateString = useRef(Boolean(date));
+
+  // Sync internal inputValue state with external date prop state
+  if (previousDateProp !== date) {
+    hadCompleteDateString.current = Boolean(date);
+    setPreviousDateProp(date);
+    // Only resync the inputValue state if the new date prop is non-null.
+    // This allows the user to backspace a completed date input, without
+    // the inputValue being overridden by the date prop changing to null.
+    if (date) setInputValue(intlDateFormat.format(date));
+  }
+  const placeholder = "   ".concat(intlDateFormat.separator, "   ").concat(intlDateFormat.separator);
+  const {
+    validateDateInput,
+    disabledTimes,
+    minTime,
+    maxTime
+  } = useDateInputValidation({
+    intlDateFormat,
+    required,
+    disabledDates,
+    minDate,
+    maxDate,
+    requiredError,
+    invalidDateError,
+    disabledDateError
+  });
+
+  /**
+   * Be careful to preserve the correct event orders
+   *   1. Typing a date in a blank DateInput:                     onChange -> onChange -> ... -> onChangeDate -> onErrorDate
+   *   2. Typing a date in a DateInput that already had a date:   onChange -> onChangeDate -> onChange -> onChange -> ... -> onChangeDate -> onErrorDate
+   */
+  const onChangeDateInput = useCallback(newDateString => {
+    let dateString = newDateString;
+    const newStringLength = dateString.length;
+    const maxLength = intlDateFormat.dateStringFormat.length;
+    if (newStringLength > maxLength || intlDateFormat.invalidDateFormatRegex.test(dateString)) return;
+    const newLastChar = dateString.charAt(newStringLength - 1);
+    const isDeletion = newStringLength < inputValue.length;
+    if (!isDeletion) {
+      const expectSeparator = intlDateFormat.separatorIndices.includes(newStringLength - 1);
+
+      // Add a separator as the user is typing if they miss one
+      if (expectSeparator && newLastChar !== intlDateFormat.separator) {
+        dateString = "".concat(dateString.slice(0, -1)).concat(intlDateFormat.separator).concat(dateString.slice(-1));
+      }
+      const separatorCount = dateString.split(intlDateFormat.separator).length - 1;
+
+      // Don't allow the user to type a separator unless we expect one
+      if (!expectSeparator && newLastChar === intlDateFormat.separator) return;
+      // Don't allow the user to type a duplicate separator or more than 2 separators
+      if (intlDateFormat.duplicateSeparatorRegex.test(dateString) || separatorCount > intlDateFormat.separatorIndices.length) return;
+    }
+    const isCompleteDateString = dateString.length === maxLength;
+
+    // If we have a complete date string, generate a date and validate it
+    if (isCompleteDateString) {
+      const date = intlDateFormat.date(dateString);
+      const newError = validateDateInput(dateString);
+      onChangeDate(newError ? null : date);
+      if (newError) onErrorDate(newError);else if (error && error.type !== 'custom') onErrorDate(null);
+    } else {
+      // If it's not a complete date string, but it was on the previous render, we can clear the date
+      if (hadCompleteDateString.current) onChangeDate(null);
+      // If we had an error with the previous complete date string, we can clear it now
+      if (error && error.type !== 'custom') onErrorDate(null);
+    }
+    hadCompleteDateString.current = isCompleteDateString;
+
+    // Update the input value with the coerced date string
+    setInputValue(dateString);
+  }, [inputValue, intlDateFormat, error, validateDateInput, onChangeDate, onErrorDate]);
+  const api = useMemo(() => ({
+    inputValue,
+    onChangeDateInput,
+    intlDateFormat,
+    placeholder,
+    validateDateInput,
+    disabledTimes,
+    minTime,
+    maxTime
+  }), [inputValue, onChangeDateInput, intlDateFormat, placeholder, validateDateInput, disabledTimes, minTime, maxTime]);
+  return api;
+};

package/esm/dates/useDateInputValidation.js

@@ -0,0 +1,50 @@
+import { useCallback, useMemo } from 'react';
+import { DateInputValidationError } from './DateInputValidationError';
+import { getMidnightDate } from './getMidnightDate';
+import { getTimesFromDatesAndRanges } from './getTimesFromDatesAndRanges';
+const oneHundredYearsInMs = 3.156e12;
+export const useDateInputValidation = _ref => {
+  let {
+    intlDateFormat,
+    required,
+    disabledDates,
+    minDate,
+    maxDate,
+    requiredError = 'This field is required',
+    invalidDateError = 'Please enter a valid date',
+    disabledDateError = 'Date unavailable'
+  } = _ref;
+  const disabledTimes = useMemo(() => getTimesFromDatesAndRanges(disabledDates || []), [disabledDates]);
+  const minTime = useMemo(() => minDate && getMidnightDate(minDate).getTime(), [minDate]);
+  const maxTime = useMemo(() => maxDate && getMidnightDate(maxDate).getTime(), [maxDate]);
+  const validateDateInput = useCallback(dateString => {
+    // First evaluate the date string for any errors
+    const date = intlDateFormat.date(dateString);
+    const time = date === null || date === void 0 ? void 0 : date.getTime();
+    let errorType;
+
+    // Check if date string is fully formed if it's required
+    if (required && dateString.length !== intlDateFormat.dateStringFormat.length) errorType = 'required';
+    // Check if date is valid
+    else if (!date || Number.isNaN(date)) errorType = 'invalid';else if (time && (minTime && time < minTime - oneHundredYearsInMs || maxTime && time > maxTime + oneHundredYearsInMs)) errorType = 'invalid';
+    // Check if date is disabled
+    else if (time && (minTime && time < minTime || maxTime && time > maxTime || disabledTimes.includes(time))) errorType = 'disabled';
+
+    // Now assign the error message based on the error type and create the DateInputValidationError
+    const defaultError = intlDateFormat.dateStringFormat;
+    const errorMessages = {
+      required: requiredError,
+      invalid: invalidDateError,
+      disabled: disabledDateError
+    };
+    const error = errorType ? new DateInputValidationError(errorType, errorMessages[errorType] || defaultError) : null;
+    return error;
+  }, [intlDateFormat, required, disabledTimes, minTime, maxTime, requiredError, invalidDateError, disabledDateError]);
+  const api = useMemo(() => ({
+    validateDateInput,
+    disabledTimes,
+    minTime,
+    maxTime
+  }), [validateDateInput, disabledTimes, minTime, maxTime]);
+  return api;
+};