@os-design/core 1.0.280 → 1.0.281

package/src/DatePicker/utils/createTimes.ts

@@ -0,0 +1,20 @@
+export interface Time {
+  hour: number;
+  minute: number;
+}
+
+const createTimes = (from: Time, to: Time, stepMinutes: number) => {
+  const min = from.hour * 60 + from.minute;
+  const max = to.hour * 60 + to.minute;
+  const times: Time[] = [];
+
+  for (let i = min; i <= max - stepMinutes; i += stepMinutes) {
+    const hour = Math.floor(i / 60);
+    const minute = i % 60;
+    times.push({ hour, minute });
+  }
+
+  return times;
+};
+
+export default createTimes;

package/src/Input/index.tsx

@@ -194,10 +194,13 @@ export const StyledInput = styled(
   ${notHasRightStyles};
 `;
 
-interface AddonProps {
-  hasPadding: boolean;
+interface InputAddonProps {
+  hasPadding?: boolean;
 }
-const Addon = styled('span', omitEmotionProps('hasPadding'))<AddonProps>`
+const InputAddon = styled(
+  'span',
+  omitEmotionProps('hasPadding')
+)<InputAddonProps>`
   display: flex;
   align-items: center;
   user-select: none;
@@ -208,7 +211,7 @@ const Addon = styled('span', omitEmotionProps('hasPadding'))<AddonProps>`
   }
 `;
 
-const LeftAddon = styled(Addon)`
+export const InputLeftAddon = styled(InputAddon)`
   padding-right: ${(p) => p.theme.inputAddonPaddingHorizontal}em;
   ${(p) =>
     p.hasPadding &&
@@ -217,7 +220,7 @@ const LeftAddon = styled(Addon)`
     `}
 `;
 
-const RightAddon = styled(Addon)`
+export const InputRightAddon = styled(InputAddon)`
   padding-left: ${(p) => p.theme.inputAddonPaddingHorizontal}em;
   ${(p) =>
     p.hasPadding &&
@@ -309,7 +312,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       >
         {left && (
           <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>
-            <LeftAddon hasPadding={leftHasPadding}>{left}</LeftAddon>
+            <InputLeftAddon hasPadding={leftHasPadding}>{left}</InputLeftAddon>
           </ThemeOverrider>
         )}
 
@@ -326,9 +329,9 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
 
         {rightValue && (
           <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>
-            <RightAddon hasPadding={rightHasPaddingValue}>
+            <InputRightAddon hasPadding={rightHasPaddingValue}>
               {rightValue}
-            </RightAddon>
+            </InputRightAddon>
           </ThemeOverrider>
         )}
       </InputContainer>

package/src/InputDateUnstyled/index.tsx

@@ -0,0 +1,533 @@
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  type FocusEvent,
+  type KeyboardEvent,
+} from 'react';
+import { nextToken, prevToken } from './utils/token.js';
+import replaceSubstring from './utils/replaceSubstring.js';
+import dateToString from './utils/dateToString.js';
+import { useEvent, useForwardedRef, useForwardedState } from '@os-design/utils';
+import eraseSelectedTokens from './utils/eraseSelectedTokens.js';
+import stringToDay, { type Day, type OnDayError } from './utils/stringToDay.js';
+import stringToTime, { type Time } from './utils/stringToTime.js';
+import ensureCaretVisible from './utils/ensureCaretVisible.js';
+import { sameDate, sameDay, sameTime } from './utils/same.js';
+
+export const tokens = [
+  'DD',
+  'MM',
+  'YYYY',
+  'YY',
+  'hh',
+  'HH',
+  'mm',
+  'aa',
+] as const;
+export const numericTokens = ['DD', 'MM', 'YYYY', 'YY', 'hh', 'HH', 'mm'];
+
+export type Token = (typeof tokens)[number];
+
+export interface Selection {
+  start: number;
+  end: number;
+}
+
+type JsxInputProps = Omit<
+  JSX.IntrinsicElements['input'],
+  'value' | 'defaultValue' | 'onChange' | 'ref'
+>;
+
+export interface InputDateUnstyledProps extends JsxInputProps {
+  /**
+   * The string format. Supported tokens:
+   * `DD` - The day of the month (01-31).
+   * `MM` - The month (01-12).
+   * `YYYY` - Four-digit year (2025).
+   * `YY` - Two-digit year (25).
+   * `hh` - The hour, 12-hour clock (01-12).
+   * `HH` - The hour, 24-hour clock (00-23).
+   * `mm` - The minute (00-59).
+   * `aa` - The meridiem (am, pm).
+   * @default `DD.MM.YYYY`
+   */
+  format?: string;
+  /**
+   * Selected date.
+   * @default undefined
+   */
+  value?: Date | null;
+  /**
+   * The value of the input.
+   * @default undefined
+   */
+  inputValue?: string;
+  /**
+   * The caret position.
+   * @default undefined
+   */
+  selection?: Selection;
+  /**
+   * The default value.
+   * @default undefined
+   */
+  defaultValue?: Date | null;
+  /**
+   * The change event handler.
+   * @default undefined
+   */
+  onChange?: (value: Date | null) => void;
+  /**
+   * The callback called when the input is changed.
+   * @default undefined
+   */
+  onInputChange?: (value: string) => void;
+  /**
+   * The callback called when the selection has been changed.
+   * @default undefined
+   */
+  onSelectionChange?: (selection: Selection) => void;
+  /**
+   * The callback called when the day is changed.
+   * @default undefined
+   */
+  onDayChange?: (value: Day) => void;
+  /**
+   * The callback called when the time is changed.
+   * @default undefined
+   */
+  onTimeChange?: (value: Time) => void;
+  /**
+   * The error handler called when the day has been entered incorrectly.
+   * @default undefined
+   */
+  onDayError?: OnDayError;
+}
+
+/**
+ * The input for entering a date/time without any styles.
+ */
+const InputDateUnstyled = forwardRef<HTMLInputElement, InputDateUnstyledProps>(
+  (
+    {
+      format = 'DD.MM.YYYY',
+      value,
+      inputValue,
+      selection,
+      defaultValue,
+      onChange,
+      onInputChange,
+      onSelectionChange = () => {},
+      onDayChange = () => {},
+      onTimeChange = () => {},
+      onDayError,
+      onFocus = () => {},
+      onKeyDown = () => {},
+      ...rest
+    },
+    ref
+  ) => {
+    const [inputRef, mergedInputRef] = useForwardedRef(ref);
+    const [forwardedValue, setForwardedValue] = useForwardedState({
+      value,
+      defaultValue,
+      onChange,
+    });
+    const [forwardedSelection, setForwardedSelection] = useForwardedState({
+      value: selection,
+      defaultValue: { start: 0, end: 0 },
+      onChange: onSelectionChange,
+    });
+
+    const defaultInputValue = useMemo(() => {
+      let res = format;
+      tokens.forEach((token) => {
+        res = res.replaceAll(token, '_'.repeat(token.length));
+      });
+      return res;
+    }, [format]);
+
+    const [forwardedInputValue, setForwardedInputValue] = useForwardedState({
+      value: inputValue,
+      defaultValue: defaultInputValue,
+      onChange: onInputChange,
+    });
+
+    const dayRef = useRef<Day | null>(null);
+    const timeRef = useRef<Time | null>(null);
+
+    const forwardedValueRef = useRef(forwardedValue);
+    useEffect(() => {
+      forwardedValueRef.current = forwardedValue;
+    }, [forwardedValue]);
+
+    const setForwardedValueRef = useRef(setForwardedValue);
+    useEffect(() => {
+      setForwardedValueRef.current = setForwardedValue;
+    }, [setForwardedValue]);
+
+    const forwardedSelectionRef = useRef(forwardedSelection);
+    useEffect(() => {
+      forwardedSelectionRef.current = forwardedSelection;
+    }, [forwardedSelection]);
+
+    const setForwardedSelectionRef = useRef(setForwardedSelection);
+    useEffect(() => {
+      setForwardedSelectionRef.current = setForwardedSelection;
+    }, [setForwardedSelection]);
+
+    const defaultInputValueRef = useRef(defaultInputValue);
+    useEffect(() => {
+      defaultInputValueRef.current = defaultInputValue;
+    }, [defaultInputValue]);
+
+    const forwardedInputValueRef = useRef(forwardedInputValue);
+    useEffect(() => {
+      forwardedInputValueRef.current = forwardedInputValue;
+    }, [forwardedInputValue]);
+
+    const setForwardedInputValueRef = useRef(setForwardedInputValue);
+    useEffect(() => {
+      setForwardedInputValueRef.current = setForwardedInputValue;
+    }, [setForwardedInputValue]);
+
+    const formatRef = useRef(format);
+    useEffect(() => {
+      formatRef.current = format;
+    }, [format]);
+
+    const onDayChangeRef = useRef(onDayChange);
+    useEffect(() => {
+      onDayChangeRef.current = onDayChange;
+    }, [onDayChange]);
+
+    const onTimeChangeRef = useRef(onTimeChange);
+    useEffect(() => {
+      onTimeChangeRef.current = onTimeChange;
+    }, [onTimeChange]);
+
+    const onDayErrorRef = useRef(onDayError);
+    useEffect(() => {
+      onDayErrorRef.current = onDayError;
+    }, [onDayError]);
+
+    const onKeyDownRef = useRef(onKeyDown);
+    useEffect(() => {
+      onKeyDownRef.current = onKeyDown;
+    }, [onKeyDown]);
+
+    // Change the input selection when the selection state is changed
+    useEffect(() => {
+      if (!inputRef.current) return;
+      const selection = forwardedSelection || { start: 0, end: 0 };
+      inputRef.current.setSelectionRange(selection.start, selection.end);
+      ensureCaretVisible(inputRef.current);
+    }, [forwardedSelection, inputRef]);
+
+    // Change the input value when the value is changed
+    useEffect(() => {
+      const nextInputValue = forwardedValue
+        ? dateToString(forwardedValue, formatRef.current)
+        : defaultInputValueRef.current;
+      setForwardedInputValueRef.current(nextInputValue);
+    }, [forwardedValue]);
+
+    // Calls onDayChange, onTimeChange, onChange handlers
+    // when the input value is changed.
+    useEffect(() => {
+      const inputValue = forwardedInputValue || defaultInputValueRef.current;
+
+      const day = stringToDay(
+        inputValue,
+        formatRef.current,
+        onDayErrorRef.current
+      );
+      const time = stringToTime(inputValue, formatRef.current);
+
+      if (day && (!dayRef.current || !sameDay(day, dayRef.current))) {
+        onDayChangeRef.current(day);
+        dayRef.current = day;
+      }
+      if (time && (!timeRef.current || !sameTime(time, timeRef.current))) {
+        onTimeChangeRef.current(time);
+        timeRef.current = time;
+      }
+      if (!inputValue.includes('_')) {
+        const date = forwardedValueRef.current
+          ? new Date(forwardedValueRef.current.getTime())
+          : new Date();
+        if (day) {
+          date.setFullYear(day.year);
+          date.setMonth(day.month);
+          date.setDate(day.day);
+        }
+        if (time) {
+          date.setHours(time.hour);
+          date.setMinutes(time.minute);
+        }
+        if (
+          !forwardedValueRef.current ||
+          !sameDate(date, forwardedValueRef.current)
+        ) {
+          setForwardedValueRef.current(date);
+        }
+      }
+    }, [forwardedInputValue]);
+
+    const keyDownHandler = useCallback((e: KeyboardEvent<HTMLInputElement>) => {
+      e.preventDefault(); // Avoid the default input behaviour
+
+      let start = e.currentTarget.selectionStart || 0;
+      const end = e.currentTarget.selectionEnd || 0;
+      let nextInputValue =
+        forwardedInputValueRef.current || defaultInputValueRef.current;
+
+      if (/^[0-9]$/.test(e.key)) {
+        // If the user has selected multiple characters, erase tokens
+        // that contain them.
+        nextInputValue = eraseSelectedTokens({
+          value: nextInputValue,
+          start,
+          end,
+          format: formatRef.current,
+          tokens,
+        });
+
+        // Move the caret to the left, skipping all `_`
+        while (start > 0 && nextInputValue.charAt(start - 1) === '_') {
+          start--;
+        }
+
+        // Find the next token and check whether it's a numeric one
+        const next = nextToken(start, formatRef.current, tokens);
+        if (!next || !numericTokens.includes(next.token)) {
+          return;
+        }
+
+        // Move the caret the the found token. There are 2 possible cases:
+        // 1. If the caret has been inside the token, the caret is not moved.
+        // 2. If the token is placed to the right of the caret, the caret
+        // moves to the start of the token.
+        start = next.pos;
+
+        let substr = e.key;
+        const digit = Number(e.key);
+        const prevChar = start > 0 ? nextInputValue.charAt(start - 1) : null;
+        const posInToken = next.pos - next.start;
+
+        switch (next.token) {
+          case 'DD':
+            if (posInToken === 0 && digit >= 4) {
+              substr = `0${digit}`;
+            } else if (posInToken === 1 && prevChar === '0' && digit === 0) {
+              return;
+            } else if (posInToken === 1 && prevChar === '3' && digit >= 2) {
+              return;
+            }
+            break;
+          case 'MM':
+            if (posInToken === 0 && digit >= 2) {
+              substr = `0${digit}`;
+            } else if (posInToken === 1 && prevChar === '0' && digit === 0) {
+              return;
+            } else if (posInToken === 1 && prevChar === '1' && digit >= 3) {
+              return;
+            }
+            break;
+          case 'hh':
+            if (posInToken === 0 && digit >= 2) {
+              substr = `0${digit}`;
+            } else if (posInToken === 1 && prevChar === '0' && digit === 0) {
+              return;
+            } else if (posInToken === 1 && prevChar === '1' && digit >= 3) {
+              return;
+            }
+            break;
+          case 'HH':
+            if (posInToken === 0 && digit >= 3) {
+              substr = `0${digit}`;
+            } else if (posInToken === 1 && prevChar === '2' && digit >= 4) {
+              return;
+            }
+            break;
+          case 'mm':
+            if (posInToken === 0 && digit >= 6) {
+              substr = `0${digit}`;
+            }
+            break;
+        }
+
+        // Replace the next characters of the current token with '_'
+        const suffixLength = next.end - start - substr.length;
+        const suffix = suffixLength > 0 ? '_'.repeat(suffixLength) : '';
+
+        nextInputValue = replaceSubstring(
+          nextInputValue,
+          start,
+          `${substr}${suffix}`
+        );
+
+        // Move the caret to the next token
+        start += substr.length;
+        const next2 = nextToken(start, formatRef.current, tokens);
+        if (next2) start = next2.pos;
+
+        setForwardedInputValueRef.current(nextInputValue);
+        setForwardedSelectionRef.current({ start, end: start });
+      } else if ('ap'.includes(e.key.toLowerCase())) {
+        if (e.metaKey && e.key === 'a') {
+          // Select all
+          setForwardedSelectionRef.current({
+            start: 0,
+            end: formatRef.current.length,
+          });
+        } else {
+          // Find the next token and check whether it's the meridiem token
+          const next = nextToken(start, formatRef.current, tokens);
+          if (!next || next.token !== 'aa') return;
+
+          // Move the caret to the start of the token even if the caret
+          // has been located inside it.
+          start = next.start;
+
+          // Fill in the token
+          const substr = e.key.toLowerCase() === 'p' ? 'pm' : 'am';
+          nextInputValue = replaceSubstring(nextInputValue, start, substr);
+
+          // Move the caret to the next token
+          start += substr.length;
+          const next2 = nextToken(start, formatRef.current, tokens);
+          if (next2) start = next2.pos;
+
+          setForwardedInputValueRef.current(nextInputValue);
+          setForwardedSelectionRef.current({ start, end: start });
+        }
+      } else if (e.key === 'Backspace') {
+        if (end > start) {
+          // If the user has selected multiple characters, erase tokens
+          // that contain them.
+          nextInputValue = eraseSelectedTokens({
+            value: nextInputValue,
+            start,
+            end,
+            format: formatRef.current,
+            tokens,
+          });
+        } else {
+          // If the caret in the first position, just ignore this event.
+          if (start === 0) return;
+
+          // Move the caret to the previous token
+          const prev = prevToken(start, formatRef.current, tokens);
+          if (!prev) return;
+
+          let substr = '_';
+          if (prev.token === 'aa') {
+            // Move the caret to the start of the meridiem token and erase
+            // all the characters of this token.
+            start = prev.start;
+            substr = '__';
+          } else {
+            // Erase the token to the end.
+            // For example, if the token contains 4 characters and the caret
+            // is located after the 2nd one, when the user presses backspace,
+            // the 2nd, 3rd, and 4th characters are erased.
+            start = prev.pos - 1;
+            substr = '_'.repeat(prev.end - start);
+          }
+
+          nextInputValue = replaceSubstring(nextInputValue, start, substr);
+        }
+
+        // Move the caret to the previous token
+        const prev2 = prevToken(start, formatRef.current, tokens);
+        if (prev2) start = prev2.pos;
+
+        setForwardedInputValueRef.current(nextInputValue);
+        setForwardedSelectionRef.current({ start, end: start });
+      } else if (e.key === 'ArrowLeft') {
+        // If the caret in the first position, just ignore this event.
+        if (start === 0) return;
+
+        // Move the caret to the beginning of the string if the meta key
+        // has been pressed (cmd or ctrl).
+        if (e.metaKey) start = 0;
+        // Move the caret to the left
+        else start--;
+
+        setForwardedSelectionRef.current({ start, end: start });
+      } else if (e.key === 'ArrowRight') {
+        // If the caret in the last position, just ignore this event.
+        if (start === formatRef.current.length) return;
+
+        // Move the caret to the end of the string if the meta key
+        // has been pressed (cmd or ctrl).
+        if (e.metaKey) start = formatRef.current.length;
+        // Move the caret to the right
+        else start++;
+
+        setForwardedSelectionRef.current({ start, end: start });
+      }
+
+      onKeyDownRef.current(e);
+    }, []);
+
+    // Update the selection when the user clicks inside the input
+    const updateSelection = useCallback((e: Event) => {
+      const input = e.currentTarget as HTMLInputElement;
+      const start = input.selectionStart || 0;
+      const end = input.selectionEnd || 0;
+      const selection = forwardedSelectionRef.current || { start: 0, end: 0 };
+      if (start !== selection.start || end !== selection.end) {
+        setForwardedSelectionRef.current({ start, end });
+      }
+    }, []);
+    useEvent(inputRef, 'mouseup', updateSelection);
+    useEvent(inputRef, 'touchend', updateSelection);
+
+    const focusHandler = useCallback(
+      (e: FocusEvent<HTMLInputElement>) => {
+        setTimeout(() => {
+          // Move the caret to the beginning of the first token or if
+          // there are no tokens to the beginning of the string.
+          const next = nextToken(0, formatRef.current, tokens);
+          const pos = next ? next.pos : 0;
+          setForwardedSelectionRef.current({ start: pos, end: pos });
+          onFocus(e);
+        }, 0);
+      },
+      [onFocus]
+    );
+
+    return (
+      <input
+        {...rest}
+        onFocus={focusHandler}
+        onKeyDown={keyDownHandler}
+        value={forwardedInputValue}
+        ref={mergedInputRef}
+      />
+    );
+  }
+);
+
+InputDateUnstyled.displayName = 'InputDateUnstyled';
+
+export { default as convertToFullYear } from './utils/convertToFullYear.js';
+export { default as dateToString } from './utils/dateToString.js';
+export { default as daysInMonth } from './utils/daysInMonth.js';
+export { default as ensureCaretVisible } from './utils/ensureCaretVisible.js';
+export { default as eraseSelectedTokens } from './utils/eraseSelectedTokens.js';
+export { default as replaceSubstring } from './utils/replaceSubstring.js';
+export { default as stringToDay } from './utils/stringToDay.js';
+export { default as stringToTime } from './utils/stringToTime.js';
+export * from './utils/convertHours.js';
+export * from './utils/same.js';
+export * from './utils/stringToDay.js';
+export * from './utils/stringToTime.js';
+export * from './utils/token.js';
+
+export default InputDateUnstyled;

package/src/InputDateUnstyled/utils/convertHours.ts

@@ -0,0 +1,15 @@
+export type Meridiem = 'am' | 'pm';
+
+export const convertTo12hours = (hours: number): [number, Meridiem] => {
+  if (hours >= 12) {
+    const hours12 = hours % 12;
+    return [hours12 === 0 ? 12 : hours12, 'pm'];
+  } else {
+    return [hours === 0 ? 12 : hours, 'am'];
+  }
+};
+
+export const convertTo24hours = (hours: number, meridiem: Meridiem): number => {
+  const h = hours === 12 ? 0 : hours;
+  return h + (meridiem === 'am' ? 0 : 12);
+};

package/src/InputDateUnstyled/utils/convertToFullYear.ts

@@ -0,0 +1,11 @@
+const convertToFullYear = (twoDigitYear: number, currentYear: number) => {
+  const fromYear = currentYear - 50;
+  const toYear = currentYear + 50;
+  if (twoDigitYear >= fromYear % 100) {
+    return Math.floor(fromYear / 100) * 100 + twoDigitYear;
+  } else {
+    return Math.floor(toYear / 100) * 100 + twoDigitYear;
+  }
+};
+
+export default convertToFullYear;

package/src/InputDateUnstyled/utils/dateToString.ts

@@ -0,0 +1,21 @@
+import { convertTo12hours } from './convertHours.js';
+
+const dateToString = (date: Date, format: string) => {
+  let str = format
+    .replace('DD', date.getDate().toString().padStart(2, '0'))
+    .replace('MM', (date.getMonth() + 1).toString().padStart(2, '0'))
+    .replace('YYYY', date.getFullYear().toString())
+    .replace('YY', date.getFullYear().toString().slice(2, 4))
+    .replace('HH', date.getHours().toString().padStart(2, '0'))
+    .replace('mm', date.getMinutes().toString().padStart(2, '0'));
+
+  if (str.includes('hh')) {
+    const [hours, meridiem] = convertTo12hours(date.getHours());
+    str = str
+      .replace('hh', hours.toString().padStart(2, '0'))
+      .replace('aa', meridiem);
+  }
+  return str;
+};
+
+export default dateToString;

package/src/InputDateUnstyled/utils/daysInMonth.ts

@@ -0,0 +1,22 @@
+interface Month {
+  year: number;
+  month: number;
+}
+
+const daysInMonth = (month: Month) => {
+  switch (month.month) {
+    case 1:
+      return (month.year % 4 == 0 && month.year % 100) || month.year % 400 == 0
+        ? 29
+        : 28;
+    case 3:
+    case 5:
+    case 8:
+    case 10:
+      return 30;
+    default:
+      return 31;
+  }
+};
+
+export default daysInMonth;