@kaizen/components 1.46.0 → 1.47.0

package/dist/esm/Content/Content.mjs

@@ -1,25 +0,0 @@
-import { __rest, __assign } from 'tslib';
-import React from 'react';
-import classnames from 'classnames';
-import styles from './Content.module.scss.mjs';
-
-/**
- * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3086156812/Layout Guidance} |
- * {@link https://cultureamp.design/?path=/docs/components-content--docs Storybook}
- */
-const Content = /*#__PURE__*/function () {
-  const Content = /*#__PURE__*/React.forwardRef(function (_a, ref) {
-    var children = _a.children,
-      style = _a.style,
-      classNameOverride = _a.classNameOverride,
-      restProps = __rest(_a, ["children", "style", "classNameOverride"]);
-    return /*#__PURE__*/React.createElement("div", __assign({
-      ref: ref,
-      className: classnames(styles.content, classNameOverride),
-      style: style
-    }, restProps), children);
-  });
-  Content.displayName = "Content";
-  return Content;
-}();
-export { Content };

package/dist/esm/Content/Content.module.scss.mjs

@@ -1,4 +0,0 @@
-var styles = {
-  "content": "Content-module_content__ZeTRs"
-};
-export { styles as default };

package/dist/esm/DateInput/DateInput/DateInput.mjs

@@ -1,39 +0,0 @@
-import { __rest, __assign } from 'tslib';
-import React from 'react';
-import classnames from 'classnames';
-import { Input } from '../../Input/Input/Input.mjs';
-import '../../Input/InputRange/InputRange.mjs';
-import '../../Input/InputSearch/InputSearch.mjs';
-import { Label } from '../../Label/Label.mjs';
-import { isRefObject } from '../../utils/isRefObject.mjs';
-import styles from './DateInput.module.scss.mjs';
-const DateInput = /*#__PURE__*/function () {
-  const DateInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
-    var id = _a.id,
-      labelText = _a.labelText,
-      disabled = _a.disabled,
-      _b = _a.isReversed,
-      isReversed = _b === void 0 ? false : _b,
-      classNameOverride = _a.classNameOverride,
-      inputProps = __rest(_a, ["id", "labelText", "disabled", "isReversed", "classNameOverride"]);
-    return /*#__PURE__*/React.createElement("div", {
-      className: classnames(styles.dateInput, classNameOverride)
-    }, /*#__PURE__*/React.createElement(Label, {
-      htmlFor: id,
-      labelText: labelText,
-      reversed: isReversed,
-      disabled: disabled
-    }), /*#__PURE__*/React.createElement(Input, __assign({
-      inputRef: isRefObject(ref) ? ref : undefined,
-      id: id,
-      type: "text",
-      autoComplete: "off",
-      classNameOverride: styles.input,
-      disabled: disabled,
-      reversed: isReversed
-    }, inputProps)));
-  });
-  DateInput.displayName = "DateInput";
-  return DateInput;
-}();
-export { DateInput };

package/dist/esm/DateInput/DateInput/DateInput.module.scss.mjs

@@ -1,5 +0,0 @@
-var styles = {
-  "dateInput": "DateInput-module_dateInput__f0Rs6",
-  "input": "DateInput-module_input__lVV0-"
-};
-export { styles as default };

package/dist/esm/DateInput/DateInputDescription/DateInputDescription.mjs

@@ -1,35 +0,0 @@
-import React from 'react';
-import { useIntl } from '@cultureamp/i18n-react-intl';
-import { LabelledMessage } from '../../LabelledMessage/LabelledMessage.mjs';
-import { formatDescriptionInputFormat } from './utils/formatDescriptionInputFormat.mjs';
-import styles from './DateInputDescription.module.scss.mjs';
-const DateInputDescription = /*#__PURE__*/function () {
-  const DateInputDescription = function (_a) {
-    var description = _a.description,
-      locale = _a.locale;
-    var formatMessage = useIntl().formatMessage;
-    var hasCustomDescription = typeof description === "string" && description !== "" || /*#__PURE__*/React.isValidElement(description);
-    var translatedInputFormatMessage = formatMessage({
-      id: "dateInputDescription.inputFormat",
-      defaultMessage: "Input format",
-      description: "Label for the 'Input format' field"
-    });
-    if (hasCustomDescription) {
-      return /*#__PURE__*/React.createElement("span", {
-        className: styles.dateInputDescription
-      }, /*#__PURE__*/React.createElement("span", null, description), /*#__PURE__*/React.createElement("span", {
-        className: styles.dateInputFormatContainer
-      }, "(", /*#__PURE__*/React.createElement(LabelledMessage, {
-        label: translatedInputFormatMessage,
-        message: formatDescriptionInputFormat(locale)
-      }), ")"));
-    }
-    return /*#__PURE__*/React.createElement(LabelledMessage, {
-      label: translatedInputFormatMessage,
-      message: formatDescriptionInputFormat(locale)
-    });
-  };
-  DateInputDescription.displayName = "DateInputDescription";
-  return DateInputDescription;
-}();
-export { DateInputDescription };

package/dist/esm/DateInput/DateInputDescription/DateInputDescription.module.scss.mjs

@@ -1,7 +0,0 @@
-var styles = {
-  "dateInputDescription": "DateInputDescription-module_dateInputDescription__dEWv8",
-  "dateInputFormatContainer": "DateInputDescription-module_dateInputFormatContainer__U-zur",
-  "descriptionInputFormat": "DateInputDescription-module_descriptionInputFormat__rQ-Z5",
-  "labelSeparator": "DateInputDescription-module_labelSeparator__L7Be4"
-};
-export { styles as default };

package/dist/esm/DateInput/DateInputDescription/utils/formatDescriptionInputFormat.mjs

@@ -1,7 +0,0 @@
-var formatDescriptionInputFormat = function (locale) {
-  var _a;
-  return (_a = locale.formatLong) === null || _a === void 0 ? void 0 : _a.date({
-    width: "short"
-  }).toLowerCase();
-};
-export { formatDescriptionInputFormat };

package/dist/esm/DateInput/DateInputWithIconButton/DateInputWithIconButton.mjs

@@ -1,39 +0,0 @@
-import { __rest, __assign } from 'tslib';
-import React from 'react';
-import classnames from 'classnames';
-import '../../Icon/subcomponents/SVG/SVG.mjs';
-import { DateStartIcon } from '../../Icon/DateStartIcon.mjs';
-import { isRefObject } from '../../utils/isRefObject.mjs';
-import { DateInput } from '../DateInput/DateInput.mjs';
-import styles from './DateInputWithIconButton.module.scss.mjs';
-const DateInputWithIconButton = /*#__PURE__*/function () {
-  const DateInputWithIconButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
-    var onButtonClick = _a.onButtonClick,
-      disabled = _a.disabled,
-      value = _a.value,
-      restProps = __rest(_a, ["onButtonClick", "disabled", "value"]);
-    var customRefObject = isRefObject(ref) ? ref.current : null;
-    var inputRef = customRefObject === null || customRefObject === void 0 ? void 0 : customRefObject.inputRef;
-    var buttonRef = customRefObject === null || customRefObject === void 0 ? void 0 : customRefObject.buttonRef;
-    var IconButton = /*#__PURE__*/React.createElement("button", {
-      ref: buttonRef,
-      type: "button",
-      onClick: onButtonClick,
-      "aria-label": value ? "Change date, ".concat(value) : "Choose date",
-      "aria-disabled": disabled,
-      disabled: disabled,
-      className: classnames(styles.iconButton, restProps["aria-expanded"] && styles.calendarActive, disabled && styles.disabled)
-    }, /*#__PURE__*/React.createElement(DateStartIcon, {
-      role: "presentation"
-    }));
-    return /*#__PURE__*/React.createElement(DateInput, __assign({
-      ref: inputRef,
-      disabled: disabled,
-      value: value,
-      endIconAdornment: IconButton
-    }, restProps));
-  });
-  DateInputWithIconButton.displayName = "DateInputWithIconButton";
-  return DateInputWithIconButton;
-}();
-export { DateInputWithIconButton };

package/dist/esm/DateInput/DateInputWithIconButton/DateInputWithIconButton.module.scss.mjs

@@ -1,6 +0,0 @@
-var styles = {
-  "iconButton": "DateInputWithIconButton-module_iconButton__W7YMX",
-  "calendarActive": "DateInputWithIconButton-module_calendarActive__b2Vze",
-  "disabled": "DateInputWithIconButton-module_disabled__0IRHh"
-};
-export { styles as default };

package/dist/esm/DatePicker/DatePicker.mjs

@@ -1,230 +0,0 @@
-import { __rest, __assign } from 'tslib';
-import React, { useRef, useId, useState, useEffect } from 'react';
-import { FocusOn } from 'react-focus-on';
-import { CalendarSingle } from '../Calendar/CalendarSingle/CalendarSingle.mjs';
-import '../Calendar/CalendarRange/CalendarRange.mjs';
-import { calculateDisabledDays } from '../Calendar/utils/calculateDisabledDays.mjs';
-import { formatDateAsNumeral } from '../Calendar/utils/formatDateAsNumeral.mjs';
-import { formatDateAsText } from '../Calendar/utils/formatDateAsText.mjs';
-import { isDisabledDate } from '../Calendar/utils/isDisabledDate.mjs';
-import { isInvalidDate } from '../Calendar/utils/isInvalidDate.mjs';
-import { isSelectingDayInCalendar } from '../Calendar/utils/isSelectingDayInCalendar.mjs';
-import { parseDateAsTextOrNumeral } from '../Calendar/utils/parseDateAsTextOrNumeral.mjs';
-import 'date-fns';
-import { setFocusInCalendar } from '../Calendar/utils/setFocusInCalendar.mjs';
-import { CalendarPopover } from '../Calendar/CalendarPopover/CalendarPopover.mjs';
-import { DateInputField } from './subcomponents/DateInputField/DateInputField.mjs';
-import { getLocale } from './utils/getLocale.mjs';
-import { validateDate } from './utils/validateDate.mjs';
-
-/**
- * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082061174/Date+Picker Guidance} |
- * {@link https://cultureamp.design/?path=/docs/components-date-controls-datepicker--docs Storybook}
- */
-const DatePicker = /*#__PURE__*/function () {
-  const DatePicker = function (_a) {
-    var propsId = _a.id,
-      _b = _a.buttonRef,
-      propsButtonRef = _b === void 0 ? useRef(null) : _b,
-      _c = _a.locale,
-      propsLocale = _c === void 0 ? "en-AU" : _c,
-      disabledDates = _a.disabledDates,
-      disabledDaysOfWeek = _a.disabledDaysOfWeek,
-      disabledRange = _a.disabledRange,
-      disabledBeforeAfter = _a.disabledBeforeAfter,
-      disabledBefore = _a.disabledBefore,
-      disabledAfter = _a.disabledAfter,
-      weekStartsOn = _a.weekStartsOn,
-      defaultMonth = _a.defaultMonth,
-      selectedDay = _a.selectedDay,
-      status = _a.status,
-      validationMessage = _a.validationMessage,
-      onInputClick = _a.onInputClick,
-      onInputFocus = _a.onInputFocus,
-      onInputChange = _a.onInputChange,
-      onInputBlur = _a.onInputBlur,
-      onButtonClick = _a.onButtonClick,
-      onDayChange = _a.onDayChange,
-      onValidate = _a.onValidate,
-      restDateInputFieldProps = __rest(_a, ["id", "buttonRef", "locale", "disabledDates", "disabledDaysOfWeek", "disabledRange", "disabledBeforeAfter", "disabledBefore", "disabledAfter", "weekStartsOn", "defaultMonth", "selectedDay", "status", "validationMessage", "onInputClick", "onInputFocus", "onInputChange", "onInputBlur", "onButtonClick", "onDayChange", "onValidate"]);
-    var reactId = useId();
-    var id = propsId !== null && propsId !== void 0 ? propsId : reactId;
-    var containerRef = useRef(null);
-    var inputRef = useRef(null);
-    var buttonRef = useRef((propsButtonRef === null || propsButtonRef === void 0 ? void 0 : propsButtonRef.current) || null);
-    var dateInputRefs = useRef({
-      inputRef: inputRef,
-      buttonRef: buttonRef
-    });
-    var _d = useState(""),
-      inputValue = _d[0],
-      setInputValue = _d[1];
-    var _e = useState(false),
-      isOpen = _e[0],
-      setIsOpen = _e[1];
-    var _f = useState(),
-      lastTrigger = _f[0],
-      setLastTrigger = _f[1];
-    var _g = useState(),
-      inbuiltStatus = _g[0],
-      setInbuiltStatus = _g[1];
-    var _h = useState(),
-      inbuiltValidationMessage = _h[0],
-      setInbuiltValidationMessage = _h[1];
-    var shouldUseInbuiltValidation = onValidate === undefined;
-    var locale = getLocale(propsLocale);
-    var disabledDays = calculateDisabledDays({
-      disabledDates: disabledDates,
-      disabledDaysOfWeek: disabledDaysOfWeek,
-      disabledRange: disabledRange,
-      disabledBeforeAfter: disabledBeforeAfter,
-      disabledBefore: disabledBefore,
-      disabledAfter: disabledAfter
-    });
-    var handleValidation = function (validationResponse) {
-      if (shouldUseInbuiltValidation) {
-        setInbuiltStatus(validationResponse.status);
-        setInbuiltValidationMessage(validationResponse.validationMessage);
-      } else {
-        onValidate(validationResponse);
-      }
-    };
-    var handleDayChange = function (date, newInputValue) {
-      var _a = validateDate({
-          date: date,
-          inputValue: newInputValue,
-          disabledDays: disabledDays
-        }),
-        validationResponse = _a.validationResponse,
-        newDate = _a.newDate;
-      handleValidation(validationResponse);
-      onDayChange(newDate);
-    };
-    var handleCalendarDayChange = function (date) {
-      if (!isDisabledDate(date, disabledDays)) {
-        var newInputValue = lastTrigger === "calendarButton" ? formatDateAsText(date, disabledDays, locale) : formatDateAsNumeral(date, locale);
-        setInputValue(newInputValue);
-        handleDayChange(date);
-        setIsOpen(false);
-      }
-    };
-    var handleInputClick = function (e) {
-      setIsOpen(true);
-      onInputClick === null || onInputClick === void 0 ? void 0 : onInputClick(e);
-    };
-    var handleInputFocus = function (e) {
-      setLastTrigger("inputFocus");
-      if (selectedDay) {
-        var newInputValue = formatDateAsNumeral(selectedDay, locale);
-        setInputValue(newInputValue);
-      }
-      onInputFocus === null || onInputFocus === void 0 ? void 0 : onInputFocus(e);
-    };
-    var handleInputChange = function (e) {
-      setInputValue(e.target.value);
-      onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(e);
-    };
-    var handleInputBlur = function (e) {
-      if (isSelectingDayInCalendar(e.relatedTarget)) return;
-      if (inputValue !== "") {
-        var parsedDate = parseDateAsTextOrNumeral(inputValue, locale);
-        if (!isInvalidDate(parsedDate)) {
-          setInputValue(formatDateAsText(parsedDate, disabledDays, locale));
-        }
-        handleDayChange(parsedDate, inputValue);
-        onInputBlur === null || onInputBlur === void 0 ? void 0 : onInputBlur(e);
-        return;
-      }
-      handleDayChange(undefined, inputValue);
-      onInputBlur === null || onInputBlur === void 0 ? void 0 : onInputBlur(e);
-    };
-    var handleKeyDown = function (e) {
-      if (e.key === "Enter") {
-        setIsOpen(false);
-        var parsedDate = parseDateAsTextOrNumeral(inputValue, locale);
-        handleDayChange(parsedDate, e.currentTarget.value);
-      }
-      if (e.key === "ArrowDown" || e.key === "ArrowDown" && e.altKey === true) {
-        e.preventDefault();
-        setIsOpen(true);
-        setLastTrigger("inputKeydown");
-      }
-    };
-    var handleButtonClick = function (e) {
-      setIsOpen(!isOpen);
-      setLastTrigger("calendarButton");
-      onButtonClick === null || onButtonClick === void 0 ? void 0 : onButtonClick(e);
-    };
-    var handleCalendarMount = function (calendarElement) {
-      if (lastTrigger === "inputFocus") return;
-      setFocusInCalendar(calendarElement, selectedDay);
-    };
-    var handleReturnFocus = function () {
-      var _a, _b;
-      if (lastTrigger === "inputKeydown" || lastTrigger === "inputFocus") {
-        return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-      }
-      (_b = buttonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
-    };
-    useEffect(function () {
-      if (selectedDay) {
-        setInputValue(formatDateAsText(selectedDay, disabledDays, locale));
-        var formattedDate = formatDateAsNumeral(selectedDay, locale);
-        var validationResponse = validateDate({
-          date: selectedDay,
-          inputValue: formattedDate,
-          disabledDays: disabledDays
-        }).validationResponse;
-        if (!validationResponse.isValidDate && !validationResponse.isEmpty) {
-          handleValidation(validationResponse);
-        }
-      }
-    }, [selectedDay]);
-    var calendarId = "".concat(id, "-calendar-dialog");
-    return /*#__PURE__*/React.createElement(FocusOn, {
-      scrollLock: false,
-      returnFocus: false,
-      onDeactivation: handleReturnFocus,
-      onClickOutside: function () {
-        return setIsOpen(false);
-      },
-      onEscapeKey: function () {
-        return setIsOpen(false);
-      },
-      enabled: isOpen
-    }, /*#__PURE__*/React.createElement("div", {
-      ref: containerRef
-    }, /*#__PURE__*/React.createElement(DateInputField, __assign({
-      ref: dateInputRefs,
-      id: id,
-      role: "combobox",
-      "aria-haspopup": "dialog",
-      "aria-expanded": isOpen,
-      "aria-controls": calendarId,
-      value: inputValue,
-      locale: locale,
-      onButtonClick: handleButtonClick,
-      onClick: handleInputClick,
-      onFocus: handleInputFocus,
-      onChange: handleInputChange,
-      onBlur: handleInputBlur,
-      onKeyDown: handleKeyDown,
-      status: status !== undefined || !shouldUseInbuiltValidation ? status : inbuiltStatus,
-      validationMessage: validationMessage !== undefined || !shouldUseInbuiltValidation ? validationMessage : inbuiltValidationMessage
-    }, restDateInputFieldProps))), isOpen && ( /*#__PURE__*/React.createElement(CalendarPopover, {
-      referenceElement: containerRef.current
-    }, /*#__PURE__*/React.createElement(CalendarSingle, {
-      id: calendarId,
-      selected: selectedDay,
-      defaultMonth: defaultMonth,
-      weekStartsOn: weekStartsOn,
-      disabled: disabledDays,
-      locale: locale,
-      onDayClick: handleCalendarDayChange,
-      onMount: handleCalendarMount
-    }))));
-  };
-  DatePicker.displayName = "DatePicker";
-  return DatePicker;
-}();
-export { DatePicker };

package/dist/esm/DatePicker/subcomponents/DateInputField/DateInputField.mjs

@@ -1,54 +0,0 @@
-import { __rest, __assign } from 'tslib';
-import React, { useId } from 'react';
-import classnames from 'classnames';
-import { enAU } from 'date-fns/locale';
-import '../../../DateInput/DateInput/DateInput.mjs';
-import { DateInputDescription } from '../../../DateInput/DateInputDescription/DateInputDescription.mjs';
-import { DateInputWithIconButton } from '../../../DateInput/DateInputWithIconButton/DateInputWithIconButton.mjs';
-import { FieldMessage } from '../../../FieldMessage/FieldMessage.mjs';
-import styles from './DateInputField.module.scss.mjs';
-const DateInputField = /*#__PURE__*/function () {
-  const DateInputField = /*#__PURE__*/React.forwardRef(function (_a, ref) {
-    var description = _a.description,
-      status = _a.status,
-      validationMessage = _a.validationMessage,
-      _b = _a.locale,
-      locale = _b === void 0 ? enAU : _b,
-      propsId = _a.id,
-      disabled = _a.disabled,
-      _c = _a.isReversed,
-      isReversed = _c === void 0 ? false : _c,
-      classNameOverride = _a.classNameOverride,
-      dateInputWithIconButtonProps = __rest(_a, ["description", "status", "validationMessage", "locale", "id", "disabled", "isReversed", "classNameOverride"]);
-    var reactId = useId();
-    var id = propsId !== null && propsId !== void 0 ? propsId : reactId;
-    var descriptionId = "".concat(id, "-field-message");
-    var shouldShowValidationMessage = !disabled && validationMessage;
-    return /*#__PURE__*/React.createElement("div", {
-      className: classNameOverride
-    }, /*#__PURE__*/React.createElement(DateInputWithIconButton, __assign({
-      ref: ref,
-      id: id,
-      "aria-describedby": descriptionId,
-      status: status,
-      disabled: disabled,
-      isReversed: isReversed
-    }, dateInputWithIconButtonProps)), shouldShowValidationMessage && ( /*#__PURE__*/React.createElement(FieldMessage, {
-      message: validationMessage,
-      status: status,
-      reversed: isReversed
-    })), /*#__PURE__*/React.createElement("div", {
-      className: classnames(disabled && styles.disabled)
-    }, /*#__PURE__*/React.createElement(FieldMessage, {
-      id: descriptionId,
-      message: /*#__PURE__*/React.createElement(DateInputDescription, {
-        description: description,
-        locale: locale
-      }),
-      reversed: isReversed
-    })));
-  });
-  DateInputField.displayName = "DateInputField";
-  return DateInputField;
-}();
-export { DateInputField };

package/dist/esm/DatePicker/subcomponents/DateInputField/DateInputField.module.scss.mjs

@@ -1,4 +0,0 @@
-var styles = {
-  "disabled": "DateInputField-module_disabled__-Y0lJ"
-};
-export { styles as default };

package/dist/esm/DatePicker/utils/getLocale.mjs

@@ -1,12 +0,0 @@
-import { enAU, enUS } from 'date-fns/locale';
-var getLocale = function (locale) {
-  switch (locale) {
-    case "en-AU":
-      return enAU;
-    case "en-US":
-      return enUS;
-    default:
-      return enAU;
-  }
-};
-export { getLocale };

package/dist/esm/DatePicker/utils/validateDate.mjs

@@ -1,56 +0,0 @@
-import { __assign } from 'tslib';
-import '../../Calendar/CalendarSingle/CalendarSingle.mjs';
-import '../../Calendar/CalendarRange/CalendarRange.mjs';
-import 'date-fns';
-import { isInvalidDate } from '../../Calendar/utils/isInvalidDate.mjs';
-import { isDisabledDate } from '../../Calendar/utils/isDisabledDate.mjs';
-var validateDate = function (_a) {
-  var date = _a.date,
-    inputValue = _a.inputValue,
-    disabledDays = _a.disabledDays;
-  var baseResponse = {
-    date: date,
-    inputValue: inputValue,
-    status: undefined,
-    validationMessage: undefined,
-    isInvalid: false,
-    isDisabled: false,
-    isEmpty: false,
-    isValidDate: false
-  };
-  if (date === undefined) {
-    return {
-      validationResponse: __assign(__assign({}, baseResponse), {
-        isEmpty: true
-      }),
-      newDate: undefined
-    };
-  }
-  if (isInvalidDate(date)) {
-    return {
-      validationResponse: __assign(__assign({}, baseResponse), {
-        status: "error",
-        validationMessage: inputValue ? "".concat(inputValue, " is an invalid date") : "Date is invalid",
-        isInvalid: true
-      }),
-      newDate: undefined
-    };
-  }
-  if (isDisabledDate(date, disabledDays)) {
-    return {
-      validationResponse: __assign(__assign({}, baseResponse), {
-        status: "error",
-        validationMessage: "".concat(inputValue, " is not available, try another date"),
-        isDisabled: true
-      }),
-      newDate: undefined
-    };
-  }
-  return {
-    validationResponse: __assign(__assign({}, baseResponse), {
-      isValidDate: true
-    }),
-    newDate: date
-  };
-};
-export { validateDate };