@primer/react 38.0.0-rc.0 → 38.0.0-rc.09f015db1

package/dist/FilteredActionList/FilteredActionList.js

@@ -0,0 +1,457 @@
+import { c } from 'react-compiler-runtime';
+import { scrollIntoView, FocusKeys } from '@primer/behaviors';
+import { useCallback, useRef, useState, useEffect } from 'react';
+import { ActionList } from '../ActionList/index.js';
+import { useFocusZone } from '../hooks/useFocusZone.js';
+import { useId } from '../hooks/useId.js';
+import { useProvidedRefOrCreate } from '../hooks/useProvidedRefOrCreate.js';
+import { useProvidedStateOrCreate } from '../hooks/useProvidedStateOrCreate.js';
+import useScrollFlash from '../hooks/useScrollFlash.js';
+import { FilteredActionListLoadingTypes, FilteredActionListBodyLoader } from './FilteredActionListLoaders.js';
+import classes from './FilteredActionList.module.css.js';
+import { ActionListContainerContext } from '../ActionList/ActionListContainerContext.js';
+import { isValidElementType } from 'react-is';
+import { useAnnouncements } from './useAnnouncements.js';
+import { clsx } from 'clsx';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useFeatureFlag } from '../FeatureFlags/useFeatureFlag.js';
+import TextInput from '../TextInput/TextInput.js';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
+import Checkbox from '../Checkbox/Checkbox.js';
+
+const menuScrollMargins = {
+  startMargin: 0,
+  endMargin: 8
+};
+function FilteredActionList({
+  loading = false,
+  placeholderText,
+  filterValue: externalFilterValue,
+  loadingType = FilteredActionListLoadingTypes.bodySpinner,
+  onFilterChange,
+  onListContainerRefChanged,
+  onInputRefChanged,
+  items,
+  textInputProps,
+  inputRef: providedInputRef,
+  groupMetadata,
+  showItemDividers,
+  message,
+  messageText,
+  className,
+  selectionVariant,
+  announcementsEnabled = true,
+  fullScreenOnNarrow,
+  onSelectAllChange,
+  ...listProps
+}) {
+  const [filterValue, setInternalFilterValue] = useProvidedStateOrCreate(externalFilterValue, undefined, '');
+  const onInputChange = useCallback(e => {
+    const value = e.target.value;
+    onFilterChange(value, e);
+    setInternalFilterValue(value);
+  }, [onFilterChange, setInternalFilterValue]);
+  const inputAndListContainerRef = useRef(null);
+  const listRef = useRef(null);
+  const scrollContainerRef = useRef(null);
+  const inputRef = useProvidedRefOrCreate(providedInputRef);
+  const usingRemoveActiveDescendant = useFeatureFlag('primer_react_select_panel_remove_active_descendant');
+  const [listContainerElement, setListContainerElement] = useState(null);
+  const activeDescendantRef = useRef();
+  const listId = useId();
+  const inputDescriptionTextId = useId();
+  const [isInputFocused, setIsInputFocused] = useState(false);
+  const selectAllChecked = items.length > 0 && items.every(item => item.selected);
+  const selectAllIndeterminate = !selectAllChecked && items.some(item_0 => item_0.selected);
+  const selectAllLabelText = selectAllChecked ? 'Deselect all' : 'Select all';
+  const getItemListForEachGroup = useCallback(groupId => {
+    const itemsInGroup = [];
+    for (const item_1 of items) {
+      // Look up the group associated with the current item.
+      if (item_1.groupId === groupId) {
+        itemsInGroup.push(item_1);
+      }
+    }
+    return itemsInGroup;
+  }, [items]);
+  const onInputKeyDown = useCallback(event => {
+    if (event.key === 'ArrowDown') {
+      if (listRef.current) {
+        const firstSelectedItem = listRef.current.querySelector('[role="option"]');
+        firstSelectedItem === null || firstSelectedItem === void 0 ? void 0 : firstSelectedItem.focus();
+        event.preventDefault();
+      }
+    } else if (event.key === 'Enter') {
+      let firstItem;
+      // If there are groups, it's not guaranteed that the first item is the actual first item in the first -
+      // as groups are rendered in the order of the groupId provided
+      if (groupMetadata) {
+        let firstGroupIndex = 0;
+        for (let i = 0; i < groupMetadata.length; i++) {
+          if (getItemListForEachGroup(groupMetadata[i].groupId).length > 0) {
+            break;
+          } else {
+            firstGroupIndex++;
+          }
+        }
+        const firstGroup = groupMetadata[firstGroupIndex].groupId;
+        firstItem = items.filter(item_2 => item_2.groupId === firstGroup)[0];
+      } else {
+        firstItem = items[0];
+      }
+      if (firstItem.onAction) {
+        firstItem.onAction(firstItem, event);
+        event.preventDefault();
+      }
+    }
+  }, [items, groupMetadata, getItemListForEachGroup]);
+  const onInputKeyPress = useCallback(event_0 => {
+    if (event_0.key === 'Enter' && activeDescendantRef.current) {
+      event_0.preventDefault();
+      event_0.nativeEvent.stopImmediatePropagation();
+
+      // Forward Enter key press to active descendant so that item gets activated
+      const activeDescendantEvent = new KeyboardEvent(event_0.type, event_0.nativeEvent);
+      activeDescendantRef.current.dispatchEvent(activeDescendantEvent);
+    }
+  }, [activeDescendantRef]);
+
+  // BEGIN: Todo remove when we remove usingRemoveActiveDescendant
+  const listContainerRefCallback = useCallback(node => {
+    setListContainerElement(node);
+    onListContainerRefChanged === null || onListContainerRefChanged === void 0 ? void 0 : onListContainerRefChanged(node);
+  }, [onListContainerRefChanged]);
+  useEffect(() => {
+    onInputRefChanged === null || onInputRefChanged === void 0 ? void 0 : onInputRefChanged(inputRef);
+  }, [inputRef, onInputRefChanged]);
+  //END: Todo remove when we remove usingRemoveActiveDescendant
+
+  useFocusZone(!usingRemoveActiveDescendant ? {
+    containerRef: {
+      current: listContainerElement
+    },
+    bindKeys: FocusKeys.ArrowVertical | FocusKeys.PageUpDown,
+    focusOutBehavior: 'wrap',
+    focusableElementFilter: element => {
+      return !(element instanceof HTMLInputElement);
+    },
+    activeDescendantFocus: inputRef,
+    onActiveDescendantChanged: (current, previous, directlyActivated) => {
+      activeDescendantRef.current = current;
+      if (current && scrollContainerRef.current && directlyActivated) {
+        scrollIntoView(current, scrollContainerRef.current, menuScrollMargins);
+      }
+    }
+  } : undefined, [listContainerElement, usingRemoveActiveDescendant]);
+  useEffect(() => {
+    if (activeDescendantRef.current && scrollContainerRef.current) {
+      scrollIntoView(activeDescendantRef.current, scrollContainerRef.current, {
+        ...menuScrollMargins,
+        behavior: 'auto'
+      });
+    }
+  }, [items, inputRef]);
+  useEffect(() => {
+    if (usingRemoveActiveDescendant) {
+      const inputAndListContainerElement = inputAndListContainerRef.current;
+      if (!inputAndListContainerElement) return;
+      const list = listRef.current;
+      if (!list) return;
+
+      // Listen for focus changes within the container
+      const handleFocusIn = event_1 => {
+        if (event_1.target === inputRef.current || list.contains(event_1.target)) {
+          setIsInputFocused(inputRef.current && inputRef.current === document.activeElement ? true : false);
+        }
+      };
+      inputAndListContainerElement.addEventListener('focusin', handleFocusIn);
+      return () => {
+        inputAndListContainerElement.removeEventListener('focusin', handleFocusIn);
+      };
+    }
+  }, [items, inputRef, listContainerElement, usingRemoveActiveDescendant]); // Re-run when items change to update active indicators
+
+  useEffect(() => {
+    if (usingRemoveActiveDescendant && !loading) {
+      setIsInputFocused(inputRef.current && inputRef.current === document.activeElement ? true : false);
+    }
+  }, [loading, inputRef, usingRemoveActiveDescendant]);
+  useAnnouncements(items, usingRemoveActiveDescendant ? listRef : {
+    current: listContainerElement
+  }, inputRef, announcementsEnabled, loading, messageText);
+  useScrollFlash(scrollContainerRef);
+  const handleSelectAllChange = useCallback(e_0 => {
+    if (onSelectAllChange) {
+      onSelectAllChange(e_0.target.checked);
+    }
+  }, [onSelectAllChange]);
+  function getBodyContent() {
+    if (loading && scrollContainerRef.current && loadingType.appearsInBody) {
+      return /*#__PURE__*/jsx(FilteredActionListBodyLoader, {
+        loadingType: loadingType,
+        height: scrollContainerRef.current.clientHeight
+      });
+    }
+    if (message) {
+      return message;
+    }
+    let firstGroupIndex_0 = 0;
+    const actionListContent = /*#__PURE__*/jsx(ActionList, {
+      ref: usingRemoveActiveDescendant ? listRef : listContainerRefCallback,
+      showDividers: showItemDividers,
+      selectionVariant: selectionVariant,
+      ...listProps,
+      role: "listbox",
+      id: listId,
+      className: classes.ActionList,
+      children: groupMetadata !== null && groupMetadata !== void 0 && groupMetadata.length ? groupMetadata.map((group, index) => {
+        var _group$header, _group$header2;
+        if (index === firstGroupIndex_0 && getItemListForEachGroup(group.groupId).length === 0) {
+          firstGroupIndex_0++; // Increment firstGroupIndex if the first group has no items
+        }
+        return /*#__PURE__*/jsxs(ActionList.Group, {
+          children: [/*#__PURE__*/jsx(ActionList.GroupHeading, {
+            variant: (_group$header = group.header) !== null && _group$header !== void 0 && _group$header.variant ? group.header.variant : undefined,
+            children: (_group$header2 = group.header) !== null && _group$header2 !== void 0 && _group$header2.title ? group.header.title : `Group ${group.groupId}`
+          }), getItemListForEachGroup(group.groupId).map(({
+            key: itemKey,
+            ...item_3
+          }, itemIndex) => {
+            var _ref, _item_3$id;
+            const key = (_ref = itemKey !== null && itemKey !== void 0 ? itemKey : (_item_3$id = item_3.id) === null || _item_3$id === void 0 ? void 0 : _item_3$id.toString()) !== null && _ref !== void 0 ? _ref : itemIndex.toString();
+            return /*#__PURE__*/jsx(MappedActionListItem, {
+              className: clsx(classes.ActionListItem, 'className' in item_3 ? item_3.className : undefined),
+              "data-input-focused": isInputFocused ? '' : undefined,
+              "data-first-child": index === firstGroupIndex_0 && itemIndex === 0 ? '' : undefined,
+              ...item_3,
+              renderItem: listProps.renderItem
+            }, key);
+          })]
+        }, index);
+      }) : items.map(({
+        key: itemKey_0,
+        ...item_4
+      }, index_0) => {
+        var _ref2, _item_4$id;
+        const key_0 = (_ref2 = itemKey_0 !== null && itemKey_0 !== void 0 ? itemKey_0 : (_item_4$id = item_4.id) === null || _item_4$id === void 0 ? void 0 : _item_4$id.toString()) !== null && _ref2 !== void 0 ? _ref2 : index_0.toString();
+        return /*#__PURE__*/jsx(MappedActionListItem, {
+          className: clsx(classes.ActionListItem, 'className' in item_4 ? item_4.className : undefined),
+          "data-input-focused": isInputFocused ? '' : undefined,
+          "data-first-child": index_0 === 0 ? '' : undefined,
+          ...item_4,
+          renderItem: listProps.renderItem
+        }, key_0);
+      })
+    });
+
+    // Use ActionListContainerContext.Provider only for the old behavior (when feature flag is disabled)
+    if (usingRemoveActiveDescendant) {
+      return /*#__PURE__*/jsx(ActionListContainerContext.Provider, {
+        value: {
+          container: 'FilteredActionList',
+          listRole: 'listbox',
+          selectionAttribute: 'aria-selected',
+          selectionVariant,
+          enableFocusZone: true
+        },
+        children: actionListContent
+      });
+    } else {
+      return actionListContent;
+    }
+  }
+  const {
+    className: textInputClassName,
+    ...restTextInputProps
+  } = textInputProps || {};
+  return /*#__PURE__*/jsxs("div", {
+    ref: inputAndListContainerRef,
+    className: clsx(className, classes.Root),
+    "data-testid": "filtered-action-list",
+    children: [/*#__PURE__*/jsx("div", {
+      className: classes.Header,
+      children: /*#__PURE__*/jsx(TextInput, {
+        ref: inputRef,
+        block: true,
+        width: "auto",
+        color: "fg.default",
+        value: filterValue,
+        onChange: onInputChange,
+        onKeyPress: onInputKeyPress,
+        onKeyDown: usingRemoveActiveDescendant ? onInputKeyDown : () => {},
+        placeholder: placeholderText,
+        role: "combobox",
+        "aria-expanded": "true",
+        "aria-autocomplete": "list",
+        "aria-controls": listId,
+        "aria-label": placeholderText,
+        "aria-describedby": inputDescriptionTextId,
+        loaderPosition: 'leading',
+        loading: loading && !loadingType.appearsInBody,
+        className: clsx(textInputClassName, {
+          [classes.FullScreenTextInput]: fullScreenOnNarrow
+        }),
+        ...restTextInputProps
+      })
+    }), /*#__PURE__*/jsx(VisuallyHidden, {
+      id: inputDescriptionTextId,
+      children: "Items will be filtered as you type"
+    }), onSelectAllChange !== undefined && /*#__PURE__*/jsxs("div", {
+      className: classes.SelectAllContainer,
+      children: [/*#__PURE__*/jsx(Checkbox, {
+        id: "select-all-checkbox",
+        className: classes.SelectAllCheckbox,
+        checked: selectAllChecked,
+        indeterminate: selectAllIndeterminate,
+        onChange: handleSelectAllChange
+      }), /*#__PURE__*/jsx("label", {
+        className: classes.SelectAllLabel,
+        htmlFor: "select-all-checkbox",
+        children: selectAllLabelText
+      })]
+    }), /*#__PURE__*/jsx("div", {
+      ref: scrollContainerRef,
+      className: classes.Container,
+      children: getBodyContent()
+    })]
+  });
+}
+FilteredActionList.displayName = "FilteredActionList";
+function MappedActionListItem(item) {
+  const $ = c(35);
+  if (typeof item.renderItem === "function") {
+    let t0;
+    if ($[0] !== item) {
+      t0 = item.renderItem(item);
+      $[0] = item;
+      $[1] = t0;
+    } else {
+      t0 = $[1];
+    }
+    return t0;
+  }
+  let LeadingVisual;
+  let TrailingIcon;
+  let TrailingVisual;
+  let children;
+  let description;
+  let descriptionVariant;
+  let id;
+  let onAction;
+  let rest;
+  let text;
+  let trailingText;
+  if ($[2] !== item) {
+    ({
+      id,
+      description,
+      descriptionVariant,
+      text,
+      trailingVisual: TrailingVisual,
+      leadingVisual: LeadingVisual,
+      trailingText,
+      trailingIcon: TrailingIcon,
+      onAction,
+      children,
+      ...rest
+    } = item);
+    $[2] = item;
+    $[3] = LeadingVisual;
+    $[4] = TrailingIcon;
+    $[5] = TrailingVisual;
+    $[6] = children;
+    $[7] = description;
+    $[8] = descriptionVariant;
+    $[9] = id;
+    $[10] = onAction;
+    $[11] = rest;
+    $[12] = text;
+    $[13] = trailingText;
+  } else {
+    LeadingVisual = $[3];
+    TrailingIcon = $[4];
+    TrailingVisual = $[5];
+    children = $[6];
+    description = $[7];
+    descriptionVariant = $[8];
+    id = $[9];
+    onAction = $[10];
+    rest = $[11];
+    text = $[12];
+    trailingText = $[13];
+  }
+  let t0;
+  if ($[14] !== item || $[15] !== onAction) {
+    t0 = e => {
+      if (typeof onAction === "function") {
+        onAction(item, e);
+      }
+    };
+    $[14] = item;
+    $[15] = onAction;
+    $[16] = t0;
+  } else {
+    t0 = $[16];
+  }
+  let t1;
+  if ($[17] !== LeadingVisual) {
+    t1 = LeadingVisual ? /*#__PURE__*/jsx(ActionList.LeadingVisual, {
+      children: /*#__PURE__*/jsx(LeadingVisual, {})
+    }) : null;
+    $[17] = LeadingVisual;
+    $[18] = t1;
+  } else {
+    t1 = $[18];
+  }
+  let t2;
+  if ($[19] !== description || $[20] !== descriptionVariant) {
+    t2 = description ? /*#__PURE__*/jsx(ActionList.Description, {
+      variant: descriptionVariant,
+      children: description
+    }) : null;
+    $[19] = description;
+    $[20] = descriptionVariant;
+    $[21] = t2;
+  } else {
+    t2 = $[21];
+  }
+  let t3;
+  if ($[22] !== TrailingIcon || $[23] !== TrailingVisual || $[24] !== trailingText) {
+    t3 = TrailingVisual ? /*#__PURE__*/jsx(ActionList.TrailingVisual, {
+      children: typeof TrailingVisual !== "string" && isValidElementType(TrailingVisual) ? /*#__PURE__*/jsx(TrailingVisual, {}) : TrailingVisual
+    }) : TrailingIcon || trailingText ? /*#__PURE__*/jsxs(ActionList.TrailingVisual, {
+      children: [trailingText, TrailingIcon && /*#__PURE__*/jsx(TrailingIcon, {})]
+    }) : null;
+    $[22] = TrailingIcon;
+    $[23] = TrailingVisual;
+    $[24] = trailingText;
+    $[25] = t3;
+  } else {
+    t3 = $[25];
+  }
+  let t4;
+  if ($[26] !== children || $[27] !== id || $[28] !== rest || $[29] !== t0 || $[30] !== t1 || $[31] !== t2 || $[32] !== t3 || $[33] !== text) {
+    t4 = /*#__PURE__*/jsxs(ActionList.Item, {
+      role: "option",
+      onSelect: t0,
+      "data-id": id,
+      ...rest,
+      children: [t1, children, text, t2, t3]
+    });
+    $[26] = children;
+    $[27] = id;
+    $[28] = rest;
+    $[29] = t0;
+    $[30] = t1;
+    $[31] = t2;
+    $[32] = t3;
+    $[33] = text;
+    $[34] = t4;
+  } else {
+    t4 = $[34];
+  }
+  return t4;
+}
+FilteredActionList.displayName = 'FilteredActionList';
+
+export { FilteredActionList };

package/dist/FilteredActionList/FilteredActionList.module.css.js

@@ -0,0 +1,5 @@
+import './FilteredActionList-f6c2dc7a.css';
+
+var classes = {"Root":"prc-FilteredActionList-Root-S5E74","Header":"prc-FilteredActionList-Header-R1tjC","Container":"prc-FilteredActionList-Container-2A9NQ","ActionList":"prc-FilteredActionList-ActionList-QY9ZL","ActionListItem":"prc-FilteredActionList-ActionListItem-39lnB","FullScreenTextInput":"prc-FilteredActionList-FullScreenTextInput-rCAiq","SelectAllContainer":"prc-FilteredActionList-SelectAllContainer-w5otq","SelectAllCheckbox":"prc-FilteredActionList-SelectAllCheckbox-dq2yL","SelectAllLabel":"prc-FilteredActionList-SelectAllLabel-l34LA"};
+
+export { classes as default };

package/dist/FilteredActionList/FilteredActionListLoaders-a46a8ea4.css

@@ -0,0 +1,2 @@
+.prc-FilteredActionList-LoadingSkeleton-x9WXt{border-radius:4px}.prc-FilteredActionList-LoadingSpinner-4C8CM{align-content:center;flex-grow:1;height:100%;padding:var(--base-size-16,1rem);text-align:center}.prc-FilteredActionList-LoadingSkeletonContainer-FBx9v{display:flex;flex-direction:column;flex-grow:1;padding:var(--base-size-8,.5rem)}
+/*# sourceMappingURL=FilteredActionListLoaders-a46a8ea4.css.map */

package/dist/FilteredActionList/FilteredActionListLoaders-a46a8ea4.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/FilteredActionList/FilteredActionListLoaders.module.css"],"names":[],"mappings":"AAAA,8CAEE,iBACF,CAEA,6CAGE,oBAAqB,CADrB,WAAY,CAGZ,WAAY,CAJZ,gCAA4B,CAG5B,iBAEF,CAEA,uDAEE,YAAa,CAEb,qBAAsB,CADtB,WAAY,CAFZ,gCAIF","file":"FilteredActionListLoaders-a46a8ea4.css","sourcesContent":[".LoadingSkeleton {\n  /* stylelint-disable-next-line primer/borders */\n  border-radius: 4px;\n}\n\n.LoadingSpinner {\n  padding: var(--base-size-16);\n  flex-grow: 1;\n  align-content: center;\n  text-align: center;\n  height: 100%;\n}\n\n.LoadingSkeletonContainer {\n  padding: var(--base-size-8);\n  display: flex;\n  flex-grow: 1;\n  flex-direction: column;\n}\n"]}

package/dist/FilteredActionList/FilteredActionListLoaders.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilteredActionListLoaders.d.ts","sourceRoot":"","sources":["../../src/FilteredActionList/FilteredActionListLoaders.tsx"],"names":[],"mappings":"AAKA,qBAAa,6BAA6B;IACjC,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,EAAE,OAAO,CAAA;gBAEjB,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,OAAO;CAIjD;AAED,eAAO,MAAM,8BAA8B;;;;CAI1C,CAAA;AAKD,wBAAgB,4BAA4B,CAAC,EAC3C,WAAW,EACX,MAAM,GACP,EAAE;IACD,WAAW,EAAE,6BAA6B,CAAA;IAC1C,MAAM,EAAE,MAAM,CAAA;CACf,GAAG,GAAG,CAAC,OAAO,CAWd"}

package/dist/FilteredActionList/FilteredActionListLoaders.js

@@ -0,0 +1,161 @@
+import { c } from 'react-compiler-runtime';
+import { Stack } from '../Stack/Stack.js';
+import { SkeletonBox } from '../Skeleton/SkeletonBox.js';
+import classes from './FilteredActionListLoaders.module.css.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import Spinner from '../Spinner/Spinner.js';
+
+class FilteredActionListLoadingType {
+  constructor(name, appearsInBody) {
+    this.name = name;
+    this.appearsInBody = appearsInBody;
+  }
+}
+const FilteredActionListLoadingTypes = {
+  bodySpinner: new FilteredActionListLoadingType('body-spinner', true),
+  bodySkeleton: new FilteredActionListLoadingType('body-skeleton', true),
+  input: new FilteredActionListLoadingType('input', false)
+};
+const SKELETON_ROW_HEIGHT = 24;
+const SKELETON_MIN_ROWS = 3;
+function FilteredActionListBodyLoader(t0) {
+  const $ = c(4);
+  const {
+    loadingType,
+    height
+  } = t0;
+  switch (loadingType) {
+    case FilteredActionListLoadingTypes.bodySpinner:
+      {
+        let t1;
+        if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+          t1 = /*#__PURE__*/jsx(LoadingSpinner, {
+            "data-testid": "filtered-action-list-spinner"
+          });
+          $[0] = t1;
+        } else {
+          t1 = $[0];
+        }
+        return t1;
+      }
+    case FilteredActionListLoadingTypes.bodySkeleton:
+      {
+        const rows = height < SKELETON_ROW_HEIGHT ? SKELETON_MIN_ROWS : height / SKELETON_ROW_HEIGHT;
+        let t1;
+        if ($[1] !== rows) {
+          t1 = /*#__PURE__*/jsx(LoadingSkeleton, {
+            "data-testid": "filtered-action-list-skeleton",
+            rows: rows
+          });
+          $[1] = rows;
+          $[2] = t1;
+        } else {
+          t1 = $[2];
+        }
+        return t1;
+      }
+    default:
+      {
+        let t1;
+        if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+          t1 = /*#__PURE__*/jsx(Fragment, {});
+          $[3] = t1;
+        } else {
+          t1 = $[3];
+        }
+        return t1;
+      }
+  }
+}
+function LoadingSpinner(t0) {
+  const $ = c(4);
+  let props;
+  if ($[0] !== t0) {
+    ({
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = props;
+  } else {
+    props = $[1];
+  }
+  let t1;
+  if ($[2] !== props) {
+    t1 = /*#__PURE__*/jsx("div", {
+      className: classes.LoadingSpinner,
+      children: /*#__PURE__*/jsx(Spinner, {
+        ...props
+      })
+    });
+    $[2] = props;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+function LoadingSkeleton(t0) {
+  const $ = c(8);
+  let props;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      rows: t1,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = props;
+    $[2] = t1;
+  } else {
+    props = $[1];
+    t1 = $[2];
+  }
+  const rows = t1 === undefined ? 10 : t1;
+  let t2;
+  if ($[3] !== rows) {
+    t2 = Array.from({
+      length: rows
+    }, _temp);
+    $[3] = rows;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  let t3;
+  if ($[5] !== props || $[6] !== t2) {
+    t3 = /*#__PURE__*/jsx("div", {
+      className: classes.LoadingSkeletonContainer,
+      children: /*#__PURE__*/jsx(Stack, {
+        direction: "vertical",
+        justify: "center",
+        gap: "condensed",
+        ...props,
+        children: t2
+      })
+    });
+    $[5] = props;
+    $[6] = t2;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  return t3;
+}
+function _temp(_, i) {
+  return /*#__PURE__*/jsxs(Stack, {
+    direction: "horizontal",
+    gap: "condensed",
+    align: "center",
+    children: [/*#__PURE__*/jsx(SkeletonBox, {
+      width: "16px",
+      height: "16px"
+    }), /*#__PURE__*/jsx(SkeletonBox, {
+      height: "10px",
+      width: `${Math.random() * 60 + 20}%`,
+      className: classes.LoadingSkeleton
+    })]
+  }, i);
+}
+_temp.displayName = "_temp";
+
+export { FilteredActionListBodyLoader, FilteredActionListLoadingType, FilteredActionListLoadingTypes };

package/dist/FilteredActionList/FilteredActionListLoaders.module.css.js

@@ -0,0 +1,5 @@
+import './FilteredActionListLoaders-a46a8ea4.css';
+
+var classes = {"LoadingSkeleton":"prc-FilteredActionList-LoadingSkeleton-x9WXt","LoadingSpinner":"prc-FilteredActionList-LoadingSpinner-4C8CM","LoadingSkeletonContainer":"prc-FilteredActionList-LoadingSkeletonContainer-FBx9v"};
+
+export { classes as default };