@kaizen/components 1.20.5 → 1.22.0

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-import { _ as __rest, a as __assign, S as SVG, b as __spreadArray, c as SuccessIcon, I as IndicatorActiveIcon, d as IndicatorInactiveIcon } from './SuccessIcon-30b83808.js';
+import { _ as __rest, a as __assign, S as SVG, b as __spreadArray, c as SuccessIcon, I as IndicatorActiveIcon, d as IndicatorInactiveIcon } from './SuccessIcon-a903453a.js';
 import React, { forwardRef, useRef, useImperativeHandle, useState, useEffect, useContext, useMemo, useReducer, useCallback, createContext } from 'react';
 import classnames from 'classnames';
 import { BadgeAnimated, Badge } from '@kaizen/draft-badge';
@@ -7,6 +7,7 @@ import { FocusOn } from 'react-focus-on';
 import { usePopper } from 'react-popper';
 import { formatDateAsText, isInvalidDate, DateInput, getLocale, CalendarSingle } from '@kaizen/date-picker';
 import { v4 } from 'uuid';
+import { validateDate as validateDate$1 } from '@kaizen/date-picker/src/utils/validateDate';
 import { formatDateAsNumeral } from '@kaizen/date-picker/src/utils/formatDateAsNumeral';
 import { isDisabledDate } from '@kaizen/date-picker/src/utils/isDisabledDate';
 import { isSelectingDayInCalendar } from '@kaizen/date-picker/src/utils/isSelectingDayInCalendar';
@@ -14,7 +15,6 @@ import { parseDateFromNumeralFormatValue } from '@kaizen/date-picker/src/utils/p
 import { parseDateFromTextFormatValue } from '@kaizen/date-picker/src/utils/parseDateFromTextFormatValue';
 import { FieldMessage } from '@kaizen/draft-form';
 import { useIntl, StaticIntlProvider, FormattedMessage } from '@cultureamp/i18n-react-intl';
-import { validateDate as validateDate$1 } from '@kaizen/date-picker/src/utils/validateDate';
 import { Tooltip } from '@kaizen/draft-tooltip';
 import { getLocale as getLocale$1 } from '@kaizen/date-picker/src/utils/getLocale';
 import { formatDateAsText as formatDateAsText$1 } from '@kaizen/date-picker/src/utils/formatDateAsText';
@@ -28,7 +28,6 @@ import { useListState } from '@react-stately/list';
 import { useButton } from '@react-aria/button';
 import { useMenuTrigger } from '@react-aria/menu';
 import { useMenuTriggerState } from '@react-stately/menu';
-import { Button as Button$1 } from '@kaizen/button';
 import { LoadingInput, LoadingParagraph } from '@kaizen/loading-skeleton';
 import { useFocusRing, FocusScope } from '@react-aria/focus';
 import { mergeProps } from '@react-aria/utils';
@@ -321,6 +320,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) {
@@ -344,13 +344,15 @@ var updateValues = function(state, values) {
       state.activeFilterIds.add(id);
     }
   });
-  return updateDependentFilters(__assign(__assign({}, state), { values }));
+  return updateDependentFilters(__assign(__assign({}, state), { hasUpdatedValues: true, values }));
 };
 
 var filterBarStateReducer = function(state, action) {
   switch (action.type) {
     case "update_values":
       return __assign({}, updateValues(state, action.values));
+    case "complete_update_values":
+      return __assign(__assign({}, state), { hasUpdatedValues: false });
     case "update_single_filter":
       return __assign(__assign({}, state), { filters: updateSingleFilter(state, action.id, action.data) });
     case "activate_filter":
@@ -359,11 +361,11 @@ var filterBarStateReducer = function(state, action) {
     case "deactivate_filter":
       state.activeFilterIds["delete"](action.id);
       state.values[action.id] = void 0;
-      return __assign({}, updateDependentFilters(state));
+      return __assign(__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;
@@ -373,25 +375,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) {
@@ -449,7 +449,7 @@ var FilterBarProvider = function(_a) {
   var mappedFilters = useMemo(function() {
     return getMappedFilters(filters);
   }, [filters]);
-  var _b = useReducer(filterBarStateReducer, setupFilterBarState(filters)), state = _b[0], dispatch = _b[1];
+  var _b = useReducer(filterBarStateReducer, setupFilterBarState(filters, values)), state = _b[0], dispatch = _b[1];
   var value = {
     getFilterState: function(id) {
       return __assign(__assign({}, state.filters[id]), { isActive: state.activeFilterIds.has(id), value: values[id] });
@@ -460,6 +460,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({
@@ -485,14 +491,15 @@ var FilterBarProvider = function(_a) {
     }
   };
   useEffect(function() {
-    var shouldUpdate = state.values === null || checkShouldUpdateValues(state, values);
+    var shouldUpdate = checkShouldUpdateValues(state, values);
     if (shouldUpdate)
       dispatch({ type: "update_values", values: __assign({}, values) });
   }, [values]);
   useEffect(function() {
-    var shouldUpdate = state.values !== null && checkShouldUpdateValues(state, values);
-    if (shouldUpdate)
+    if (state.hasUpdatedValues) {
       onValuesChange(__assign({}, state.values));
+      dispatch({ type: "complete_update_values" });
+    }
   }, [state]);
   var activeFilters = Array.from(state.activeFilterIds, function(id) {
     return mappedFilters[id];
@@ -507,6 +514,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(args);
+  var _a = response.validationResponse, status = _a.status, validationMessage = _a.validationMessage, rest = __rest(_a, ["status", "validationMessage"]);
+  return __assign(__assign({}, response), { validationResponse: __assign(__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 = 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 ? formatDateAsText(date, disabledDays, locale) : "";
 };
@@ -561,20 +641,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();
@@ -728,65 +794,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(args);
-  var _a = response.validationResponse, status = _a.status, validationMessage = _a.validationMessage, rest = __rest(_a, ["status", "validationMessage"]);
-  return __assign(__assign({}, response), { validationResponse: __assign(__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 = 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(
     SVG,
@@ -906,7 +913,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 = __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);
@@ -916,7 +923,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";
@@ -1273,14 +1280,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 = __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, __assign({}, props, { id, label: filterState.name, renderTrigger: function(triggerProps) {
     return React.createElement(FilterBarButton, __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);
@@ -1349,7 +1356,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);
@@ -1397,7 +1404,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 })
     );
   }
@@ -1405,15 +1412,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 = __rest(_a, ["items", "children", "sectionName"]);
+  var listSectionId = useState(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(
+          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"};
 
@@ -1421,7 +1449,7 @@ var LoadMoreButton = function(props) {
   return React.createElement(
     "div",
     { className: styles$r.container },
-    React.createElement(Button$1, __assign({}, props, { fullWidth: true }))
+    React.createElement(Button, __assign({}, props, { fullWidth: true }))
   );
 };
 LoadMoreButton.displayName = "FilterMultiSelect.LoadMoreButton";
@@ -1637,9 +1665,12 @@ SearchInput.displayName = "FilterMultiSelect.SearchInput";
 var styles$j = {"divider":"SectionDivider-module_divider__zlsWs"};
 
 var SectionDivider$1 = function() {
-  return React.createElement(Divider, { classNameOverride: styles$j.divider, variant: "canvas" });
+  return React.createElement(
+    "li",
+    { className: styles$j.divider, "aria-hidden": "true" },
+    React.createElement(Divider, { variant: "canvas" })
+  );
 };
-SectionDivider$1.displayName = "FilterMultiSelect.SectionDivider";
 
 var styles$i = {"button":"SelectionControlButton-module_button__F6wec","isDisabled":"SelectionControlButton-module_isDisabled__lYOrG"};
 
@@ -1776,7 +1807,7 @@ var convertConsumableFormatIntoSelection = function(value) {
 };
 var FilterBarMultiSelect = function(_a) {
   var id = _a.id, propsItems = _a.items, children = _a.children, onSelectionChange = _a.onSelectionChange, props = __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 = useState(propsItems), items = _c[0], setItems = _c[1];
   if (!id)
     throw Error("Missing `id` prop in FilterBarMultiSelect");
@@ -1811,7 +1842,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 +2026,7 @@ FilterSelect.ItemDefaultRender = ListItem;
 
 var FilterBarSelect = function(_a) {
   var id = _a.id, propsItems = _a.items, onSelectionChange = _a.onSelectionChange, props = __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 = useState(propsItems), items = _c[0], setItems = _c[1];
   if (!id)
     throw Error("Missing `id` prop in FilterBarSelect");
@@ -2021,7 +2052,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";