@kaizen/components 1.20.4 → 1.21.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-dd5d38f1.js';
+import { _ as __rest, a as __assign, S as SVG, b as __spreadArray, c as SuccessIcon, I as IndicatorActiveIcon, d as IndicatorInactiveIcon } from './SuccessIcon-2b0fecc0.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';
@@ -6,6 +6,8 @@ import { LoadingSpinner } from '@kaizen/loading-spinner';
 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';
@@ -13,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';
@@ -31,7 +32,6 @@ 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';
-import { v4 } from 'uuid';
 import { Paragraph, Heading } from '@kaizen/typography';
 import { useOverlay, DismissButton } from '@react-aria/overlays';
 import { Divider } from '@kaizen/draft-divider';
@@ -321,6 +321,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 +345,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 +362,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 +376,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 +450,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 +461,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 +492,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 +515,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 +642,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();
@@ -641,7 +708,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 = __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 = __rest(_a, ["id", "inputProps", "locale", "defaultMonth", "selectedDate", "onDateChange", "onDateSubmit", "disabledDays", "description", "validationMessage", "onValidate", "classNameOverride"]);
+  var id = useState(propsId || v4())[0];
   var locale = getLocale(propsLocale);
   var dateValidation = useDateValidation({
     disabledDays,
@@ -727,65 +795,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,
@@ -905,7 +914,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);
@@ -915,7 +924,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";
@@ -1254,7 +1263,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 = __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 = __rest(_a, ["id", "isOpen", "setIsOpen", "renderTrigger", "selectedRange", "label", "locale"]);
+  var id = useState(propsId || v4())[0];
   return React.createElement(
     Filter,
     { isOpen, setIsOpen, renderTrigger: function(triggerProps) {
@@ -1263,7 +1273,7 @@ var FilterDateRangePicker = function(_a) {
     React.createElement(
       FilterContents,
       null,
-      React.createElement(FilterDateRangePickerField, __assign({ label, locale, selectedRange }, restProps))
+      React.createElement(FilterDateRangePickerField, __assign({ id: "".concat(id, "--input"), label, locale, selectedRange }, restProps))
     )
   );
 };
@@ -1271,14 +1281,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);
@@ -1774,7 +1784,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");
@@ -1809,7 +1819,7 @@ var FilterBarMultiSelect = function(_a) {
     items,
     isOpen: filterState.isOpen,
     onOpenChange: function(open) {
-      return toggleOpenFilter(id, open);
+      return setFilterOpenState(id, open);
     },
     trigger: function() {
       var triggerProps = {
@@ -1993,7 +2003,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");
@@ -2019,7 +2029,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";