@kaizen/components 1.20.4 → 1.21.0

package/dist/cjs/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var SuccessIcon = require('./SuccessIcon-7039897c.js');
+var SuccessIcon = require('./SuccessIcon-02a295a0.js');
 var React = require('react');
 var classnames = require('classnames');
 var draftBadge = require('@kaizen/draft-badge');
@@ -8,6 +8,8 @@ var loadingSpinner = require('@kaizen/loading-spinner');
 var reactFocusOn = require('react-focus-on');
 var reactPopper = require('react-popper');
 var datePicker = require('@kaizen/date-picker');
+var uuid = require('uuid');
+var validateDate$1 = require('@kaizen/date-picker/src/utils/validateDate');
 var formatDateAsNumeral = require('@kaizen/date-picker/src/utils/formatDateAsNumeral');
 var isDisabledDate = require('@kaizen/date-picker/src/utils/isDisabledDate');
 var isSelectingDayInCalendar = require('@kaizen/date-picker/src/utils/isSelectingDayInCalendar');
@@ -15,7 +17,6 @@ var parseDateFromNumeralFormatValue = require('@kaizen/date-picker/src/utils/par
 var parseDateFromTextFormatValue = require('@kaizen/date-picker/src/utils/parseDateFromTextFormatValue');
 var draftForm = require('@kaizen/draft-form');
 var i18nReactIntl = require('@cultureamp/i18n-react-intl');
-var validateDate$1 = require('@kaizen/date-picker/src/utils/validateDate');
 var draftTooltip = require('@kaizen/draft-tooltip');
 var getLocale = require('@kaizen/date-picker/src/utils/getLocale');
 var formatDateAsText = require('@kaizen/date-picker/src/utils/formatDateAsText');
@@ -33,7 +34,6 @@ var button$1 = require('@kaizen/button');
 var loadingSkeleton = require('@kaizen/loading-skeleton');
 var focus = require('@react-aria/focus');
 var utils = require('@react-aria/utils');
-var uuid = require('uuid');
 var typography = require('@kaizen/typography');
 var overlays = require('@react-aria/overlays');
 var draftDivider = require('@kaizen/draft-divider');
@@ -323,6 +323,7 @@ var updateDependentFilters = function(state) {
     if (!isUsable) {
       state.activeFilterIds["delete"](id);
       state.values[id] = void 0;
+      state.hasUpdatedValues = true;
       return;
     }
     if (!state.filters[id].isRemovable || state.values[id] !== void 0) {
@@ -346,13 +347,15 @@ var updateValues = function(state, values) {
       state.activeFilterIds.add(id);
     }
   });
-  return updateDependentFilters(SuccessIcon.__assign(SuccessIcon.__assign({}, state), { values }));
+  return updateDependentFilters(SuccessIcon.__assign(SuccessIcon.__assign({}, state), { hasUpdatedValues: true, values }));
 };
 
 var filterBarStateReducer = function(state, action) {
   switch (action.type) {
     case "update_values":
       return SuccessIcon.__assign({}, updateValues(state, action.values));
+    case "complete_update_values":
+      return SuccessIcon.__assign(SuccessIcon.__assign({}, state), { hasUpdatedValues: false });
     case "update_single_filter":
       return SuccessIcon.__assign(SuccessIcon.__assign({}, state), { filters: updateSingleFilter(state, action.id, action.data) });
     case "activate_filter":
@@ -361,11 +364,11 @@ var filterBarStateReducer = function(state, action) {
     case "deactivate_filter":
       state.activeFilterIds["delete"](action.id);
       state.values[action.id] = void 0;
-      return SuccessIcon.__assign({}, updateDependentFilters(state));
+      return SuccessIcon.__assign(SuccessIcon.__assign({}, updateDependentFilters(state)), { hasUpdatedValues: true });
   }
 };
 
-var setupFilterBarState = function(filters) {
+var setupFilterBarState = function(filters, values) {
   var state = filters.reduce(function(baseState, _a) {
     var id = _a.id, name = _a.name, isRemovable = _a.isRemovable, isUsableWhen = _a.isUsableWhen;
     var hasDependency = isUsableWhen !== void 0;
@@ -375,25 +378,23 @@ var setupFilterBarState = function(filters) {
       isRemovable: isRemovable !== null && isRemovable !== void 0 ? isRemovable : false,
       isUsableWhen,
       isOpen: false,
-      // A dependent filter is set to `null` here as it
-      // will be re-evaluated in the `update_values` dispatch action.
-      isUsable: hasDependency ? null : true
+      isUsable: true
     };
     if (hasDependency) {
       baseState.dependentFilterIds.add(id);
     }
+    if (!isRemovable || values[id] !== void 0) {
+      baseState.activeFilterIds.add(id);
+    }
     return baseState;
   }, {
     filters: {},
-    // These will be set by the `update_values` dispatch action.
     activeFilterIds: /* @__PURE__ */ new Set(),
-    // To prevent an infinite loop calculating dependent filters,
-    // `values` is set to `null` and default values will be
-    // set by the `update_values` dispatch action.
-    values: null,
-    dependentFilterIds: /* @__PURE__ */ new Set()
+    values,
+    dependentFilterIds: /* @__PURE__ */ new Set(),
+    hasUpdatedValues: false
   });
-  return state;
+  return updateDependentFilters(state);
 };
 
 var checkArraysMatch$1 = function(a1, a2) {
@@ -451,7 +452,7 @@ var FilterBarProvider = function(_a) {
   var mappedFilters = React.useMemo(function() {
     return getMappedFilters(filters);
   }, [filters]);
-  var _b = React.useReducer(filterBarStateReducer, setupFilterBarState(filters)), state = _b[0], dispatch = _b[1];
+  var _b = React.useReducer(filterBarStateReducer, setupFilterBarState(filters, values)), state = _b[0], dispatch = _b[1];
   var value = {
     getFilterState: function(id) {
       return SuccessIcon.__assign(SuccessIcon.__assign({}, state.filters[id]), { isActive: state.activeFilterIds.has(id), value: values[id] });
@@ -462,6 +463,12 @@ var FilterBarProvider = function(_a) {
     toggleOpenFilter: function(id, isOpen) {
       dispatch({ type: "update_single_filter", id, data: { isOpen } });
     },
+    setFilterOpenState: function(id, isOpen) {
+      dispatch({ type: "update_single_filter", id, data: { isOpen } });
+    },
+    openFilter: function(id) {
+      dispatch({ type: "update_single_filter", id, data: { isOpen: true } });
+    },
     updateValue: function(id, newValue) {
       var _a2;
       dispatch({
@@ -487,14 +494,15 @@ var FilterBarProvider = function(_a) {
     }
   };
   React.useEffect(function() {
-    var shouldUpdate = state.values === null || checkShouldUpdateValues(state, values);
+    var shouldUpdate = checkShouldUpdateValues(state, values);
     if (shouldUpdate)
       dispatch({ type: "update_values", values: SuccessIcon.__assign({}, values) });
   }, [values]);
   React.useEffect(function() {
-    var shouldUpdate = state.values !== null && checkShouldUpdateValues(state, values);
-    if (shouldUpdate)
+    if (state.hasUpdatedValues) {
       onValuesChange(SuccessIcon.__assign({}, state.values));
+      dispatch({ type: "complete_update_values" });
+    }
   }, [state]);
   var activeFilters = Array.from(state.activeFilterIds, function(id) {
     return mappedFilters[id];
@@ -509,6 +517,79 @@ var FilterBarProvider = function(_a) {
   );
 };
 
+var styles$E = {"labelledMessage":"LabelledMessage-module_labelledMessage__8hqzY","labelSeparator":"LabelledMessage-module_labelSeparator__f3zFN"};
+
+var LabelledMessage = function(_a) {
+  var label = _a.label, message = _a.message;
+  return React.createElement(
+    "span",
+    { className: styles$E.labelledMessage },
+    React.createElement("span", null, label),
+    React.createElement("span", { className: styles$E.labelSeparator }, ":"),
+    React.createElement("span", null, message)
+  );
+};
+LabelledMessage.displayName = "LabelledMessage";
+
+var getNodeText = function(node) {
+  if (!node)
+    return "";
+  if (typeof node === "string" || typeof node === "number")
+    return node;
+  if (node instanceof Array)
+    return node.map(getNodeText).join("");
+  if (React.isValidElement(node))
+    return getNodeText(node.props.children);
+  return "";
+};
+
+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(void 0);
+      return;
+    }
+    setInbuiltValidationMessage({
+      status: validationMessage.status,
+      message: inputLabel ? React.createElement(LabelledMessage, { label: "".concat(getNodeText(inputLabel)), message: validationMessage.message }) : validationMessage.message
+    });
+  };
+};
+
+var validateDate = function(args) {
+  var response = validateDate$1.validateDate(args);
+  var _a = response.validationResponse, status = _a.status, validationMessage = _a.validationMessage, rest = SuccessIcon.__rest(_a, ["status", "validationMessage"]);
+  return SuccessIcon.__assign(SuccessIcon.__assign({}, response), { validationResponse: SuccessIcon.__assign(SuccessIcon.__assign({}, rest), { validationMessage: status && validationMessage ? { status, message: validationMessage } : void 0 }) });
+};
+
+var useDateValidation = function(_a) {
+  var inputLabel = _a.inputLabel, disabledDays = _a.disabledDays, validationMessage = _a.validationMessage, onValidate = _a.onValidate;
+  var _b = React.useState(), inbuiltValidationMessage = _b[0], setInbuiltValidationMessage = _b[1];
+  var shouldUseInbuiltDateValidation = onValidate === void 0;
+  var updateValidation = getDateValidationHandler({
+    onValidate,
+    setInbuiltValidationMessage,
+    inputLabel
+  });
+  var validateSingleDate = function(_a2) {
+    var date = _a2.date, inputValue = _a2.inputValue;
+    return validateDate({
+      date,
+      inputValue,
+      disabledDays
+    });
+  };
+  return {
+    validationMessage: shouldUseInbuiltDateValidation ? inbuiltValidationMessage : validationMessage,
+    validateDate: validateSingleDate,
+    updateValidation
+  };
+};
+
 var transformDateToInputValue = function(date, disabledDays, locale) {
   return date ? datePicker.formatDateAsText(date, disabledDays, locale) : "";
 };
@@ -563,20 +644,6 @@ var useDateInputHandlers = function(_a) {
   };
 };
 
-var styles$E = {"labelledMessage":"LabelledMessage-module_labelledMessage__8hqzY","labelSeparator":"LabelledMessage-module_labelSeparator__f3zFN"};
-
-var LabelledMessage = function(_a) {
-  var label = _a.label, message = _a.message;
-  return React.createElement(
-    "span",
-    { className: styles$E.labelledMessage },
-    React.createElement("span", null, label),
-    React.createElement("span", { className: styles$E.labelSeparator }, ":"),
-    React.createElement("span", null, message)
-  );
-};
-LabelledMessage.displayName = "LabelledMessage";
-
 var formatDescriptionInputFormat = function(locale) {
   var _a;
   return (_a = locale.formatLong) === null || _a === void 0 ? void 0 : _a.date({ width: "short" }).toLowerCase();
@@ -643,7 +710,8 @@ var filterDatePickerFieldReducer$1 = function(state, action) {
 var styles$B = {"filterDatePickerField":"FilterDatePickerField-module_filterDatePickerField__KvWHu"};
 
 var FilterDatePickerField = function(_a) {
-  var id = _a.id, inputProps = _a.inputProps, propsLocale = _a.locale, defaultMonth = _a.defaultMonth, selectedDate = _a.selectedDate, onDateChange = _a.onDateChange, onDateSubmit = _a.onDateSubmit, disabledDays = _a.disabledDays, description = _a.description, validationMessage = _a.validationMessage, onValidate = _a.onValidate, classNameOverride = _a.classNameOverride, restProps = SuccessIcon.__rest(_a, ["id", "inputProps", "locale", "defaultMonth", "selectedDate", "onDateChange", "onDateSubmit", "disabledDays", "description", "validationMessage", "onValidate", "classNameOverride"]);
+  var propsId = _a.id, inputProps = _a.inputProps, propsLocale = _a.locale, defaultMonth = _a.defaultMonth, selectedDate = _a.selectedDate, onDateChange = _a.onDateChange, onDateSubmit = _a.onDateSubmit, disabledDays = _a.disabledDays, description = _a.description, validationMessage = _a.validationMessage, onValidate = _a.onValidate, classNameOverride = _a.classNameOverride, restProps = SuccessIcon.__rest(_a, ["id", "inputProps", "locale", "defaultMonth", "selectedDate", "onDateChange", "onDateSubmit", "disabledDays", "description", "validationMessage", "onValidate", "classNameOverride"]);
+  var id = React.useState(propsId || uuid.v4())[0];
   var locale = datePicker.getLocale(propsLocale);
   var dateValidation = useDateValidation({
     disabledDays,
@@ -729,65 +797,6 @@ var FilterDatePicker = function(_a) {
 };
 FilterDatePicker.displayName = "FilterDatePicker";
 
-var getNodeText = function(node) {
-  if (!node)
-    return "";
-  if (typeof node === "string" || typeof node === "number")
-    return node;
-  if (node instanceof Array)
-    return node.map(getNodeText).join("");
-  if (React.isValidElement(node))
-    return getNodeText(node.props.children);
-  return "";
-};
-
-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(void 0);
-      return;
-    }
-    setInbuiltValidationMessage({
-      status: validationMessage.status,
-      message: inputLabel ? React.createElement(LabelledMessage, { label: "".concat(getNodeText(inputLabel)), message: validationMessage.message }) : validationMessage.message
-    });
-  };
-};
-
-var validateDate = function(args) {
-  var response = validateDate$1.validateDate(args);
-  var _a = response.validationResponse, status = _a.status, validationMessage = _a.validationMessage, rest = SuccessIcon.__rest(_a, ["status", "validationMessage"]);
-  return SuccessIcon.__assign(SuccessIcon.__assign({}, response), { validationResponse: SuccessIcon.__assign(SuccessIcon.__assign({}, rest), { validationMessage: status && validationMessage ? { status, message: validationMessage } : void 0 }) });
-};
-
-var useDateValidation = function(_a) {
-  var inputLabel = _a.inputLabel, disabledDays = _a.disabledDays, validationMessage = _a.validationMessage, onValidate = _a.onValidate;
-  var _b = React.useState(), inbuiltValidationMessage = _b[0], setInbuiltValidationMessage = _b[1];
-  var shouldUseInbuiltDateValidation = onValidate === void 0;
-  var updateValidation = getDateValidationHandler({
-    onValidate,
-    setInbuiltValidationMessage,
-    inputLabel
-  });
-  var validateSingleDate = function(_a2) {
-    var date = _a2.date, inputValue = _a2.inputValue;
-    return validateDate({
-      date,
-      inputValue,
-      disabledDays
-    });
-  };
-  return {
-    validationMessage: shouldUseInbuiltDateValidation ? inbuiltValidationMessage : validationMessage,
-    validateDate: validateSingleDate,
-    updateValidation
-  };
-};
-
 var ChevronDownIcon = function(props) {
   return React.createElement(
     SuccessIcon.SVG,
@@ -907,7 +916,7 @@ FilterBarButton.displayName = "FilterBar.Button";
 
 var FilterBarDatePicker = function(_a) {
   var id = _a.id, onDateChange = _a.onDateChange, _b = _a.locale, locale = _b === void 0 ? "en-AU" : _b, props = SuccessIcon.__rest(_a, ["id", "onDateChange", "locale"]);
-  var _c = useFilterBarContext(), getFilterState = _c.getFilterState, toggleOpenFilter = _c.toggleOpenFilter, updateValue = _c.updateValue;
+  var _c = useFilterBarContext(), getFilterState = _c.getFilterState, setFilterOpenState = _c.setFilterOpenState, updateValue = _c.updateValue;
   if (!id)
     throw Error("Missing `id` prop in FilterBarDatePicker");
   var filterState = getFilterState(id);
@@ -917,7 +926,7 @@ var FilterBarDatePicker = function(_a) {
     updateValue(id, key);
     onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(key);
   }, isOpen: filterState.isOpen, setIsOpen: function(open) {
-    return toggleOpenFilter(id, open);
+    return setFilterOpenState(id, open);
   } }));
 };
 FilterBarDatePicker.displayName = "FilterBar.DatePicker";
@@ -1256,7 +1265,8 @@ var isCompleteDateRange = function(dateRange) {
 };
 
 var FilterDateRangePicker = function(_a) {
-  var isOpen = _a.isOpen, setIsOpen = _a.setIsOpen, renderTrigger = _a.renderTrigger, selectedRange = _a.selectedRange, label = _a.label, locale = _a.locale, restProps = SuccessIcon.__rest(_a, ["isOpen", "setIsOpen", "renderTrigger", "selectedRange", "label", "locale"]);
+  var propsId = _a.id, isOpen = _a.isOpen, setIsOpen = _a.setIsOpen, renderTrigger = _a.renderTrigger, selectedRange = _a.selectedRange, label = _a.label, locale = _a.locale, restProps = SuccessIcon.__rest(_a, ["id", "isOpen", "setIsOpen", "renderTrigger", "selectedRange", "label", "locale"]);
+  var id = React.useState(propsId || uuid.v4())[0];
   return React.createElement(
     Filter,
     { isOpen, setIsOpen, renderTrigger: function(triggerProps) {
@@ -1265,7 +1275,7 @@ var FilterDateRangePicker = function(_a) {
     React.createElement(
       FilterContents,
       null,
-      React.createElement(FilterDateRangePickerField, SuccessIcon.__assign({ label, locale, selectedRange }, restProps))
+      React.createElement(FilterDateRangePickerField, SuccessIcon.__assign({ id: "".concat(id, "--input"), label, locale, selectedRange }, restProps))
     )
   );
 };
@@ -1273,14 +1283,14 @@ FilterDateRangePicker.displayName = "FilterDateRangePicker";
 
 var FilterBarDateRangePicker = function(_a) {
   var id = _a.id, onRangeChange = _a.onRangeChange, _b = _a.locale, locale = _b === void 0 ? "en-AU" : _b, props = SuccessIcon.__rest(_a, ["id", "onRangeChange", "locale"]);
-  var _c = useFilterBarContext(), getFilterState = _c.getFilterState, toggleOpenFilter = _c.toggleOpenFilter, updateValue = _c.updateValue;
+  var _c = useFilterBarContext(), getFilterState = _c.getFilterState, setFilterOpenState = _c.setFilterOpenState, updateValue = _c.updateValue;
   if (!id)
     throw Error("Missing `id` prop in FilterBarDateRangePicker");
   var filterState = getFilterState(id);
   return React.createElement(FilterDateRangePicker, SuccessIcon.__assign({}, props, { id, label: filterState.name, renderTrigger: function(triggerProps) {
     return React.createElement(FilterBarButton, SuccessIcon.__assign({}, triggerProps, { id, isRemovable: filterState.isRemovable }));
   }, isOpen: filterState.isOpen, setIsOpen: function(open) {
-    return toggleOpenFilter(id, open);
+    return setFilterOpenState(id, open);
   }, selectedRange: filterState.value, onRangeChange: function(range) {
     updateValue(id, range);
     onRangeChange === null || onRangeChange === void 0 ? void 0 : onRangeChange(range);
@@ -1776,7 +1786,7 @@ var convertConsumableFormatIntoSelection = function(value) {
 };
 var FilterBarMultiSelect = function(_a) {
   var id = _a.id, propsItems = _a.items, children = _a.children, onSelectionChange = _a.onSelectionChange, props = SuccessIcon.__rest(_a, ["id", "items", "children", "onSelectionChange"]);
-  var _b = useFilterBarContext(), getFilterState = _b.getFilterState, toggleOpenFilter = _b.toggleOpenFilter, updateValue = _b.updateValue, hideFilter = _b.hideFilter;
+  var _b = useFilterBarContext(), getFilterState = _b.getFilterState, setFilterOpenState = _b.setFilterOpenState, updateValue = _b.updateValue, hideFilter = _b.hideFilter;
   var _c = React.useState(propsItems), items = _c[0], setItems = _c[1];
   if (!id)
     throw Error("Missing `id` prop in FilterBarMultiSelect");
@@ -1811,7 +1821,7 @@ var FilterBarMultiSelect = function(_a) {
     items,
     isOpen: filterState.isOpen,
     onOpenChange: function(open) {
-      return toggleOpenFilter(id, open);
+      return setFilterOpenState(id, open);
     },
     trigger: function() {
       var triggerProps = {
@@ -1995,7 +2005,7 @@ FilterSelect.ItemDefaultRender = ListItem;
 
 var FilterBarSelect = function(_a) {
   var id = _a.id, propsItems = _a.items, onSelectionChange = _a.onSelectionChange, props = SuccessIcon.__rest(_a, ["id", "items", "onSelectionChange"]);
-  var _b = useFilterBarContext(), getFilterState = _b.getFilterState, toggleOpenFilter = _b.toggleOpenFilter, updateValue = _b.updateValue;
+  var _b = useFilterBarContext(), getFilterState = _b.getFilterState, setFilterOpenState = _b.setFilterOpenState, updateValue = _b.updateValue;
   var _c = React.useState(propsItems), items = _c[0], setItems = _c[1];
   if (!id)
     throw Error("Missing `id` prop in FilterBarSelect");
@@ -2021,7 +2031,7 @@ var FilterBarSelect = function(_a) {
     updateValue(id, key);
     onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(key);
   }, isOpen: filterState.isOpen, setIsOpen: function(open) {
-    return toggleOpenFilter(id, open);
+    return setFilterOpenState(id, open);
   } }));
 };
 FilterBarSelect.displayName = "FilterBarSelect";