carbon-react 104.34.1 → 104.35.0

package/esm/components/date/date.component.d.ts

@@ -0,0 +1,29 @@
+export default DateInput;
+declare function DateInput({ adaptiveLabelBreakpoint, allowEmptyValue, autoFocus, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, disabled, disablePortal, helpAriaLabel, labelInline, minDate, maxDate, onBlur, onChange, onClick, onFocus, onKeyDown, pickerProps, readOnly, size, tooltipPosition, value, ...rest }: {
+    [x: string]: any;
+    adaptiveLabelBreakpoint: any;
+    allowEmptyValue: any;
+    autoFocus: any;
+    "data-component": any;
+    "data-element": any;
+    "data-role": any;
+    disabled: any;
+    disablePortal?: boolean | undefined;
+    helpAriaLabel: any;
+    labelInline: any;
+    minDate: any;
+    maxDate: any;
+    onBlur: any;
+    onChange: any;
+    onClick: any;
+    onFocus: any;
+    onKeyDown: any;
+    pickerProps?: {} | undefined;
+    readOnly: any;
+    size?: string | undefined;
+    tooltipPosition: any;
+    value: any;
+}): JSX.Element;
+declare namespace DateInput {
+    const propTypes: any;
+}

package/esm/components/date/date.component.js

@@ -0,0 +1,343 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import styledSystemPropTypes from "@styled-system/prop-types";
+import { additionalYears, findMatchedFormatAndValue, formattedValue, formatToISO, isDateValid, parseDate, parseISODate, checkISOFormatAndLength, getSeparator } from "./__internal__/utils";
+import useLocale from "../../hooks/__internal__/useLocale";
+import Events from "../../__internal__/utils/helpers/events";
+import { filterStyledSystemMarginProps, filterOutStyledSystemSpacingProps } from "../../style/utils";
+import getFormatData from "./__internal__/date-formats";
+import StyledDateInput from "./date.style";
+import Textbox from "../textbox";
+import DatePicker from "./__internal__/date-picker";
+import DateRangeContext from "../date-range/date-range.context";
+const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+
+const DateInput = ({
+  adaptiveLabelBreakpoint,
+  allowEmptyValue,
+  autoFocus,
+  "data-component": dataComponent,
+  "data-element": dataElement,
+  "data-role": dataRole,
+  disabled,
+  disablePortal = false,
+  helpAriaLabel,
+  labelInline,
+  minDate,
+  maxDate,
+  onBlur,
+  onChange,
+  onClick,
+  onFocus,
+  onKeyDown,
+  pickerProps = {},
+  readOnly,
+  size = "medium",
+  tooltipPosition,
+  value,
+  ...rest
+}) => {
+  const wrapperRef = useRef();
+  const parentRef = useRef();
+  const inputRef = useRef();
+  const pickerRef = useRef();
+  const alreadyFocused = useRef(false);
+  const isBlurBlocked = useRef(false);
+  const focusedViaPicker = useRef(false);
+  const l = useLocale();
+  const {
+    dateFnsLocale
+  } = l.date;
+  const {
+    format,
+    formats
+  } = useMemo(() => getFormatData(dateFnsLocale()), [dateFnsLocale]);
+  const {
+    inputRefMap,
+    setInputRefMap
+  } = useContext(DateRangeContext);
+  const inputName = dataElement === null || dataElement === void 0 ? void 0 : dataElement.split("-")[0];
+  const [open, setOpen] = useState(false);
+  const [selectedDays, setSelectedDays] = useState(checkISOFormatAndLength(value) ? parseISODate(value) : parseDate(format, value));
+  const isInitialValue = useRef(true);
+
+  const computeInvalidRawValue = inputValue => allowEmptyValue && !inputValue.length ? inputValue : null;
+
+  const buildCustomEvent = ev => {
+    const {
+      id,
+      name
+    } = ev.target;
+    const [matchedFormat, matchedValue] = findMatchedFormatAndValue(ev.target.value, formats);
+    const formattedValueString = ev.type === "blur" ? formattedValue(format, selectedDays) : ev.target.value;
+    const rawValue = isDateValid(parseDate(matchedFormat, matchedValue)) ? formatToISO(matchedFormat, matchedValue) : computeInvalidRawValue(ev.target.value);
+    ev.target = { ...(name && {
+        name
+      }),
+      ...(id && {
+        id
+      }),
+      value: {
+        formattedValue: formattedValueString,
+        rawValue
+      }
+    };
+    return ev;
+  };
+
+  const handleChange = ev => {
+    isInitialValue.current = false;
+    onChange(buildCustomEvent(ev));
+  };
+
+  const focusInput = () => {
+    var _inputRef$current;
+
+    focusedViaPicker.current = true;
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+  };
+
+  const handleDayClick = (day, ev) => {
+    setSelectedDays(day);
+    onChange(buildCustomEvent({ ...ev,
+      target: { ...ev.target,
+        value: formattedValue(format, day)
+      }
+    }));
+    focusInput();
+    setOpen(false);
+  };
+
+  const handleBlur = ev => {
+    if (disabled || readOnly) {
+      return;
+    }
+
+    let event;
+
+    if (isDateValid(selectedDays)) {
+      event = buildCustomEvent(ev);
+
+      if (formattedValue(format, selectedDays) !== value) {
+        onChange(event);
+      }
+    } else {
+      const {
+        id,
+        name
+      } = ev.target;
+      ev.target = { ...(name && {
+          name
+        }),
+        ...(id && {
+          id
+        }),
+        value: {
+          formattedValue: ev.target.value,
+          rawValue: computeInvalidRawValue(ev.target.value)
+        }
+      };
+      event = ev;
+    }
+
+    if (isBlurBlocked.current) {
+      return;
+    }
+
+    if (onBlur) {
+      onBlur(event);
+    }
+  };
+
+  const handleFocus = ev => {
+    if (disabled || readOnly) {
+      return;
+    }
+
+    isBlurBlocked.current = false;
+
+    if (!open && !alreadyFocused.current) {
+      setOpen(true);
+    } else {
+      alreadyFocused.current = false;
+    }
+
+    if (onFocus) {
+      onFocus(ev);
+    }
+  };
+
+  const handleKeyDown = ev => {
+    if (onKeyDown) {
+      onKeyDown(ev);
+    }
+
+    if (Events.isTabKey(ev)) {
+      setOpen(false);
+      alreadyFocused.current = false;
+    }
+  };
+
+  const handleClick = ev => {
+    if (disabled || readOnly) {
+      return;
+    }
+
+    if (onClick) {
+      onClick(ev);
+    }
+  };
+
+  const handleMouseDown = ev => {
+    if (disabled || readOnly) {
+      return;
+    }
+
+    isBlurBlocked.current = true;
+
+    if (ev.target.type === "text" && !open) {
+      setOpen(true);
+    } else if (ev.target.type !== "text") {
+      alreadyFocused.current = true;
+      setOpen(prev => !prev);
+    }
+  };
+
+  const handlePickerMouseDown = () => {
+    isBlurBlocked.current = true;
+  };
+
+  const assignInput = input => {
+    var _inputRefMap$inputNam;
+
+    inputRef.current = input.current;
+    parentRef.current = input.current.parentElement;
+
+    if (inputRefMap && ((_inputRefMap$inputNam = inputRefMap[inputName]) === null || _inputRefMap$inputNam === void 0 ? void 0 : _inputRefMap$inputNam.setOpen) !== setOpen) {
+      setInputRefMap({
+        [inputName]: {
+          isBlurBlocked,
+          setOpen
+        }
+      });
+    }
+  };
+
+  useEffect(() => {
+    const fnClosePicker = ev => {
+      if (open && !Events.composedPath(ev).includes(parentRef.current) && !Events.composedPath(ev).includes(pickerRef.current)) {
+        alreadyFocused.current = true;
+        inputRef.current.focus();
+        isBlurBlocked.current = false;
+        inputRef.current.blur();
+        setOpen(false);
+        alreadyFocused.current = false;
+      }
+    };
+
+    document.addEventListener("mousedown", fnClosePicker);
+    return function cleanup() {
+      document.removeEventListener("mousedown", fnClosePicker);
+    };
+  }, [open]);
+  useEffect(() => {
+    const [matchedFormat, matchedValue] = findMatchedFormatAndValue(value, formats);
+
+    if (matchedFormat && matchedValue && isDateValid(parseDate(matchedFormat, matchedValue))) {
+      setSelectedDays(parseDate(...additionalYears(matchedFormat, matchedValue)));
+    } else if (checkISOFormatAndLength(value)) {
+      setSelectedDays(parseISODate(value));
+    } else {
+      setSelectedDays(undefined);
+    }
+  }, [value, formats]);
+
+  const computedValue = () => {
+    if (checkISOFormatAndLength(value)) {
+      return formattedValue(format, parseISODate(value));
+    }
+
+    const valueSeparator = getSeparator(value);
+    const formatSeparator = getSeparator(format);
+
+    const replaceSeparators = () => value.split("").map(char => char === valueSeparator ? formatSeparator : char).join("");
+
+    if (isInitialValue.current && valueSeparator !== formatSeparator && isDateValid(parseDate(format, replaceSeparators()))) {
+      const [matchedFormat, matchedValue] = findMatchedFormatAndValue(replaceSeparators(), formats);
+      return formattedValue(format, parseDate(...additionalYears(matchedFormat, matchedValue)));
+    }
+
+    return value;
+  };
+
+  return /*#__PURE__*/React.createElement(StyledDateInput, _extends({
+    ref: wrapperRef,
+    role: "presentation",
+    size: size,
+    labelInline: labelInline,
+    "data-component": dataComponent || "date",
+    "data-element": dataElement,
+    "data-role": dataRole
+  }, filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(Textbox, _extends({}, filterOutStyledSystemSpacingProps(rest), {
+    value: computedValue(),
+    onBlur: handleBlur,
+    onChange: handleChange,
+    onClick: handleClick,
+    onFocus: handleFocus,
+    onKeyDown: handleKeyDown,
+    iconOnClick: handleClick,
+    onMouseDown: handleMouseDown,
+    iconOnMouseDown: handleMouseDown,
+    inputIcon: "calendar",
+    labelInline: labelInline,
+    inputRef: assignInput,
+    adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
+    tooltipPosition: tooltipPosition,
+    helpAriaLabel: helpAriaLabel,
+    autoFocus: autoFocus,
+    size: size,
+    disabled: disabled,
+    readOnly: readOnly
+  })), open && /*#__PURE__*/React.createElement(DatePicker, {
+    disablePortal: disablePortal,
+    inputElement: parentRef,
+    pickerProps: pickerProps,
+    selectedDays: selectedDays,
+    setSelectedDays: setSelectedDays,
+    onDayClick: handleDayClick,
+    minDate: minDate,
+    maxDate: maxDate,
+    ref: pickerRef,
+    pickerMouseDown: handlePickerMouseDown
+  }));
+};
+
+DateInput.propTypes = { ...Textbox.propTypes,
+  ...marginPropTypes,
+
+  /** Pass any props that match the [DayPickerProps](https://react-day-picker.js.org/api/DayPicker)
+   * interface to override default behaviors
+   * */
+  pickerProps: PropTypes.object,
+
+  /** Boolean to toggle where DatePicker is rendered in relation to the Date Input */
+  disablePortal: PropTypes.bool,
+
+  /** Minimum possible date YYYY-MM-DD */
+  minDate: PropTypes.string,
+
+  /** Maximum possible date YYYY-MM-DD */
+  maxDate: PropTypes.string,
+
+  /** Specify a callback triggered on change */
+  onChange: PropTypes.func.isRequired,
+
+  /** The current date string */
+  value: PropTypes.string.isRequired,
+
+  /** Boolean to allow the input to have an empty value */
+  allowEmptyValue: PropTypes.bool
+};
+export default DateInput;

package/esm/components/date/date.d.ts

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { DayPickerProps } from "react-day-picker";
+import { TextboxProps } from "../textbox/textbox";
+
+export interface DateInputProps
+  extends Omit<
+    TextboxProps,
+    | "value"
+    | "formattedValue"
+    | "rawValue"
+    | "onChange"
+    | "onMouseDown"
+    | "onChangeDeferred"
+    | "deferTimeout"
+    | "children"
+    | "leftChildren"
+    | "placeholder"
+    | "iconOnClick"
+    | "iconOnMouseDown"
+    | "enforceCharacterLimit"
+    | "characterLimit"
+    | "warnOverLimit"
+    | "iconTabIndex"
+  > {
+  /** Boolean to allow the input to have an empty value */
+  allowEmptyValue?: boolean;
+  /** Boolean to toggle where DatePicker is rendered in relation to the Date Input */
+  disablePortal?: boolean;
+  /** Minimum possible date YYYY-MM-DD */
+  minDate?: string;
+  /** Maximum possible date YYYY-MM-DD */
+  maxDate?: string;
+  /** Specify a callback triggered on change */
+  onChange: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+  /** The current date string */
+  value: string;
+  /** Pass any props that match the DayPickerProps interface to override default behaviors */
+  pickerProps?: DayPickerProps;
+}
+
+declare function DateInput(props: DateInputProps): JSX.Element;
+
+export default DateInput;

package/esm/components/date/date.style.d.ts

@@ -0,0 +1,2 @@
+export default StyledDateInput;
+declare const StyledDateInput: import("styled-components").StyledComponent<"div", any, {}, never>;

package/esm/components/date/date.style.js

@@ -0,0 +1,28 @@
+import styled from "styled-components";
+import PropTypes from "prop-types";
+import { margin } from "styled-system";
+import baseTheme from "../../style/themes/base";
+import StyledInputPresentation from "../../__internal__/input/input-presentation.style";
+const datePickerWidth = {
+  large: "140px",
+  medium: "135px",
+  small: "120px"
+};
+const StyledDateInput = styled.div`
+  ${margin}
+
+  & ${StyledInputPresentation} {
+    flex: none;
+    width: ${({
+  size
+}) => datePickerWidth[size]};
+  }
+`;
+StyledDateInput.propTypes = {
+  size: PropTypes.oneOf(["small", "medium", "large"])
+};
+StyledDateInput.defaultProps = {
+  theme: baseTheme,
+  size: "medium"
+};
+export default StyledDateInput;

package/esm/components/date/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./date";

package/esm/components/date/index.js

@@ -0,0 +1 @@
+export { default } from "./date.component";

package/esm/components/date-range/date-range-context.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+
+interface DateInputRefMap {
+  isBlurBlocked: { current: boolean };
+  setOpen: null | ((open: boolean) => void);
+}
+
+export interface DateRangeContextProps {
+  inputRefMap: {
+    start: DateInputRefMap;
+    end: DateInputRefMap;
+  };
+  setInputRefMap: (newState: DateInputRefMap) => void;
+}
+
+declare const DateRangeContext: React.Context<DateRangeContextProps>;
+export default DateRangeContext;

package/esm/components/date-range/date-range.component.d.ts

@@ -0,0 +1,37 @@
+export default DateRange;
+declare function DateRange({ endDateProps, id, labelsInline, name, onBlur, onChange, startDateProps, tooltipPosition, validationOnLabel, value, ...rest }: {
+    [x: string]: any;
+    endDateProps?: {} | undefined;
+    id: any;
+    labelsInline: any;
+    name: any;
+    onBlur: any;
+    onChange: any;
+    startDateProps?: {} | undefined;
+    tooltipPosition: any;
+    validationOnLabel: any;
+    value: any;
+}): JSX.Element;
+declare namespace DateRange {
+    namespace propTypes {
+        const endLabel: PropTypes.Requireable<string>;
+        const onChange: PropTypes.Validator<(...args: any[]) => any>;
+        const onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        const value: PropTypes.Validator<(string | null | undefined)[]>;
+        const startError: PropTypes.Requireable<string | boolean>;
+        const startWarning: PropTypes.Requireable<string | boolean>;
+        const startInfo: PropTypes.Requireable<string | boolean>;
+        const endError: PropTypes.Requireable<string | boolean>;
+        const endWarning: PropTypes.Requireable<string | boolean>;
+        const endInfo: PropTypes.Requireable<string | boolean>;
+        const validationOnLabel: PropTypes.Requireable<boolean>;
+        const startLabel: PropTypes.Requireable<string>;
+        const labelsInline: PropTypes.Requireable<boolean>;
+        const startDateProps: PropTypes.Requireable<PropTypes.InferProps<any>>;
+        const endDateProps: PropTypes.Requireable<PropTypes.InferProps<any>>;
+        const name: PropTypes.Requireable<string>;
+        const id: PropTypes.Requireable<string>;
+        const tooltipPosition: PropTypes.Requireable<string>;
+    }
+}
+import PropTypes from "prop-types";