@kaizen/components 1.20.5 → 1.22.0

package/dist/cjs/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var SuccessIcon = require('./SuccessIcon-562c344e.js');
+var SuccessIcon = require('./SuccessIcon-0162523d.js');
 var React = require('react');
 var classnames = require('classnames');
 var draftBadge = require('@kaizen/draft-badge');
@@ -9,6 +9,7 @@ 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');
@@ -16,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');
@@ -30,7 +30,6 @@ var list = require('@react-stately/list');
 var button = require('@react-aria/button');
 var menu$1 = require('@react-aria/menu');
 var menu = require('@react-stately/menu');
-var button$1 = require('@kaizen/button');
 var loadingSkeleton = require('@kaizen/loading-skeleton');
 var focus = require('@react-aria/focus');
 var utils = require('@react-aria/utils');
@@ -323,6 +322,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 +346,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 +363,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 +377,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 +451,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 +462,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 +493,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 +516,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 +643,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();
@@ -730,65 +796,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,
@@ -908,7 +915,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);
@@ -918,7 +925,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";
@@ -1275,14 +1282,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);
@@ -1351,7 +1358,7 @@ var useSelectionContext = function() {
 var SelectionConsumer = SelectionContext.Consumer;
 SelectionProvider.displayName = "SelectionProvider";
 
-var styles$t = {"listBox":"ListBox-module_listBox__UNOzJ","overflown":"ListBox-module_overflown__ATtxj","hidden":"ListBox-module_hidden__tQP6S"};
+var styles$t = {"listBox":"ListBox-module_listBox__UNOzJ","overflown":"ListBox-module_overflown__ATtxj","hidden":"ListBox-module_hidden__tQP6S","noResultsWrapper":"ListBox-module_noResultsWrapper__iJ-x6"};
 
 var getItemsFromKeys = function(items, keys) {
   var itemKeys = Array.from(keys);
@@ -1399,7 +1406,7 @@ var ListBox$1 = function(_a) {
     return React.createElement(
       React.Fragment,
       null,
-      React.createElement("div", null, children(itemsState)),
+      React.createElement("div", { className: styles$t.noResultsWrapper }, children(itemsState)),
       React.createElement("ul", { ref: listRef, className: styles$t.hidden })
     );
   }
@@ -1407,15 +1414,36 @@ var ListBox$1 = function(_a) {
 };
 ListBox$1.displayName = "FilterMultiSelect.ListBox";
 
-var styles$s = {"listBoxSection":"ListBoxSection-module_listBoxSection__zH8wd"};
+var styles$s = {"listBoxSection":"ListBoxSection-module_listBoxSection__zH8wd","listBoxSectionHeader":"ListBoxSection-module_listBoxSectionHeader__NcTZR"};
 
 var ListBoxSection$1 = function(_a) {
-  var items = _a.items, sectionName = _a.sectionName, children = _a.children;
-  return React.createElement("div", { "aria-label": sectionName, className: styles$s.listBoxSection }, Array.from(items).map(function(node) {
-    return node != void 0 && children(node);
-  }));
+  var items = _a.items, children = _a.children, sectionName = _a.sectionName, restProps = SuccessIcon.__rest(_a, ["items", "children", "sectionName"]);
+  var listSectionId = React.useState(uuid.v4())[0];
+  var hasSectionHeader = "sectionHeader" in restProps;
+  return React.createElement(
+    "li",
+    { role: "presentation" },
+    React.createElement(
+      "ul",
+      { className: styles$s.listBoxSection, "aria-label": !hasSectionHeader ? sectionName : void 0, "aria-labelledby": hasSectionHeader ? listSectionId : void 0, role: "group" },
+      hasSectionHeader && React.createElement(
+        "li",
+        { className: styles$s.listBoxSectionHeader, id: listSectionId, role: "presentation" },
+        sectionName && React.createElement(
+          a11y.VisuallyHidden,
+          null,
+          sectionName,
+          ". "
+        ),
+        restProps.sectionHeader
+      ),
+      Array.from(items).map(function(node) {
+        return node != void 0 && children(node);
+      })
+    )
+  );
 };
-ListBoxSection$1.displayName = "FilterMultiSelect.ListBoxSection";
+ListBoxSection$1.displayName = "ListBoxSection";
 
 var styles$r = {"container":"LoadMoreButton-module_container__5VoUY"};
 
@@ -1423,7 +1451,7 @@ var LoadMoreButton = function(props) {
   return React.createElement(
     "div",
     { className: styles$r.container },
-    React.createElement(button$1.Button, SuccessIcon.__assign({}, props, { fullWidth: true }))
+    React.createElement(Button, SuccessIcon.__assign({}, props, { fullWidth: true }))
   );
 };
 LoadMoreButton.displayName = "FilterMultiSelect.LoadMoreButton";
@@ -1639,9 +1667,12 @@ SearchInput.displayName = "FilterMultiSelect.SearchInput";
 var styles$j = {"divider":"SectionDivider-module_divider__zlsWs"};
 
 var SectionDivider$1 = function() {
-  return React.createElement(draftDivider.Divider, { classNameOverride: styles$j.divider, variant: "canvas" });
+  return React.createElement(
+    "li",
+    { className: styles$j.divider, "aria-hidden": "true" },
+    React.createElement(draftDivider.Divider, { variant: "canvas" })
+  );
 };
-SectionDivider$1.displayName = "FilterMultiSelect.SectionDivider";
 
 var styles$i = {"button":"SelectionControlButton-module_button__F6wec","isDisabled":"SelectionControlButton-module_isDisabled__lYOrG"};
 
@@ -1778,7 +1809,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");
@@ -1813,7 +1844,7 @@ var FilterBarMultiSelect = function(_a) {
     items,
     isOpen: filterState.isOpen,
     onOpenChange: function(open) {
-      return toggleOpenFilter(id, open);
+      return setFilterOpenState(id, open);
     },
     trigger: function() {
       var triggerProps = {
@@ -1997,7 +2028,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");
@@ -2023,7 +2054,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";