@kaizen/components 0.0.0-canary-bundler--fix-style-inject-20240522033251 → 0.0.0-canary-declare-inject-within-20240522052630

package/dist/cjs/Filter/FilterDatePicker/subcomponents/FilterDatePickerField/FilterDatePickerField.module.scss.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var css_248z = ".FilterDatePickerField-module_filterDatePickerField__ClXMw{display:grid;gap:var(--spacing-16,1rem);width:288px}";
+var styles = {
+  "filterDatePickerField": "FilterDatePickerField-module_filterDatePickerField__ClXMw"
+};
+function styleInject(css, ref) {
+  if (ref === void 0) ref = {};
+  var insertAt = ref.insertAt;
+  if (typeof document === 'undefined') {
+    return;
+  }
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+styleInject(css_248z);
+exports.default = styles;

package/dist/cjs/Filter/FilterDatePicker/subcomponents/FilterDatePickerField/filterDatePickerFieldReducer.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+var tslib = require('tslib');
+require('../../../../Calendar/CalendarSingle/CalendarSingle.cjs');
+require('../../../../Calendar/CalendarRange/CalendarRange.cjs');
+require('date-fns');
+var isInvalidDate = require('../../../../Calendar/utils/isInvalidDate.cjs');
+require('react-day-picker');
+var filterDatePickerFieldReducer = function (state, action) {
+  switch (action.type) {
+    case "update_selected_date":
+      return tslib.__assign(tslib.__assign({}, state), {
+        selectedDate: action.date,
+        inputValue: action.inputValue === undefined ? state.inputValue : action.inputValue,
+        startMonth: action.date && !isInvalidDate.isInvalidDate(action.date) ? action.date : new Date()
+      });
+    case "navigate_months":
+      return tslib.__assign(tslib.__assign({}, state), {
+        startMonth: action.date && !isInvalidDate.isInvalidDate(action.date) ? action.date : new Date()
+      });
+    case "update_input_field":
+      return tslib.__assign(tslib.__assign({}, state), {
+        inputValue: action.inputValue
+      });
+  }
+};
+exports.filterDatePickerFieldReducer = filterDatePickerFieldReducer;

package/dist/cjs/Filter/FilterDatePicker/utils/getDateValidationHandler.cjs

@@ -0,0 +1,32 @@
+'use strict';
+
+var React = require('react');
+var LabelledMessage = require('../../../LabelledMessage/LabelledMessage.cjs');
+var getNodeText = require('../../../utils/getNodeText.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var getDateValidationHandler = function (_a) {
+  var onValidate = _a.onValidate,
+    setInbuiltValidationMessage = _a.setInbuiltValidationMessage,
+    inputLabel = _a.inputLabel;
+  return function (validationResponse) {
+    if (onValidate) return onValidate(validationResponse);
+    var validationMessage = validationResponse.validationMessage;
+    if (!validationMessage) {
+      setInbuiltValidationMessage(undefined);
+      return;
+    }
+    setInbuiltValidationMessage({
+      status: validationMessage.status,
+      message: inputLabel ? React__default.default.createElement(LabelledMessage.LabelledMessage, {
+        label: "".concat(getNodeText.getNodeText(inputLabel)),
+        message: validationMessage.message
+      }) : validationMessage.message
+    });
+  };
+};
+exports.getDateValidationHandler = getDateValidationHandler;

package/dist/cjs/Filter/FilterDatePicker/utils/transformDateToInputValue.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+require('../../../Calendar/CalendarSingle/CalendarSingle.cjs');
+require('../../../Calendar/CalendarRange/CalendarRange.cjs');
+require('tslib');
+require('date-fns');
+var formatDateAsText = require('../../../Calendar/utils/formatDateAsText.cjs');
+require('react-day-picker');
+var transformDateToInputValue = function (date, disabledDays, locale) {
+  return date ? formatDateAsText.formatDateAsText(date, disabledDays, locale) : "";
+};
+exports.transformDateToInputValue = transformDateToInputValue;

package/dist/cjs/Filter/FilterDatePicker/utils/validateDate.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+var tslib = require('tslib');
+var validateDate$1 = require('../../../DatePicker/utils/validateDate.cjs');
+var validateDate = function (args) {
+  var response = validateDate$1.validateDate(args);
+  var _a = response.validationResponse,
+    status = _a.status,
+    validationMessage = _a.validationMessage,
+    rest = tslib.__rest(_a, ["status", "validationMessage"]);
+  return tslib.__assign(tslib.__assign({}, response), {
+    validationResponse: tslib.__assign(tslib.__assign({}, rest), {
+      validationMessage: status && validationMessage ? {
+        status: status,
+        message: validationMessage
+      } : undefined
+    })
+  });
+};
+exports.validateDate = validateDate;

package/dist/cjs/Filter/FilterDateRangePicker/FilterDateRangePicker.cjs

@@ -0,0 +1,49 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var getLocale = require('../../DatePicker/utils/getLocale.cjs');
+var Filter = require('../Filter/Filter.cjs');
+var FilterContents = require('../Filter/subcomponents/FilterContents/FilterContents.cjs');
+var DateRangeDisplayLabel = require('./subcomponents/DateRangeDisplayLabel/DateRangeDisplayLabel.cjs');
+var FilterDateRangePickerField = require('./subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.cjs');
+var isValidRange = require('./subcomponents/FilterDateRangePickerField/utils/isValidRange.cjs');
+var isCompleteDateRange = require('./utils/isCompleteDateRange.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var FilterDateRangePicker = function (_a) {
+  var propsId = _a.id,
+    isOpen = _a.isOpen,
+    setIsOpen = _a.setIsOpen,
+    renderTrigger = _a.renderTrigger,
+    selectedRange = _a.selectedRange,
+    label = _a.label,
+    locale = _a.locale,
+    restProps = tslib.__rest(_a, ["id", "isOpen", "setIsOpen", "renderTrigger", "selectedRange", "label", "locale"]);
+  var reactId = React.useId();
+  var id = propsId !== null && propsId !== void 0 ? propsId : reactId;
+  return React__default.default.createElement(Filter.Filter, {
+    isOpen: isOpen,
+    setIsOpen: setIsOpen,
+    renderTrigger: function (triggerProps) {
+      return renderTrigger(tslib.__assign({
+        selectedValue: isCompleteDateRange.isCompleteDateRange(selectedRange) && isValidRange.isValidRange(selectedRange.from, selectedRange.to) ? React__default.default.createElement(DateRangeDisplayLabel.DateRangeDisplayLabel, {
+          dateRange: selectedRange,
+          locale: getLocale.getLocale(locale)
+        }) : undefined,
+        label: label
+      }, triggerProps));
+    }
+  }, React__default.default.createElement(FilterContents.FilterContents, null, React__default.default.createElement(FilterDateRangePickerField.FilterDateRangePickerField, tslib.__assign({
+    id: "".concat(id, "--input"),
+    label: label,
+    locale: locale,
+    selectedRange: selectedRange
+  }, restProps))));
+};
+FilterDateRangePicker.displayName = "FilterDateRangePicker";
+exports.FilterDateRangePicker = FilterDateRangePicker;

package/dist/cjs/Filter/FilterDateRangePicker/subcomponents/DateRangeDisplayLabel/DateRangeDisplayLabel.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+var React = require('react');
+require('../../../../Calendar/CalendarSingle/CalendarSingle.cjs');
+require('../../../../Calendar/CalendarRange/CalendarRange.cjs');
+require('tslib');
+require('date-fns');
+var formatDateAsText = require('../../../../Calendar/utils/formatDateAsText.cjs');
+require('react-day-picker');
+var DateRangeDisplayLabel_module = require('./DateRangeDisplayLabel.module.scss.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var DateRangeDisplayLabel = function (_a) {
+  var dateRange = _a.dateRange,
+    locale = _a.locale;
+  var formattedDateFrom = formatDateAsText.formatDateAsText(dateRange.from, undefined, locale);
+  var formattedDateTo = formatDateAsText.formatDateAsText(dateRange.to, undefined, locale);
+  return React__default.default.createElement("span", {
+    className: DateRangeDisplayLabel_module.default.dateRangeDisplayLabel
+  }, React__default.default.createElement("span", null, formattedDateFrom), React__default.default.createElement("span", null, "-"), React__default.default.createElement("span", null, formattedDateTo));
+};
+DateRangeDisplayLabel.displayName = "DateRangeDisplayLabel";
+exports.DateRangeDisplayLabel = DateRangeDisplayLabel;

package/dist/cjs/Filter/FilterDateRangePicker/subcomponents/DateRangeDisplayLabel/DateRangeDisplayLabel.module.scss.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var css_248z = ".DateRangeDisplayLabel-module_dateRangeDisplayLabel__g7nVd{display:inline-flex;gap:var(--spacing-6,.375rem)}";
+var styles = {
+  "dateRangeDisplayLabel": "DateRangeDisplayLabel-module_dateRangeDisplayLabel__g7nVd"
+};
+function styleInject(css, ref) {
+  if (ref === void 0) ref = {};
+  var insertAt = ref.insertAt;
+  if (typeof document === 'undefined') {
+    return;
+  }
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+styleInject(css_248z);
+exports.default = styles;

package/dist/cjs/Filter/FilterDateRangePicker/subcomponents/DateRangeInputField/DateRangeInputField.cjs

@@ -0,0 +1,89 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var DateInput = require('../../../../DateInput/DateInput/DateInput.cjs');
+var DateInputDescription = require('../../../../DateInput/DateInputDescription/DateInputDescription.cjs');
+require('../../../../DateInput/DateInputWithIconButton/DateInputWithIconButton.cjs');
+var FieldMessage = require('../../../../FieldMessage/FieldMessage.cjs');
+var VisuallyHidden = require('../../../../VisuallyHidden/VisuallyHidden.cjs');
+var isRefObject = require('../../../../utils/isRefObject.cjs');
+var DateRangeValidationMessage = require('../DateRangeValidationMessage/DateRangeValidationMessage.cjs');
+var DateRangeInputField_module = require('./DateRangeInputField.module.scss.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+var DateRangeInputField = React__default.default.forwardRef(function (_a, ref) {
+  var _b, _c;
+  var id = _a.id,
+    legend = _a.legend,
+    inputStartDateProps = _a.inputStartDateProps,
+    inputEndDateProps = _a.inputEndDateProps,
+    description = _a.description,
+    disabled = _a.disabled,
+    _d = _a.isReversed,
+    isReversed = _d === void 0 ? false : _d,
+    validationMessage = _a.validationMessage,
+    locale = _a.locale,
+    classNameOverride = _a.classNameOverride,
+    restProps = tslib.__rest(_a, ["id", "legend", "inputStartDateProps", "inputEndDateProps", "description", "disabled", "isReversed", "validationMessage", "locale", "classNameOverride"]);
+  var customRefObject = isRefObject.isRefObject(ref) ? ref.current : null;
+  var inputStartDateRef = customRefObject === null || customRefObject === void 0 ? void 0 : customRefObject.inputStartDateRef;
+  var inputEndDateRef = customRefObject === null || customRefObject === void 0 ? void 0 : customRefObject.inputEndDateRef;
+  var descriptionId = "".concat(id, "--field-message");
+  // Date Start aria labels
+  var dateStartErrorMessageId = (validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.dateStart) ? "".concat(id, "--date-start-error-message") : undefined;
+  var dateStartInputDescribedBy = dateStartErrorMessageId ? "".concat(dateStartErrorMessageId, " ").concat(descriptionId) : descriptionId;
+  var dateStartIsInvalid = dateStartErrorMessageId !== undefined;
+  // Date End aria labels
+  var dateEndErrorMessageId = (validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.dateEnd) ? "".concat(id, "--date-end-error-message") : undefined;
+  var dateEndInputDescribedBy = dateEndErrorMessageId ? "".concat(dateEndErrorMessageId, " ").concat(descriptionId) : descriptionId;
+  var dateEndIsInvalid = dateEndErrorMessageId !== undefined;
+  return React__default.default.createElement("div", tslib.__assign({
+    className: classNameOverride
+  }, restProps), React__default.default.createElement("fieldset", {
+    className: DateRangeInputField_module.default.dateRangeInputContainer
+  }, React__default.default.createElement("legend", null, React__default.default.createElement(VisuallyHidden.VisuallyHidden, null, legend)), React__default.default.createElement(DateInput.DateInput, tslib.__assign({
+    ref: inputStartDateRef,
+    id: "".concat(id, "--from"),
+    "aria-describedby": dateStartInputDescribedBy,
+    "aria-errormessage": dateStartErrorMessageId,
+    "aria-invalid": dateStartIsInvalid,
+    autoComplete: "off",
+    disabled: disabled,
+    status: (_b = validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.dateStart) === null || _b === void 0 ? void 0 : _b.status
+  }, inputStartDateProps, {
+    classNameOverride: classnames__default.default(DateRangeInputField_module.default.inputStartDate, inputStartDateProps.classNameOverride)
+  })), React__default.default.createElement(DateInput.DateInput, tslib.__assign({
+    ref: inputEndDateRef,
+    id: "".concat(id, "--to"),
+    "aria-describedby": dateEndInputDescribedBy,
+    "aria-errormessage": dateEndErrorMessageId,
+    "aria-invalid": dateEndIsInvalid,
+    autoComplete: "off",
+    disabled: disabled,
+    status: (_c = validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.dateEnd) === null || _c === void 0 ? void 0 : _c.status
+  }, inputEndDateProps, {
+    classNameOverride: classnames__default.default(DateRangeInputField_module.default.inputEndDate, inputEndDateProps.classNameOverride)
+  }))), validationMessage && React__default.default.createElement(DateRangeValidationMessage.DateRangeValidationMessage, {
+    validationMessage: validationMessage,
+    isReversed: isReversed,
+    dateStartId: dateStartErrorMessageId,
+    dateEndId: dateEndErrorMessageId
+  }), React__default.default.createElement(FieldMessage.FieldMessage, {
+    id: descriptionId,
+    message: React__default.default.createElement(DateInputDescription.DateInputDescription, {
+      description: description,
+      locale: locale
+    }),
+    reversed: isReversed,
+    classNameOverride: disabled ? DateRangeInputField_module.default.disabled : undefined
+  }));
+});
+DateRangeInputField.displayName = "DateRangeInputField";
+exports.DateRangeInputField = DateRangeInputField;

package/dist/cjs/Filter/FilterDateRangePicker/subcomponents/DateRangeInputField/DateRangeInputField.module.scss.cjs

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var css_248z = ".DateRangeInputField-module_dateRangeInputContainer__zjhqr{border:none;display:flex;margin:0;padding:0}.DateRangeInputField-module_inputStartDate__fLwxZ input{border-end-end-radius:0;border-start-end-radius:0}.DateRangeInputField-module_inputStartDate__fLwxZ input+[class*=focusRing]{border-end-end-radius:0!important;border-start-end-radius:0!important}.DateRangeInputField-module_inputEndDate__j0qQu input{border-end-start-radius:0;border-start-start-radius:0;inset-inline-start:calc(var(--border-solid-border-width, 2px)*-1);position:relative}.DateRangeInputField-module_inputEndDate__j0qQu input+[class*=focusRing]{border-end-start-radius:0!important;border-start-start-radius:0!important;inset-inline:calc(var(--border-solid-border-width, 2px)*2*-1 + -1px) -1px!important}.DateRangeInputField-module_disabled__vOSK8{opacity:.3}";
+var styles = {
+  "dateRangeInputContainer": "DateRangeInputField-module_dateRangeInputContainer__zjhqr",
+  "inputStartDate": "DateRangeInputField-module_inputStartDate__fLwxZ",
+  "inputEndDate": "DateRangeInputField-module_inputEndDate__j0qQu",
+  "disabled": "DateRangeInputField-module_disabled__vOSK8"
+};
+function styleInject(css, ref) {
+  if (ref === void 0) ref = {};
+  var insertAt = ref.insertAt;
+  if (typeof document === 'undefined') {
+    return;
+  }
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+styleInject(css_248z);
+exports.default = styles;

package/dist/cjs/Filter/FilterDateRangePicker/subcomponents/DateRangeValidationMessage/DateRangeValidationMessage.cjs

@@ -0,0 +1,65 @@
+'use strict';
+
+var React = require('react');
+var FieldMessage = require('../../../../FieldMessage/FieldMessage.cjs');
+var DateRangeValidationMessage_module = require('./DateRangeValidationMessage.module.scss.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var DateRangeValidationMessage = function (_a) {
+  var validationMessage = _a.validationMessage,
+    dateStartId = _a.dateStartId,
+    dateEndId = _a.dateEndId,
+    isReversed = _a.isReversed;
+  if (!validationMessage) return null;
+  var dateStart = validationMessage.dateStart;
+  var dateEnd = validationMessage.dateEnd;
+  if (dateStart && dateEnd) {
+    if (dateStart.status === dateEnd.status) {
+      return React__default.default.createElement(FieldMessage.FieldMessage, {
+        message: React__default.default.createElement("ul", {
+          className: DateRangeValidationMessage_module.default.fieldMessageList
+        }, React__default.default.createElement("li", {
+          id: dateStartId
+        }, dateStart.message), React__default.default.createElement("li", {
+          id: dateEndId
+        }, dateEnd.message)),
+        status: dateStart.status || dateEnd.status,
+        reversed: isReversed
+      });
+    }
+    return React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(FieldMessage.FieldMessage, {
+      id: dateStartId,
+      message: dateStart.message,
+      status: dateStart.status,
+      reversed: isReversed
+    }), React__default.default.createElement(FieldMessage.FieldMessage, {
+      id: dateEndId,
+      message: dateEnd.message,
+      status: dateEnd.status,
+      reversed: isReversed
+    }));
+  }
+  if (dateStart) {
+    return React__default.default.createElement(FieldMessage.FieldMessage, {
+      id: dateStartId,
+      message: dateStart.message,
+      status: dateStart.status,
+      reversed: isReversed
+    });
+  }
+  if (dateEnd) {
+    return React__default.default.createElement(FieldMessage.FieldMessage, {
+      id: dateEndId,
+      message: dateEnd.message,
+      status: dateEnd.status,
+      reversed: isReversed
+    });
+  }
+  return null;
+};
+DateRangeValidationMessage.displayName = "DateRangeValidationMessage";
+exports.DateRangeValidationMessage = DateRangeValidationMessage;

package/dist/cjs/Filter/FilterDateRangePicker/subcomponents/DateRangeValidationMessage/DateRangeValidationMessage.module.scss.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var css_248z = ".DateRangeValidationMessage-module_fieldMessageList__4-tJ7{margin:var(--spacing-0,0);padding-inline-start:var(--spacing-24,1.5rem)}";
+var styles = {
+  "fieldMessageList": "DateRangeValidationMessage-module_fieldMessageList__4-tJ7"
+};
+function styleInject(css, ref) {
+  if (ref === void 0) ref = {};
+  var insertAt = ref.insertAt;
+  if (typeof document === 'undefined') {
+    return;
+  }
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+styleInject(css_248z);
+exports.default = styles;