@itwin/itwinui-react 3.16.1 → 5.0.0-alpha.1

package/esm/core/TimePicker/TimePicker.js

@@ -1,458 +0,0 @@
-import cx from 'classnames';
-import * as React from 'react';
-import { Box } from '../../utils/index.js';
-let isSameHour = (date1, date2, meridiem) => {
-  let adjustedHours = meridiem
-    ? formatHourFrom12(date1.getHours(), meridiem)
-    : date1.getHours();
-  if (!!meridiem)
-    return !!date2 && adjustedHours % 12 === date2.getHours() % 12;
-  return !!date2 && adjustedHours === date2.getHours();
-};
-let isSameMinute = (date1, date2) =>
-  !!date2 && date1.getMinutes() === date2.getMinutes();
-let isSameSecond = (date1, date2) =>
-  !!date2 && date1.getSeconds() === date2.getSeconds();
-let isSameTime = (date1, date2, precision, meridiem) => {
-  let isSameTime = true;
-  switch (precision) {
-    case 'seconds':
-      isSameTime = isSameSecond(date1, date2);
-      if (!isSameTime) break;
-    case 'minutes':
-      isSameTime = isSameMinute(date1, date2);
-      if (!isSameTime) break;
-    case 'hours':
-      isSameTime = isSameHour(date1, date2, meridiem);
-  }
-  return isSameTime;
-};
-let isSameMeridiem = (meridiem, date) =>
-  !!date && ('AM' === meridiem ? date.getHours() < 12 : date.getHours() >= 12);
-let formatHourFrom12 = (hour, meridiem) => {
-  let adjustedHour = hour % 12;
-  return 'PM' === meridiem ? adjustedHour + 12 : adjustedHour;
-};
-let setHours = (hour, date) =>
-  new Date(
-    date.getFullYear(),
-    date.getMonth(),
-    date.getDate(),
-    hour,
-    date.getMinutes(),
-    date.getSeconds(),
-  );
-let defaultCombinedRenderer = (date, precision) => {
-  let dateString = '';
-  switch (precision) {
-    case 'seconds':
-      dateString =
-        ':' +
-        date.getSeconds().toLocaleString(void 0, {
-          minimumIntegerDigits: 2,
-        });
-    case 'minutes':
-      dateString =
-        ':' +
-        date.getMinutes().toLocaleString(void 0, {
-          minimumIntegerDigits: 2,
-        }) +
-        dateString;
-    case 'hours':
-      dateString =
-        date.getHours().toLocaleString(void 0, {
-          minimumIntegerDigits: 2,
-        }) + dateString;
-  }
-  return dateString;
-};
-export const TimePicker = React.forwardRef((props, forwardedRef) => {
-  let {
-    date,
-    onChange,
-    use12Hours = false,
-    precision = 'minutes',
-    hourStep = 1,
-    minuteStep = 1,
-    secondStep = 1,
-    setFocusHour = false,
-    hourRenderer = (date) =>
-      date.getHours().toLocaleString(void 0, {
-        minimumIntegerDigits: 2,
-      }),
-    minuteRenderer = (date) =>
-      date.getMinutes().toLocaleString(void 0, {
-        minimumIntegerDigits: 2,
-      }),
-    secondRenderer = (date) =>
-      date.getSeconds().toLocaleString(void 0, {
-        minimumIntegerDigits: 2,
-      }),
-    meridiemRenderer = (meridiem) => meridiem,
-    useCombinedRenderer = false,
-    combinedRenderer = defaultCombinedRenderer,
-    className,
-    ...rest
-  } = props;
-  let [selectedTime, setSelectedTime] = React.useState(date);
-  let [focusedTime, setFocusedTime] = React.useState(
-    selectedTime ?? new Date(),
-  );
-  let [meridiem, setMeridiem] = React.useState(
-    use12Hours ? (focusedTime?.getHours() > 11 ? 'PM' : 'AM') : void 0,
-  );
-  React.useEffect(() => {
-    setFocusedTime(date ?? new Date());
-    setSelectedTime(date);
-  }, [date]);
-  let onHourClick = (date) => {
-    let adjustedHour = use12Hours
-      ? formatHourFrom12(date.getHours(), meridiem)
-      : date.getHours();
-    let adjustedSelectedTime = setHours(
-      adjustedHour,
-      selectedTime ?? new Date(),
-    );
-    updateCurrentTime(adjustedSelectedTime);
-  };
-  let onTimeClick = (date) => {
-    let adjustedHour = use12Hours
-      ? formatHourFrom12(date.getHours(), meridiem)
-      : date.getHours();
-    let adjustedSelectedTime = setHours(adjustedHour, date);
-    updateCurrentTime(adjustedSelectedTime);
-  };
-  let onMeridiemClick = (value) => {
-    let adjustedSelectedTime = selectedTime ?? new Date();
-    let currentHours = adjustedSelectedTime.getHours();
-    setMeridiem(value);
-    if ('AM' === value && currentHours > 11)
-      adjustedSelectedTime = setHours(currentHours - 12, adjustedSelectedTime);
-    if ('PM' === value && currentHours <= 12)
-      adjustedSelectedTime = setHours(currentHours + 12, adjustedSelectedTime);
-    updateCurrentTime(adjustedSelectedTime);
-  };
-  let updateCurrentTime = (time) => {
-    let adjustedTime = time;
-    if ('hours' === precision)
-      adjustedTime = new Date(
-        time.getFullYear(),
-        time.getMonth(),
-        time.getDate(),
-        time.getHours(),
-        0,
-        0,
-      );
-    if ('minutes' === precision)
-      adjustedTime = new Date(
-        time.getFullYear(),
-        time.getMonth(),
-        time.getDate(),
-        time.getHours(),
-        time.getMinutes(),
-        0,
-      );
-    setFocusedTime(adjustedTime);
-    setSelectedTime(adjustedTime);
-    onChange?.(adjustedTime);
-  };
-  let onHourFocus = (date) => {
-    let adjustedHour = use12Hours
-      ? formatHourFrom12(date.getHours(), meridiem)
-      : date.getHours();
-    setFocusedTime(setHours(adjustedHour, focusedTime));
-  };
-  let onTimeFocus = (date) => {
-    let adjustedHour = use12Hours
-      ? formatHourFrom12(date.getHours(), meridiem)
-      : date.getHours();
-    setFocusedTime(setHours(adjustedHour, date));
-  };
-  let onMeridiemFocus = (value) => {
-    let adjustedSelectedTime = selectedTime ?? new Date();
-    let currentHours = adjustedSelectedTime.getHours();
-    if ('AM' === value && currentHours > 11) {
-      setMeridiem(value);
-      adjustedSelectedTime = setHours(currentHours - 12, adjustedSelectedTime);
-    }
-    if ('PM' === value && currentHours <= 12) {
-      setMeridiem(value);
-      adjustedSelectedTime = setHours(currentHours + 12, adjustedSelectedTime);
-    }
-    setFocusedTime(adjustedSelectedTime);
-  };
-  let generateDataList = (size, value, step) => {
-    let data = [];
-    for (let i = 0; i < size; i++) if (i % step === 0) data.push(value(i));
-    return data;
-  };
-  let time = React.useMemo(() => {
-    let time = selectedTime ?? new Date();
-    let data = [];
-    let hoursArray = Array.from(Array(use12Hours ? 12 : 24).keys())
-      .filter((i) => i % hourStep === 0)
-      .map((i) => (use12Hours && 0 === i ? 12 : i));
-    let minutesArray = Array.from(Array(60).keys()).filter(
-      (i) => i % minuteStep === 0,
-    );
-    let secondsArray = Array.from(Array(60).keys()).filter(
-      (i) => i % secondStep === 0,
-    );
-    hoursArray.forEach((hour) => {
-      if ('hours' === precision)
-        data.push(
-          new Date(
-            time.getFullYear(),
-            time.getMonth(),
-            time.getDate(),
-            hour,
-            time.getMinutes(),
-            time.getSeconds(),
-          ),
-        );
-      else
-        minutesArray.forEach((minute) => {
-          if ('minutes' === precision)
-            data.push(
-              new Date(
-                time.getFullYear(),
-                time.getMonth(),
-                time.getDate(),
-                hour,
-                minute,
-                time.getSeconds(),
-              ),
-            );
-          else
-            secondsArray.forEach((second) => {
-              data.push(
-                new Date(
-                  time.getFullYear(),
-                  time.getMonth(),
-                  time.getDate(),
-                  hour,
-                  minute,
-                  second,
-                ),
-              );
-            });
-        });
-    });
-    return data;
-  }, [hourStep, minuteStep, secondStep, selectedTime, use12Hours, precision]);
-  let hours = React.useMemo(() => {
-    let time = selectedTime ?? new Date();
-    return generateDataList(
-      use12Hours ? 12 : 24,
-      (i) =>
-        new Date(
-          time.getFullYear(),
-          time.getMonth(),
-          time.getDate(),
-          use12Hours && 0 === i ? 12 : i,
-          time.getMinutes(),
-          time.getSeconds(),
-        ),
-      hourStep,
-    );
-  }, [hourStep, selectedTime, use12Hours]);
-  let minutes = React.useMemo(() => {
-    let time = selectedTime ?? new Date();
-    return generateDataList(
-      60,
-      (i) =>
-        new Date(
-          time.getFullYear(),
-          time.getMonth(),
-          time.getDate(),
-          time.getHours(),
-          i,
-          time.getSeconds(),
-        ),
-      minuteStep,
-    );
-  }, [minuteStep, selectedTime]);
-  let seconds = React.useMemo(() => {
-    let time = selectedTime ?? new Date();
-    return generateDataList(
-      60,
-      (i) =>
-        new Date(
-          time.getFullYear(),
-          time.getMonth(),
-          time.getDate(),
-          time.getHours(),
-          time.getMinutes(),
-          i,
-        ),
-      secondStep,
-    );
-  }, [secondStep, selectedTime]);
-  return React.createElement(
-    Box,
-    {
-      className: cx('iui-time-picker', className),
-      ref: forwardedRef,
-      ...rest,
-    },
-    useCombinedRenderer
-      ? React.createElement(TimePickerColumn, {
-          data: time,
-          isSameFocused: (val) =>
-            isSameTime(
-              val,
-              focusedTime,
-              precision,
-              use12Hours ? meridiem : void 0,
-            ),
-          isSameSelected: (val) =>
-            isSameTime(
-              val,
-              selectedTime,
-              precision,
-              use12Hours ? meridiem : void 0,
-            ),
-          onFocusChange: onTimeFocus,
-          onSelectChange: onTimeClick,
-          setFocus: setFocusHour,
-          precision: precision,
-          valueRenderer: combinedRenderer,
-        })
-      : React.createElement(
-          React.Fragment,
-          null,
-          React.createElement(TimePickerColumn, {
-            data: hours,
-            isSameFocused: (val) =>
-              isSameHour(val, focusedTime, use12Hours ? meridiem : void 0),
-            isSameSelected: (val) =>
-              isSameHour(val, selectedTime, use12Hours ? meridiem : void 0),
-            onFocusChange: onHourFocus,
-            onSelectChange: onHourClick,
-            setFocus: setFocusHour,
-            valueRenderer: hourRenderer,
-          }),
-          'hours' !== precision &&
-            React.createElement(TimePickerColumn, {
-              data: minutes,
-              isSameFocused: (val) => isSameMinute(val, focusedTime),
-              isSameSelected: (val) => isSameMinute(val, selectedTime),
-              onFocusChange: (date) => setFocusedTime(date),
-              onSelectChange: (date) => updateCurrentTime(date),
-              valueRenderer: minuteRenderer,
-            }),
-          'seconds' === precision &&
-            React.createElement(TimePickerColumn, {
-              data: seconds,
-              isSameFocused: (val) => isSameSecond(val, focusedTime),
-              isSameSelected: (val) => isSameSecond(val, selectedTime),
-              onFocusChange: (date) => setFocusedTime(date),
-              onSelectChange: (date) => updateCurrentTime(date),
-              valueRenderer: secondRenderer,
-            }),
-        ),
-    use12Hours &&
-      React.createElement(TimePickerColumn, {
-        data: ['AM', 'PM'],
-        isSameFocused: (val) => isSameMeridiem(val, focusedTime),
-        isSameSelected: (val) => isSameMeridiem(val, selectedTime),
-        onFocusChange: (date) => onMeridiemFocus(date),
-        onSelectChange: (value) => onMeridiemClick(value),
-        valueRenderer: meridiemRenderer,
-        className: 'iui-period',
-      }),
-  );
-});
-let TimePickerColumn = (props) => {
-  let {
-    data,
-    onFocusChange,
-    onSelectChange,
-    isSameFocused,
-    isSameSelected,
-    setFocus = false,
-    valueRenderer,
-    precision = 'minutes',
-    className = 'iui-time',
-  } = props;
-  let needFocus = React.useRef(setFocus);
-  let handleTimeKeyDown = (
-    event,
-    maxValue,
-    onFocus,
-    onSelect,
-    currentValue,
-  ) => {
-    if (event.altKey) return;
-    switch (event.key) {
-      case 'ArrowDown':
-        if (currentValue + 1 > maxValue) break;
-        onFocus(currentValue + 1);
-        needFocus.current = true;
-        event.preventDefault();
-        break;
-      case 'ArrowUp':
-        if (currentValue - 1 < 0) break;
-        onFocus(currentValue - 1);
-        needFocus.current = true;
-        event.preventDefault();
-        break;
-      case 'Enter':
-      case ' ':
-      case 'Spacebar':
-        onSelect(currentValue);
-        event.preventDefault();
-        break;
-    }
-  };
-  return React.createElement(
-    Box,
-    {
-      className: `${className}`,
-    },
-    React.createElement(
-      'ol',
-      null,
-      data.map((value, index) => {
-        let isSameFocus = isSameFocused(value);
-        return React.createElement(
-          Box,
-          {
-            as: 'li',
-            onKeyDown: (event) => {
-              handleTimeKeyDown(
-                event,
-                data.length - 1,
-                (index) => onFocusChange(data[index]),
-                (index) => onSelectChange(data[index]),
-                index,
-              );
-            },
-            className: cx({
-              'iui-selected': isSameSelected(value),
-            }),
-            key: index,
-            tabIndex: isSameFocus ? 0 : void 0,
-            ref: (ref) => {
-              if (!ref || !isSameFocus) return;
-              setTimeout(() => {
-                ref.scrollIntoView({
-                  block: 'nearest',
-                  inline: 'nearest',
-                });
-                if (needFocus.current) {
-                  ref.focus();
-                  needFocus.current = false;
-                }
-              });
-            },
-            onClick: () => {
-              onSelectChange(value);
-            },
-          },
-          valueRenderer(value, precision),
-        );
-      }),
-    ),
-  );
-};

package/esm/core/Toast/Toast.d.ts

@@ -1,78 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-export type ToastCategory = 'informational' | 'negative' | 'positive' | 'warning';
-export type ToastProps = {
-    /**
-     * Internal id of the toast. Used for closing the toasts.
-     */
-    id: number;
-    /**
-     * Content of the Toast message
-     */
-    content: React.ReactNode;
-    /**
-     * Passes props to toast and content
-     */
-    domProps?: {
-        toastProps?: React.ComponentProps<'div'>;
-        contentProps?: React.ComponentProps<'div'>;
-    };
-    /**
-     * Category of the Toast, which controls the border color, as well as the category icon.
-     */
-    category: ToastCategory;
-    /**
-     * The Type of the Toast.
-     * Persisting Toasts will not be closed automatically, and will contain a close button.
-     * Temporary Toasts will automatically close after 7 seconds and will not contain a close button.
-     * @default 'temporary'
-     */
-    type?: 'persisting' | 'temporary';
-    /**
-     * Controlled boolean prop indicating whether the toast is visible.
-     */
-    isVisible?: boolean;
-    /**
-     * Duration of the toast in millisecond.
-     * @default 7000
-     */
-    duration?: number;
-    /**
-     * Boolean indicating when the close button is visible.
-     * When false, the toast will not have any close button.
-     */
-    hasCloseButton?: boolean;
-    /**
-     * Props for a button/link that can be used to perform an action
-     * (e.g. to show additional information).
-     */
-    link?: {
-        title: string;
-    } & Omit<React.ComponentPropsWithoutRef<'button'>, 'children'>;
-    /**
-     * Function called when the toast is all the way closed.
-     */
-    onRemove?: () => void;
-    /**
-     * Element to which the toast will animate out to.
-     */
-    animateOutTo?: HTMLElement | null;
-};
-/**
- * Generic Toast Component
- * @example
- * <Toast type='persisting' content='Job processing completed.' category='positive' link={{onClick:() => {alert('Link callback')}, title:'View the report'}} />
- * <Toast type='temporary' content='Processing completed.' category='positive' />
- * <Toast type='temporary' content='26 files are available for synchronization.' category='informational' />
- * <Toast type='persisting' content='Job processing error.' category='negative' />
- */
-export declare const Toast: (props: ToastProps) => React.JSX.Element;
-export type ToastPresentationProps = Omit<ToastProps, 'duration' | 'id' | 'isVisible' | 'onRemove' | 'domProps'> & {
-    onClose?: () => void;
-    contentProps?: React.ComponentProps<'div'>;
-};
-/**
- * The presentational part of a toast, without any animation or logic.
- * @private
- */
-export declare const ToastPresentation: PolymorphicForwardRefComponent<"div", ToastPresentationProps>;