@thecb/components 11.1.9 → 11.1.11-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs.js CHANGED
@@ -46862,7 +46862,7 @@ var AutopayModalModule = function AutopayModalModule(_ref) {
46862
46862
  var nextDate = dueDate || nextAutopayDate;
46863
46863
  var modalExtraProps = {
46864
46864
  modalHeaderText: autoPayActive ? deactivateText : activateText,
46865
- modalBodyText: autoPayActive ? "Are you sure you want to stop ".concat(plan, "? ").concat(!inactive && nextDate && nextDate !== "On" ? "Your next payment will be due on " + nextDate + "." : "") : generateMethodNeededText(plan, allowedPaymentInstruments),
46865
+ modalBodyText: autoPayActive ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Paragraph$1, null, "Are you sure you want to stop ", plan, "?", !inactive && nextDate && nextDate !== "On" ? "Your next payment will be due on " + nextDate + "." : ""), !isPaymentPlan && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("br", null), /*#__PURE__*/React__default.createElement(Paragraph$1, null, "If your next autopayment is scheduled to run today, you may be billed today and autopay will then stop for the next billing cycle."))) : generateMethodNeededText(plan, allowedPaymentInstruments),
46866
46866
  continueButtonText: autoPayActive ? "Stop ".concat(shortPlan) : "Add",
46867
46867
  useDangerButton: autoPayActive,
46868
46868
  continueAction: autoPayActive ? function () {
@@ -50740,8 +50740,7 @@ var FilterButton$1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
50740
50740
  truncateBtnTextWidth = _ref.truncateBtnTextWidth,
50741
50741
  filterLabel = _ref.filterLabel,
50742
50742
  selectedOptions = _ref.selectedOptions,
50743
- extraStyles = _ref.extraStyles,
50744
- dataAppliedOptions = _ref.dataAppliedOptions;
50743
+ extraStyles = _ref.extraStyles;
50745
50744
  var btnTextFilterDescription = selectedOptions !== null && selectedOptions !== void 0 && selectedOptions.length ? "".concat(filterLabel ? "".concat(filterLabel, ": ") : "").concat(selectedOptions[0].name) : "".concat(filterLabel ? filterLabel : "");
50746
50745
  var btnTextItemsDescription = selectedOptions !== null && selectedOptions !== void 0 && selectedOptions.length && (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 1 ? ", +".concat((selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) - 1, " More") : "";
50747
50746
  return /*#__PURE__*/React__default.createElement(StyledFilterButton, {
@@ -50759,7 +50758,6 @@ var FilterButton$1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
50759
50758
  dataQa: "".concat(name, "-filter-button"),
50760
50759
  extraStyles: extraStyles,
50761
50760
  "aria-label": "".concat(filterLabel, " Filter: ").concat(btnTextFilterDescription, " ").concat(btnTextItemsDescription),
50762
- "data-applied-options": dataAppliedOptions,
50763
50761
  contentOverride: true
50764
50762
  }, btnContentOverride ? btnContentOverride : /*#__PURE__*/React__default.createElement(Center, {
50765
50763
  as: "span",
@@ -50944,19 +50942,6 @@ var selectOption = function selectOption(option, selectedOptions, setSelectedOpt
50944
50942
  setSelectedOptions(moreOptions);
50945
50943
  }
50946
50944
  };
50947
- var mergeOptions = function mergeOptions(selectedOptions, activeOptions) {
50948
- if (!activeOptions.length) return selectedOptions;
50949
- if (!selectedOptions.length) return activeOptions;
50950
- var mergedOptions = _toConsumableArray(selectedOptions);
50951
- activeOptions.forEach(function (activeOption) {
50952
- if (!mergedOptions.some(function (option) {
50953
- return option.name === activeOption.name;
50954
- })) {
50955
- mergedOptions.push(activeOption);
50956
- }
50957
- });
50958
- return mergedOptions;
50959
- };
50960
50945
 
50961
50946
  var useKeyboardNavigation = function useKeyboardNavigation(_ref) {
50962
50947
  var options = _ref.options,
@@ -51157,75 +51142,41 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
51157
51142
  searchable = _ref$searchable === void 0 ? true : _ref$searchable,
51158
51143
  themeValues = _ref.themeValues,
51159
51144
  _ref$truncateBtnTextW = _ref.truncateBtnTextWidth,
51160
- truncateBtnTextWidth = _ref$truncateBtnTextW === void 0 ? "15rem" : _ref$truncateBtnTextW,
51161
- activeAppliedOptions = _ref.activeAppliedOptions;
51162
- // State to manage whether the dropdown is open or closed
51145
+ truncateBtnTextWidth = _ref$truncateBtnTextW === void 0 ? "15rem" : _ref$truncateBtnTextW;
51163
51146
  var _useState = React.useState(false),
51164
51147
  _useState2 = _slicedToArray(_useState, 2),
51165
51148
  opened = _useState2[0],
51166
51149
  setOpened = _useState2[1];
51167
-
51168
- // State to manage the currently selected options
51169
51150
  var _useState3 = React.useState([]),
51170
51151
  _useState4 = _slicedToArray(_useState3, 2),
51171
51152
  selectedOptions = _useState4[0],
51172
51153
  setSelectedOptions = _useState4[1];
51173
-
51174
- // State to manage the applied options, initialized with activeAppliedOptions or an empty array
51175
- var _useState5 = React.useState(activeAppliedOptions || []),
51154
+ var _useState5 = React.useState([]),
51176
51155
  _useState6 = _slicedToArray(_useState5, 2),
51177
51156
  appliedOptions = _useState6[0],
51178
51157
  setAppliedOptions = _useState6[1];
51179
-
51180
- // State to track whether the user has interacted with the component
51181
- var _useState7 = React.useState(false),
51182
- _useState8 = _slicedToArray(_useState7, 2),
51183
- hasInteracted = _useState8[0],
51184
- setHasInteracted = _useState8[1];
51185
-
51186
- // Reference to keep track of the opened state across renders without causing re-renders
51187
51158
  var openedRef = React.useRef(opened);
51188
-
51189
- // Hook to detect clicks outside the component and close the dropdown
51159
+ var handleOnClose = function handleOnClose() {
51160
+ if (openedRef.current) {
51161
+ setOpened(false);
51162
+ actions.fields.searchTerm.set("");
51163
+ }
51164
+ };
51190
51165
  var containerRef = useOutsideClickHook(function () {
51191
51166
  return handleOnClose();
51192
51167
  });
51193
-
51194
- // References to various elements within the component
51195
51168
  var dropdownRef = React.useRef(null);
51196
51169
  var filterButtonRef = React.useRef(null);
51197
51170
  var applyFilterButtonRef = React.useRef(null);
51198
-
51199
- // IDs for accessibility and identification purposes
51200
51171
  var filterDropdownID = "".concat(name, "-filter-dropdown");
51201
51172
  var listGroupID = "".concat(name, "-list-group");
51202
- var handleOnClose = function handleOnClose() {
51203
- if (openedRef.current) {
51204
- setOpened(false);
51205
- actions.fields.searchTerm.set("");
51206
- }
51207
- };
51208
51173
  React.useEffect(function () {
51209
51174
  openedRef.current = opened;
51210
51175
  if (!opened) {
51211
- if (hasInteracted) {
51212
- onApply(selectedOptions);
51213
- setAppliedOptions(selectedOptions);
51214
- }
51215
- } else {
51216
- setHasInteracted(true);
51176
+ onApply(selectedOptions);
51177
+ setAppliedOptions(selectedOptions);
51217
51178
  }
51218
51179
  }, [opened]);
51219
- React.useEffect(function () {
51220
- // Update the applied options state with the current active applied options,
51221
- // or an empty array if activeAppliedOptions is undefined or null.
51222
- // This ensures that the current applied options are in sync with the parent component.
51223
- setAppliedOptions(activeAppliedOptions || []);
51224
-
51225
- // Merge the selected options with the active applied options.
51226
- var mergedSelections = mergeOptions(selectedOptions, activeAppliedOptions);
51227
- setSelectedOptions(mergedSelections);
51228
- }, [activeAppliedOptions]);
51229
51180
  React.useEffect(function () {
51230
51181
  var handleKeyDown = function handleKeyDown(event) {
51231
51182
  if (event.key === "Escape") {
@@ -51267,8 +51218,7 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
51267
51218
  truncateBtnTextWidth: truncateBtnTextWidth,
51268
51219
  filterLabel: filterLabel,
51269
51220
  selectedOptions: selectedOptions,
51270
- extraStyles: btnExtraStyles,
51271
- dataAppliedOptions: appliedOptions === null || appliedOptions === void 0 ? void 0 : appliedOptions.length
51221
+ extraStyles: btnExtraStyles
51272
51222
  }), /*#__PURE__*/React__default.createElement(FilterDropdown, {
51273
51223
  id: filterDropdownID,
51274
51224
  ref: dropdownRef,