@os-design/core 1.0.280 → 1.0.281

package/dist/DatePicker/DatePickerCalendar.js

@@ -1,178 +0,0 @@
-import styled from '@emotion/styled';
-import { getAccessibilityDateLabel, useDatePickerCalendar } from '@os-design/date-picker-utils';
-import { Left, Right } from '@os-design/icons';
-import { ellipsisStyles, resetFocusStyles, transitionStyles } from '@os-design/styles';
-import { clr } from '@os-design/theming';
-import React, { useCallback, useEffect, useRef } from 'react';
-import Button from '../Button/index.js';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const MonthContainer = styled.div`
-  display: flex;
-  align-items: center;
-  margin-bottom: 0.5em;
-`;
-const Month = styled.div`
-  flex-grow: 1;
-  font-weight: 500;
-  text-align: center;
-  padding: 0 0.4em;
-  ${ellipsisStyles};
-`;
-const Calendar = styled.div`
-  display: grid;
-  grid-template-columns: repeat(7, ${p => p.theme.datePickerCellSize}em);
-  grid-auto-rows: ${p => p.theme.datePickerCellSize}em;
-  justify-content: space-between;
-  overflow-x: auto;
-`;
-const DayOfWeek = styled.div`
-  justify-self: center;
-  align-self: center;
-  color: ${p => clr(p.theme.datePickerDayOfWeekColorText)};
-  font-size: ${p => p.theme.sizes.small}em;
-`;
-const Day = styled.div`
-  ${resetFocusStyles};
-  justify-self: center;
-  align-self: center;
-
-  width: ${p => p.theme.datePickerDaySize}em;
-  height: ${p => p.theme.datePickerDaySize}em;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  border-radius: ${p => p.theme.borderRadius}em;
-  cursor: pointer;
-
-  @media (hover: hover) {
-    &:hover,
-    &:focus {
-      background-color: ${p => clr(p.theme.datePickerDayColorBgHover)};
-      color: ${p => clr(p.theme.datePickerDayColorTextHover)};
-    }
-  }
-
-  ${transitionStyles('background-color', 'color')};
-`;
-const DayAnotherMonth = styled(Day)`
-  color: ${p => clr(p.theme.datePickerDayAnotherMonthColorText)};
-`;
-const Today = styled(Day)`
-  background-color: ${p => clr(p.theme.datePickerTodayColorBg)};
-  color: ${p => clr(p.theme.datePickerTodayColorText)};
-  border: 1px solid ${p => clr(p.theme.datePickerTodayColorBorder)};
-  box-sizing: border-box;
-`;
-const SelectedDay = styled(Day)`
-  background-color: ${p => clr(p.theme.datePickerSelectedDayColorBg)};
-  color: ${p => clr(p.theme.datePickerSelectedDayColorText)};
-`;
-const DayInRange = styled(Day)`
-  background-color: ${p => clr([...p.theme.colorText.slice(0, 3), (p.theme.colorText[3] || 1) * 0.05])};
-`;
-const firstDayOfWeekIndexesMap = {
-  monday: [6, 0, 1, 2, 3, 4, 5],
-  saturday: [1, 2, 3, 4, 5, 6, 0],
-  sunday: [0, 1, 2, 3, 4, 5, 6]
-};
-const DatePickerCalendar = ({
-  firstDayOfWeek,
-  locale,
-  value,
-  onSelect = () => {}
-}) => {
-  const valueRef = useRef(value);
-  useEffect(() => {
-    valueRef.current = value;
-  }, [value]);
-  const onSelectRef = useRef(onSelect);
-  useEffect(() => {
-    onSelectRef.current = onSelect;
-  }, [onSelect]);
-  const {
-    selectedMonth,
-    updateMonth,
-    days
-  } = useDatePickerCalendar({
-    value,
-    firstDayOfWeek
-  });
-  const getDayProps = useCallback(date => ({
-    tabIndex: 0,
-    role: 'button',
-    'aria-label': getAccessibilityDateLabel(date, locale),
-    onClick: () => {
-      onSelectRef.current(date);
-    },
-    onKeyDown: e => {
-      if (['Enter', ' '].includes(e.key)) {
-        onSelectRef.current(date);
-        e.preventDefault();
-      }
-    },
-    onMouseDown: e => e.preventDefault()
-  }), [locale]);
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(MonthContainer, {
-      children: [/*#__PURE__*/_jsx(Button, {
-        type: "ghost",
-        wide: "never",
-        size: "small",
-        onClick: () => updateMonth(-1),
-        "aria-label": locale.prevMonthLabel,
-        children: /*#__PURE__*/_jsx(Left, {})
-      }), /*#__PURE__*/_jsxs(Month, {
-        children: [locale.months[selectedMonth.month], " ", selectedMonth.year]
-      }), /*#__PURE__*/_jsx(Button, {
-        type: "ghost",
-        wide: "never",
-        size: "small",
-        onClick: () => updateMonth(1),
-        "aria-label": locale.nextMonthLabel,
-        children: /*#__PURE__*/_jsx(Right, {})
-      })]
-    }), /*#__PURE__*/_jsxs(Calendar, {
-      children: [Array(7).fill(0).map((_, index) => {
-        const item = firstDayOfWeekIndexesMap[firstDayOfWeek][index];
-        return /*#__PURE__*/_jsx(DayOfWeek, {
-          children: item
-        }, item);
-      }), days.map(({
-        type,
-        date
-      }) => {
-        if (type === 'dayAnotherMonth') {
-          return /*#__PURE__*/_jsx(DayAnotherMonth, {
-            ...getDayProps(date),
-            children: date.getDate()
-          }, date.toISOString());
-        }
-        if (type === 'selectedDay') {
-          return /*#__PURE__*/_jsx(SelectedDay, {
-            ...getDayProps(date),
-            children: date.getDate()
-          }, date.toISOString());
-        }
-        if (type === 'dayInRange') {
-          return /*#__PURE__*/_jsx(DayInRange, {
-            ...getDayProps(date),
-            children: date.getDate()
-          }, date.toISOString());
-        }
-        if (type === 'today') {
-          return /*#__PURE__*/_jsx(Today, {
-            ...getDayProps(date),
-            children: date.getDate()
-          }, date.toISOString());
-        }
-        return /*#__PURE__*/_jsx(Day, {
-          ...getDayProps(date),
-          children: date.getDate()
-        }, date.toISOString());
-      })]
-    })]
-  });
-};
-export default DatePickerCalendar;

package/dist/TimePicker/index.d.ts

@@ -1,29 +0,0 @@
-import { type InputProps } from '../Input/index.js';
-export interface TimePickerProps extends Omit<InputProps, 'type' | 'value' | 'defaultValue' | 'onChange'> {
-    /**
-     * The time notation.
-     * @default 12-hour
-     */
-    notation?: '12-hour' | '24-hour';
-    /**
-     * The selected date.
-     * @default undefined
-     */
-    value?: Date;
-    /**
-     * The default value.
-     * @default undefined
-     */
-    defaultValue?: Date;
-    /**
-     * The change event handler.
-     * @default undefined
-     */
-    onChange?: (value: Date) => void;
-}
-/**
- * The component to choose a time.
- */
-declare const TimePicker: import("react").ForwardRefExoticComponent<TimePickerProps & import("react").RefAttributes<HTMLInputElement>>;
-export default TimePicker;
-//# sourceMappingURL=index.d.ts.map

package/dist/TimePicker/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TimePicker/index.tsx"],"names":[],"mappings":"AAIA,OAAc,EAAE,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE3D,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC;IACxE;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IACjC;;;OAGG;IACH,KAAK,CAAC,EAAE,IAAI,CAAC;IACb;;;OAGG;IACH,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;CAClC;AAOD;;GAEG;AACH,QAAA,MAAM,UAAU,8GAqGf,CAAC;AAIF,eAAe,UAAU,CAAC"}

package/dist/TimePicker/index.js

@@ -1,100 +0,0 @@
-import { useTime } from '@os-design/time-picker-utils';
-import { useForwardedRef, useForwardedState } from '@os-design/utils';
-import { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
-import Button from '../Button/index.js';
-import Input from '../Input/index.js';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * The component to choose a time.
- */
-const TimePicker = /*#__PURE__*/forwardRef(({
-  notation = '12-hour',
-  value,
-  defaultValue,
-  onChange = () => {},
-  onSelect = () => {},
-  onKeyDown = () => {},
-  disabled = false,
-  right,
-  ...rest
-}, ref) => {
-  const [inputRef, mergedInputRef] = useForwardedRef(ref);
-  const [forwardedValue, setForwardedValue] = useForwardedState({
-    value,
-    defaultValue,
-    onChange
-  });
-  const [selection, setSelection] = useState({
-    start: 0,
-    end: 0
-  });
-  const {
-    time,
-    isPm,
-    changePeriod,
-    keyHandler
-  } = useTime({
-    notation,
-    selection,
-    setSelection: nextSelection => {
-      if (inputRef.current) {
-        inputRef.current.setSelectionRange(nextSelection.start, nextSelection.end);
-      }
-      setSelection(nextSelection);
-    },
-    forwardedValue,
-    setForwardedValue
-  });
-  const rightComponent = useMemo(() => {
-    if (notation !== '12-hour' && !right) return null;
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [notation === '12-hour' && /*#__PURE__*/_jsx(Button, {
-        type: "ghost",
-        wide: "never",
-        size: "small",
-        disabled: disabled,
-        onClick: changePeriod,
-        children: isPm ? 'PM' : 'AM'
-      }), right]
-    });
-  }, [changePeriod, disabled, isPm, notation, right]);
-  const keyDownHandler = useCallback(e => {
-    keyHandler(e.key, e.metaKey);
-    onKeyDown(e);
-    e.preventDefault();
-  }, [keyHandler, onKeyDown]);
-
-  // Update the selection
-  useEffect(() => {
-    if (!inputRef.current) return;
-    inputRef.current.setSelectionRange(selection.start, selection.end);
-  }, [inputRef, selection]);
-  const selectHandler = useCallback(e => {
-    // Update the selection state.
-    const {
-      selectionStart,
-      selectionEnd
-    } = e.currentTarget;
-    setSelection({
-      start: selectionStart || 0,
-      end: selectionEnd || 0
-    });
-    onSelect(e);
-  }, [onSelect]);
-  return /*#__PURE__*/_jsx(Input, {
-    type: "text",
-    inputMode: "decimal",
-    role: "spinbutton",
-    minLength: 5,
-    maxLength: 5,
-    disabled: disabled,
-    value: time,
-    right: rightComponent,
-    onSelect: selectHandler,
-    onKeyDown: keyDownHandler,
-    ...rest,
-    ref: mergedInputRef
-  });
-});
-TimePicker.displayName = 'TimePicker';
-export default TimePicker;

package/src/DatePicker/DatePickerCalendar.tsx

@@ -1,230 +0,0 @@
-import styled from '@emotion/styled';
-import {
-  type DatePickerLocale,
-  getAccessibilityDateLabel,
-  useDatePickerCalendar,
-} from '@os-design/date-picker-utils';
-import { Left, Right } from '@os-design/icons';
-import {
-  ellipsisStyles,
-  resetFocusStyles,
-  transitionStyles,
-} from '@os-design/styles';
-import { type Color, clr } from '@os-design/theming';
-import React, {
-  type HTMLAttributes,
-  useCallback,
-  useEffect,
-  useRef,
-} from 'react';
-import Button from '../Button/index.js';
-
-interface DatePickerCalendarProps {
-  firstDayOfWeek: 'monday' | 'saturday' | 'sunday';
-  locale: DatePickerLocale;
-  value?: Date | [Date, Date] | null;
-  onSelect?: (value: Date) => void;
-}
-
-const MonthContainer = styled.div`
-  display: flex;
-  align-items: center;
-  margin-bottom: 0.5em;
-`;
-
-const Month = styled.div`
-  flex-grow: 1;
-  font-weight: 500;
-  text-align: center;
-  padding: 0 0.4em;
-  ${ellipsisStyles};
-`;
-
-const Calendar = styled.div`
-  display: grid;
-  grid-template-columns: repeat(7, ${(p) => p.theme.datePickerCellSize}em);
-  grid-auto-rows: ${(p) => p.theme.datePickerCellSize}em;
-  justify-content: space-between;
-  overflow-x: auto;
-`;
-
-const DayOfWeek = styled.div`
-  justify-self: center;
-  align-self: center;
-  color: ${(p) => clr(p.theme.datePickerDayOfWeekColorText)};
-  font-size: ${(p) => p.theme.sizes.small}em;
-`;
-
-const Day = styled.div`
-  ${resetFocusStyles};
-  justify-self: center;
-  align-self: center;
-
-  width: ${(p) => p.theme.datePickerDaySize}em;
-  height: ${(p) => p.theme.datePickerDaySize}em;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  border-radius: ${(p) => p.theme.borderRadius}em;
-  cursor: pointer;
-
-  @media (hover: hover) {
-    &:hover,
-    &:focus {
-      background-color: ${(p) => clr(p.theme.datePickerDayColorBgHover)};
-      color: ${(p) => clr(p.theme.datePickerDayColorTextHover)};
-    }
-  }
-
-  ${transitionStyles('background-color', 'color')};
-`;
-
-const DayAnotherMonth = styled(Day)`
-  color: ${(p) => clr(p.theme.datePickerDayAnotherMonthColorText)};
-`;
-
-const Today = styled(Day)`
-  background-color: ${(p) => clr(p.theme.datePickerTodayColorBg)};
-  color: ${(p) => clr(p.theme.datePickerTodayColorText)};
-  border: 1px solid ${(p) => clr(p.theme.datePickerTodayColorBorder)};
-  box-sizing: border-box;
-`;
-
-const SelectedDay = styled(Day)`
-  background-color: ${(p) => clr(p.theme.datePickerSelectedDayColorBg)};
-  color: ${(p) => clr(p.theme.datePickerSelectedDayColorText)};
-`;
-
-const DayInRange = styled(Day)`
-  background-color: ${(p) =>
-    clr([
-      ...p.theme.colorText.slice(0, 3),
-      (p.theme.colorText[3] || 1) * 0.05,
-    ] as Color)};
-`;
-
-const firstDayOfWeekIndexesMap = {
-  monday: [6, 0, 1, 2, 3, 4, 5],
-  saturday: [1, 2, 3, 4, 5, 6, 0],
-  sunday: [0, 1, 2, 3, 4, 5, 6],
-};
-
-const DatePickerCalendar: React.FC<DatePickerCalendarProps> = ({
-  firstDayOfWeek,
-  locale,
-  value,
-  onSelect = () => {},
-}) => {
-  const valueRef = useRef(value);
-  useEffect(() => {
-    valueRef.current = value;
-  }, [value]);
-
-  const onSelectRef = useRef(onSelect);
-  useEffect(() => {
-    onSelectRef.current = onSelect;
-  }, [onSelect]);
-
-  const { selectedMonth, updateMonth, days } = useDatePickerCalendar({
-    value,
-    firstDayOfWeek,
-  });
-
-  const getDayProps = useCallback<
-    (date: Date) => HTMLAttributes<HTMLDivElement>
-  >(
-    (date: Date) => ({
-      tabIndex: 0,
-      role: 'button',
-      'aria-label': getAccessibilityDateLabel(date, locale),
-      onClick: () => {
-        onSelectRef.current(date);
-      },
-      onKeyDown: (e) => {
-        if (['Enter', ' '].includes(e.key)) {
-          onSelectRef.current(date);
-          e.preventDefault();
-        }
-      },
-      onMouseDown: (e) => e.preventDefault(),
-    }),
-    [locale]
-  );
-
-  return (
-    <>
-      <MonthContainer>
-        <Button
-          type='ghost'
-          wide='never'
-          size='small'
-          onClick={() => updateMonth(-1)}
-          aria-label={locale.prevMonthLabel}
-        >
-          <Left />
-        </Button>
-        <Month>
-          {locale.months[selectedMonth.month]} {selectedMonth.year}
-        </Month>
-        <Button
-          type='ghost'
-          wide='never'
-          size='small'
-          onClick={() => updateMonth(1)}
-          aria-label={locale.nextMonthLabel}
-        >
-          <Right />
-        </Button>
-      </MonthContainer>
-
-      <Calendar>
-        {Array(7)
-          .fill(0)
-          .map((_, index) => {
-            const item = firstDayOfWeekIndexesMap[firstDayOfWeek][index];
-            return <DayOfWeek key={item}>{item}</DayOfWeek>;
-          })}
-
-        {days.map(({ type, date }) => {
-          if (type === 'dayAnotherMonth') {
-            return (
-              <DayAnotherMonth key={date.toISOString()} {...getDayProps(date)}>
-                {date.getDate()}
-              </DayAnotherMonth>
-            );
-          }
-          if (type === 'selectedDay') {
-            return (
-              <SelectedDay key={date.toISOString()} {...getDayProps(date)}>
-                {date.getDate()}
-              </SelectedDay>
-            );
-          }
-          if (type === 'dayInRange') {
-            return (
-              <DayInRange key={date.toISOString()} {...getDayProps(date)}>
-                {date.getDate()}
-              </DayInRange>
-            );
-          }
-          if (type === 'today') {
-            return (
-              <Today key={date.toISOString()} {...getDayProps(date)}>
-                {date.getDate()}
-              </Today>
-            );
-          }
-          return (
-            <Day key={date.toISOString()} {...getDayProps(date)}>
-              {date.getDate()}
-            </Day>
-          );
-        })}
-      </Calendar>
-    </>
-  );
-};
-
-export default DatePickerCalendar;

package/src/TimePicker/index.tsx

@@ -1,144 +0,0 @@
-import { useTime } from '@os-design/time-picker-utils';
-import { useForwardedRef, useForwardedState } from '@os-design/utils';
-import { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
-import Button from '../Button/index.js';
-import Input, { type InputProps } from '../Input/index.js';
-
-export interface TimePickerProps
-  extends Omit<InputProps, 'type' | 'value' | 'defaultValue' | 'onChange'> {
-  /**
-   * The time notation.
-   * @default 12-hour
-   */
-  notation?: '12-hour' | '24-hour';
-  /**
-   * The selected date.
-   * @default undefined
-   */
-  value?: Date;
-  /**
-   * The default value.
-   * @default undefined
-   */
-  defaultValue?: Date;
-  /**
-   * The change event handler.
-   * @default undefined
-   */
-  onChange?: (value: Date) => void;
-}
-
-interface Selection {
-  start: number;
-  end: number;
-}
-
-/**
- * The component to choose a time.
- */
-const TimePicker = forwardRef<HTMLInputElement, TimePickerProps>(
-  (
-    {
-      notation = '12-hour',
-      value,
-      defaultValue,
-      onChange = () => {},
-      onSelect = () => {},
-      onKeyDown = () => {},
-      disabled = false,
-      right,
-      ...rest
-    },
-    ref
-  ) => {
-    const [inputRef, mergedInputRef] = useForwardedRef(ref);
-    const [forwardedValue, setForwardedValue] = useForwardedState({
-      value,
-      defaultValue,
-      onChange,
-    });
-    const [selection, setSelection] = useState<Selection>({ start: 0, end: 0 });
-
-    const { time, isPm, changePeriod, keyHandler } = useTime({
-      notation,
-      selection,
-      setSelection: (nextSelection) => {
-        if (inputRef.current) {
-          inputRef.current.setSelectionRange(
-            nextSelection.start,
-            nextSelection.end
-          );
-        }
-        setSelection(nextSelection);
-      },
-      forwardedValue,
-      setForwardedValue,
-    });
-
-    const rightComponent = useMemo(() => {
-      if (notation !== '12-hour' && !right) return null;
-      return (
-        <>
-          {notation === '12-hour' && (
-            <Button
-              type='ghost'
-              wide='never'
-              size='small'
-              disabled={disabled}
-              onClick={changePeriod}
-            >
-              {isPm ? 'PM' : 'AM'}
-            </Button>
-          )}
-          {right}
-        </>
-      );
-    }, [changePeriod, disabled, isPm, notation, right]);
-
-    const keyDownHandler = useCallback(
-      (e) => {
-        keyHandler(e.key, e.metaKey);
-        onKeyDown(e);
-        e.preventDefault();
-      },
-      [keyHandler, onKeyDown]
-    );
-
-    // Update the selection
-    useEffect(() => {
-      if (!inputRef.current) return;
-      inputRef.current.setSelectionRange(selection.start, selection.end);
-    }, [inputRef, selection]);
-
-    const selectHandler = useCallback(
-      (e) => {
-        // Update the selection state.
-        const { selectionStart, selectionEnd } = e.currentTarget;
-        setSelection({ start: selectionStart || 0, end: selectionEnd || 0 });
-        onSelect(e);
-      },
-      [onSelect]
-    );
-
-    return (
-      <Input
-        type='text'
-        inputMode='decimal'
-        role='spinbutton'
-        minLength={5}
-        maxLength={5}
-        disabled={disabled}
-        value={time}
-        right={rightComponent}
-        onSelect={selectHandler}
-        onKeyDown={keyDownHandler}
-        {...rest}
-        ref={mergedInputRef}
-      />
-    );
-  }
-);
-
-TimePicker.displayName = 'TimePicker';
-
-export default TimePicker;