@ceed/cds 1.15.0-next.9 → 1.15.0

package/dist/components/Pagination/Pagination.d.ts

@@ -21,7 +21,6 @@ interface PaginationProps extends React.ComponentProps<typeof PaginationRoot> {
     rowCount: number;
     onPageChange: (newPage: number) => void;
     size?: 'sm' | 'md' | 'lg';
-    variant?: 'standard' | 'compact';
 }
 declare function Pagination(props: PaginationProps): React.JSX.Element;
 declare namespace Pagination {

package/dist/components/inputs/FilterableCheckboxGroup.md

@@ -161,6 +161,18 @@ function MyComponent() {
 
 ```tsx
 <Stack spacing={2}>
+  <Stack direction="row" spacing={1}>
+    <button type="button" onClick={() => {
+      setOptions([...options, {
+        value: `new-${Date.now()}`,
+        label: `New Item ${options.length - 11}`
+      }]);
+    }} style={{
+      padding: '4px 12px',
+      cursor: 'pointer'
+    }}>
+    Add New Option
+  </button>
   <button type="button" onClick={() => {
     setKey(prev => prev + 1);
   }} style={{
@@ -169,11 +181,12 @@ function MyComponent() {
   }}>
   Force Re-render
 </button>
-<FilterableCheckboxGroup key={key} label="Sorting Demo" placeholder="Search..." helperText="Initial sort: Selected (C,B,A,3,2,1) first, then unselected (X,Y,Z,7,8,9)" options={sortingOptions} value={value} onChange={setValue} />
+</Stack>
+<FilterableCheckboxGroup key={key} label="Sorting Demo" placeholder="Search..." helperText="Click 'Add New Option' to test sorting when options change" options={options} value={value} onChange={setValue} />
 <Typography level="body-sm" sx={{
   whiteSpace: 'pre-line'
 }}>
-{`Selected: ${value.length > 0 ? value.join(', ') : 'None'}\n\nClick "Force Re-render" button to remount the component.\nOrder should remain the same (sorted only on initial mount).`}
+{`Selected: ${value.length > 0 ? value.join(', ') : 'None'}\n\nOptions count: ${options.length}\n\n- Add New Option: Add new item to test sorting when options change\n- Force Re-render: Remount component to test initial sorting\n\nAlphabet items (A-Z) appear first, then numbers (1-9).`}
 </Typography>
 </Stack>
 ```

package/dist/components/navigation/Pagination.md

@@ -2,8 +2,8 @@
 
 ## Introduction
 
-```
-<Canvas of={Pagination.Default} />
+```text
+// Unable to derive source for Default
 ```
 
 | Field                        | Description | Default |

package/dist/index.cjs

@@ -3528,10 +3528,8 @@ TableBody.displayName = "TableBody";
 
 // src/components/Pagination/Pagination.tsx
 var import_react27 = __toESM(require("react"));
-var import_ChevronLeftRounded = __toESM(require("@mui/icons-material/ChevronLeftRounded"));
-var import_ChevronRightRounded = __toESM(require("@mui/icons-material/ChevronRightRounded"));
-var import_FirstPageRounded = __toESM(require("@mui/icons-material/FirstPageRounded"));
-var import_LastPageRounded = __toESM(require("@mui/icons-material/LastPageRounded"));
+var import_ChevronLeft2 = __toESM(require("@mui/icons-material/ChevronLeft"));
+var import_ChevronRight2 = __toESM(require("@mui/icons-material/ChevronRight"));
 var import_joy35 = require("@mui/joy");
 var PaginationButton = (0, import_joy35.styled)(Button_default, {
   name: "Pagination",
@@ -3590,7 +3588,6 @@ function Pagination(props) {
     onPageChange,
     rowCount,
     size = "md",
-    variant = "standard",
     ...innerProps
   } = props;
   const [paginationModel, setPaginationModel] = useControlledState(
@@ -3617,87 +3614,6 @@ function Pagination(props) {
       setPaginationModel({ ...paginationModel, page: lastPage });
     }
   }, [rowCount, paginationModel, lastPage, setPaginationModel]);
-  const pageOptions = Array.from({ length: lastPage }, (_, i) => ({
-    label: `${i + 1}`,
-    value: `${i + 1}`
-  }));
-  if (variant === "compact") {
-    return /* @__PURE__ */ import_react27.default.createElement(PaginationRoot, { ...innerProps }, /* @__PURE__ */ import_react27.default.createElement(PaginationContainer, { direction: "row", size, alignItems: "center" }, /* @__PURE__ */ import_react27.default.createElement(Stack_default, { direction: "row" }, /* @__PURE__ */ import_react27.default.createElement(
-      PaginationIconButton,
-      {
-        size,
-        variant: "plain",
-        color: "neutral",
-        onClick: () => handlePageChange(firstPage),
-        disabled: paginationModel.page === firstPage,
-        "aria-label": "First page"
-      },
-      /* @__PURE__ */ import_react27.default.createElement(import_FirstPageRounded.default, null)
-    ), /* @__PURE__ */ import_react27.default.createElement(
-      PaginationIconButton,
-      {
-        size,
-        variant: "plain",
-        color: "neutral",
-        onClick: () => handlePageChange(paginationModel.page - 1),
-        disabled: paginationModel.page === firstPage,
-        "aria-label": "Previous page"
-      },
-      /* @__PURE__ */ import_react27.default.createElement(import_ChevronLeftRounded.default, null)
-    )), /* @__PURE__ */ import_react27.default.createElement(
-      Autocomplete_default,
-      {
-        size,
-        value: `${paginationModel.page}`,
-        onChange: (event) => {
-          if (event.target.value) {
-            handlePageChange(parseInt(event.target.value, 10));
-          }
-        },
-        options: pageOptions,
-        sx: {
-          width: {
-            sm: "80px",
-            md: "100px",
-            lg: "120px"
-          }[size]
-        }
-      }
-    ), /* @__PURE__ */ import_react27.default.createElement(
-      Typography_default,
-      {
-        level: `body-${size}`,
-        sx: (theme) => ({
-          color: theme.palette.text.secondary,
-          fontWeight: 500
-        })
-      },
-      "/ ",
-      lastPage
-    ), /* @__PURE__ */ import_react27.default.createElement(Stack_default, { direction: "row" }, /* @__PURE__ */ import_react27.default.createElement(
-      PaginationIconButton,
-      {
-        size,
-        variant: "plain",
-        color: "neutral",
-        onClick: () => handlePageChange(paginationModel.page + 1),
-        disabled: paginationModel.page === lastPage,
-        "aria-label": "Next page"
-      },
-      /* @__PURE__ */ import_react27.default.createElement(import_ChevronRightRounded.default, null)
-    ), /* @__PURE__ */ import_react27.default.createElement(
-      PaginationIconButton,
-      {
-        size,
-        variant: "plain",
-        color: "neutral",
-        onClick: () => handlePageChange(lastPage),
-        disabled: paginationModel.page === lastPage,
-        "aria-label": "Last page"
-      },
-      /* @__PURE__ */ import_react27.default.createElement(import_LastPageRounded.default, null)
-    ))));
-  }
   return /* @__PURE__ */ import_react27.default.createElement(PaginationRoot, { ...innerProps }, /* @__PURE__ */ import_react27.default.createElement(PaginationContainer, { direction: "row", size, alignItems: "center" }, /* @__PURE__ */ import_react27.default.createElement(
     PaginationIconButton,
     {
@@ -3708,7 +3624,7 @@ function Pagination(props) {
       disabled: paginationModel.page === firstPage,
       "aria-label": "Previous page"
     },
-    /* @__PURE__ */ import_react27.default.createElement(import_ChevronLeftRounded.default, null)
+    /* @__PURE__ */ import_react27.default.createElement(import_ChevronLeft2.default, null)
   ), paginationModel.page !== firstPage && /* @__PURE__ */ import_react27.default.createElement(PaginationButton, { size, variant: "plain", color: "neutral", onClick: () => handlePageChange(firstPage) }, firstPage), isMoreBeforePages && /* @__PURE__ */ import_react27.default.createElement(
     PaginationButton,
     {
@@ -3719,7 +3635,7 @@ function Pagination(props) {
       "aria-label": "More previous pages"
     },
     "..."
-  ), beforePages.map((p) => /* @__PURE__ */ import_react27.default.createElement(PaginationButton, { key: p, size, variant: "plain", color: "neutral", onClick: () => handlePageChange(p) }, p)), /* @__PURE__ */ import_react27.default.createElement(PaginationButton, { active: "true", size, "aria-current": "page" }, paginationModel.page), afterPages.map((p) => /* @__PURE__ */ import_react27.default.createElement(PaginationButton, { key: p, size, variant: "plain", color: "neutral", onClick: () => handlePageChange(p) }, p)), isMoreAfterPages && /* @__PURE__ */ import_react27.default.createElement(
+  ), beforePages.map((p) => /* @__PURE__ */ import_react27.default.createElement(PaginationButton, { key: p, size, variant: "plain", color: "neutral", onClick: () => handlePageChange(p) }, p)), /* @__PURE__ */ import_react27.default.createElement(PaginationButton, { active: "active", size, "aria-current": "page" }, paginationModel.page), afterPages.map((p) => /* @__PURE__ */ import_react27.default.createElement(PaginationButton, { key: p, size, variant: "plain", color: "neutral", onClick: () => handlePageChange(p) }, p)), isMoreAfterPages && /* @__PURE__ */ import_react27.default.createElement(
     PaginationButton,
     {
       size,
@@ -3739,7 +3655,7 @@ function Pagination(props) {
       disabled: paginationModel.page === lastPage,
       "aria-label": "Next page"
     },
-    /* @__PURE__ */ import_react27.default.createElement(import_ChevronRightRounded.default, null)
+    /* @__PURE__ */ import_react27.default.createElement(import_ChevronRight2.default, null)
   )));
 }
 Pagination.displayName = "Pagination";
@@ -4639,6 +4555,7 @@ function FilterableCheckboxGroup(props) {
   );
   const parentRef = (0, import_react34.useRef)(null);
   const isInitialSortRef = (0, import_react34.useRef)(false);
+  const prevOptionsRef = (0, import_react34.useRef)([...options]);
   const filteredOptions = (0, import_react34.useMemo)(() => {
     if (!searchTerm) return sortedOptions;
     return sortedOptions.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()));
@@ -4653,16 +4570,6 @@ function FilterableCheckboxGroup(props) {
         return 36;
     }
   }, [size]);
-  const noOptionsFontSize = (0, import_react34.useMemo)(() => {
-    switch (size) {
-      case "sm":
-        return "14px";
-      case "md":
-        return "16px";
-      case "lg":
-        return "18px";
-    }
-  }, [size]);
   const virtualizer = (0, import_react_virtual3.useVirtualizer)({
     count: filteredOptions.length,
     estimateSize: () => itemSize,
@@ -4672,27 +4579,34 @@ function FilterableCheckboxGroup(props) {
   });
   const items = virtualizer.getVirtualItems();
   (0, import_react34.useEffect)(() => {
-    if (isInitialSortRef.current) return;
-    const initialValue = value ?? [];
-    const sorted = [...options].sort((a, b) => {
-      const aSelected = initialValue.includes(a.value);
-      const bSelected = initialValue.includes(b.value);
-      if (aSelected !== bSelected) {
-        return aSelected ? -1 : 1;
-      }
-      const aIsAlpha = /^[a-zA-Z]/.test(a.label);
-      const bIsAlpha = /^[a-zA-Z]/.test(b.label);
-      if (aIsAlpha !== bIsAlpha) {
-        return aIsAlpha ? -1 : 1;
+    const optionsChanged = prevOptionsRef.current.length !== options.length || prevOptionsRef.current.some(
+      (prevOption, index) => prevOption.value !== options[index]?.value || prevOption.label !== options[index]?.label || prevOption.disabled !== options[index]?.disabled
+    );
+    if (!isInitialSortRef.current || optionsChanged) {
+      const initialValue = value ?? [];
+      const sorted = [...options].sort((a, b) => {
+        const aSelected = initialValue.includes(a.value);
+        const bSelected = initialValue.includes(b.value);
+        if (aSelected !== bSelected) {
+          return aSelected ? -1 : 1;
+        }
+        const aIsAlpha = /^[a-zA-Z]/.test(a.label);
+        const bIsAlpha = /^[a-zA-Z]/.test(b.label);
+        if (aIsAlpha !== bIsAlpha) {
+          return aIsAlpha ? -1 : 1;
+        }
+        return a.label.localeCompare(b.label);
+      });
+      setSortedOptions(sorted);
+      prevOptionsRef.current = [...options];
+      if (!isInitialSortRef.current) {
+        isInitialSortRef.current = true;
       }
-      return a.label.localeCompare(b.label);
-    });
-    setSortedOptions(sorted);
-    isInitialSortRef.current = true;
+    }
   }, [options, value]);
   (0, import_react34.useEffect)(() => {
     virtualizer.measure();
-  }, [virtualizer, filteredOptions]);
+  }, [virtualizer, filteredOptions, size]);
   const handleSearchChange = (0, import_react34.useCallback)((event) => {
     setSearchTerm(event.target.value);
   }, []);
@@ -4738,19 +4652,7 @@ function FilterableCheckboxGroup(props) {
       disabled,
       endDecorator: /* @__PURE__ */ import_react34.default.createElement(import_Search.default, null)
     }
-  ), filteredOptions.length === 0 ? /* @__PURE__ */ import_react34.default.createElement(
-    Stack_default,
-    {
-      sx: (theme) => ({
-        padding: "20px 12px",
-        justifyContent: "center",
-        alignItems: "center",
-        fontSize: noOptionsFontSize,
-        color: theme.palette.neutral.softDisabledColor
-      })
-    },
-    "No options found."
-  ) : /* @__PURE__ */ import_react34.default.createElement(
+  ), filteredOptions.length === 0 ? /* @__PURE__ */ import_react34.default.createElement(Typography_default, { level: `body-${size}`, textColor: "neutral.softDisabledColor", padding: "20px 12px", textAlign: "center" }, "No options found.") : /* @__PURE__ */ import_react34.default.createElement(
     "div",
     {
       ref: parentRef,

package/dist/index.js

@@ -3466,10 +3466,8 @@ TableBody.displayName = "TableBody";
 
 // src/components/Pagination/Pagination.tsx
 import React24, { useCallback as useCallback10, useEffect as useEffect6 } from "react";
-import PreviousIcon from "@mui/icons-material/ChevronLeftRounded";
-import NextIcon from "@mui/icons-material/ChevronRightRounded";
-import FirstPageIcon from "@mui/icons-material/FirstPageRounded";
-import LastPageIcon from "@mui/icons-material/LastPageRounded";
+import PreviousIcon from "@mui/icons-material/ChevronLeft";
+import NextIcon from "@mui/icons-material/ChevronRight";
 import { styled as styled13 } from "@mui/joy";
 var PaginationButton = styled13(Button_default, {
   name: "Pagination",
@@ -3528,7 +3526,6 @@ function Pagination(props) {
     onPageChange,
     rowCount,
     size = "md",
-    variant = "standard",
     ...innerProps
   } = props;
   const [paginationModel, setPaginationModel] = useControlledState(
@@ -3555,87 +3552,6 @@ function Pagination(props) {
       setPaginationModel({ ...paginationModel, page: lastPage });
     }
   }, [rowCount, paginationModel, lastPage, setPaginationModel]);
-  const pageOptions = Array.from({ length: lastPage }, (_, i) => ({
-    label: `${i + 1}`,
-    value: `${i + 1}`
-  }));
-  if (variant === "compact") {
-    return /* @__PURE__ */ React24.createElement(PaginationRoot, { ...innerProps }, /* @__PURE__ */ React24.createElement(PaginationContainer, { direction: "row", size, alignItems: "center" }, /* @__PURE__ */ React24.createElement(Stack_default, { direction: "row" }, /* @__PURE__ */ React24.createElement(
-      PaginationIconButton,
-      {
-        size,
-        variant: "plain",
-        color: "neutral",
-        onClick: () => handlePageChange(firstPage),
-        disabled: paginationModel.page === firstPage,
-        "aria-label": "First page"
-      },
-      /* @__PURE__ */ React24.createElement(FirstPageIcon, null)
-    ), /* @__PURE__ */ React24.createElement(
-      PaginationIconButton,
-      {
-        size,
-        variant: "plain",
-        color: "neutral",
-        onClick: () => handlePageChange(paginationModel.page - 1),
-        disabled: paginationModel.page === firstPage,
-        "aria-label": "Previous page"
-      },
-      /* @__PURE__ */ React24.createElement(PreviousIcon, null)
-    )), /* @__PURE__ */ React24.createElement(
-      Autocomplete_default,
-      {
-        size,
-        value: `${paginationModel.page}`,
-        onChange: (event) => {
-          if (event.target.value) {
-            handlePageChange(parseInt(event.target.value, 10));
-          }
-        },
-        options: pageOptions,
-        sx: {
-          width: {
-            sm: "80px",
-            md: "100px",
-            lg: "120px"
-          }[size]
-        }
-      }
-    ), /* @__PURE__ */ React24.createElement(
-      Typography_default,
-      {
-        level: `body-${size}`,
-        sx: (theme) => ({
-          color: theme.palette.text.secondary,
-          fontWeight: 500
-        })
-      },
-      "/ ",
-      lastPage
-    ), /* @__PURE__ */ React24.createElement(Stack_default, { direction: "row" }, /* @__PURE__ */ React24.createElement(
-      PaginationIconButton,
-      {
-        size,
-        variant: "plain",
-        color: "neutral",
-        onClick: () => handlePageChange(paginationModel.page + 1),
-        disabled: paginationModel.page === lastPage,
-        "aria-label": "Next page"
-      },
-      /* @__PURE__ */ React24.createElement(NextIcon, null)
-    ), /* @__PURE__ */ React24.createElement(
-      PaginationIconButton,
-      {
-        size,
-        variant: "plain",
-        color: "neutral",
-        onClick: () => handlePageChange(lastPage),
-        disabled: paginationModel.page === lastPage,
-        "aria-label": "Last page"
-      },
-      /* @__PURE__ */ React24.createElement(LastPageIcon, null)
-    ))));
-  }
   return /* @__PURE__ */ React24.createElement(PaginationRoot, { ...innerProps }, /* @__PURE__ */ React24.createElement(PaginationContainer, { direction: "row", size, alignItems: "center" }, /* @__PURE__ */ React24.createElement(
     PaginationIconButton,
     {
@@ -3657,7 +3573,7 @@ function Pagination(props) {
       "aria-label": "More previous pages"
     },
     "..."
-  ), beforePages.map((p) => /* @__PURE__ */ React24.createElement(PaginationButton, { key: p, size, variant: "plain", color: "neutral", onClick: () => handlePageChange(p) }, p)), /* @__PURE__ */ React24.createElement(PaginationButton, { active: "true", size, "aria-current": "page" }, paginationModel.page), afterPages.map((p) => /* @__PURE__ */ React24.createElement(PaginationButton, { key: p, size, variant: "plain", color: "neutral", onClick: () => handlePageChange(p) }, p)), isMoreAfterPages && /* @__PURE__ */ React24.createElement(
+  ), beforePages.map((p) => /* @__PURE__ */ React24.createElement(PaginationButton, { key: p, size, variant: "plain", color: "neutral", onClick: () => handlePageChange(p) }, p)), /* @__PURE__ */ React24.createElement(PaginationButton, { active: "active", size, "aria-current": "page" }, paginationModel.page), afterPages.map((p) => /* @__PURE__ */ React24.createElement(PaginationButton, { key: p, size, variant: "plain", color: "neutral", onClick: () => handlePageChange(p) }, p)), isMoreAfterPages && /* @__PURE__ */ React24.createElement(
     PaginationButton,
     {
       size,
@@ -4583,6 +4499,7 @@ function FilterableCheckboxGroup(props) {
   );
   const parentRef = useRef8(null);
   const isInitialSortRef = useRef8(false);
+  const prevOptionsRef = useRef8([...options]);
   const filteredOptions = useMemo12(() => {
     if (!searchTerm) return sortedOptions;
     return sortedOptions.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()));
@@ -4597,16 +4514,6 @@ function FilterableCheckboxGroup(props) {
         return 36;
     }
   }, [size]);
-  const noOptionsFontSize = useMemo12(() => {
-    switch (size) {
-      case "sm":
-        return "14px";
-      case "md":
-        return "16px";
-      case "lg":
-        return "18px";
-    }
-  }, [size]);
   const virtualizer = useVirtualizer3({
     count: filteredOptions.length,
     estimateSize: () => itemSize,
@@ -4616,27 +4523,34 @@ function FilterableCheckboxGroup(props) {
   });
   const items = virtualizer.getVirtualItems();
   useEffect8(() => {
-    if (isInitialSortRef.current) return;
-    const initialValue = value ?? [];
-    const sorted = [...options].sort((a, b) => {
-      const aSelected = initialValue.includes(a.value);
-      const bSelected = initialValue.includes(b.value);
-      if (aSelected !== bSelected) {
-        return aSelected ? -1 : 1;
-      }
-      const aIsAlpha = /^[a-zA-Z]/.test(a.label);
-      const bIsAlpha = /^[a-zA-Z]/.test(b.label);
-      if (aIsAlpha !== bIsAlpha) {
-        return aIsAlpha ? -1 : 1;
+    const optionsChanged = prevOptionsRef.current.length !== options.length || prevOptionsRef.current.some(
+      (prevOption, index) => prevOption.value !== options[index]?.value || prevOption.label !== options[index]?.label || prevOption.disabled !== options[index]?.disabled
+    );
+    if (!isInitialSortRef.current || optionsChanged) {
+      const initialValue = value ?? [];
+      const sorted = [...options].sort((a, b) => {
+        const aSelected = initialValue.includes(a.value);
+        const bSelected = initialValue.includes(b.value);
+        if (aSelected !== bSelected) {
+          return aSelected ? -1 : 1;
+        }
+        const aIsAlpha = /^[a-zA-Z]/.test(a.label);
+        const bIsAlpha = /^[a-zA-Z]/.test(b.label);
+        if (aIsAlpha !== bIsAlpha) {
+          return aIsAlpha ? -1 : 1;
+        }
+        return a.label.localeCompare(b.label);
+      });
+      setSortedOptions(sorted);
+      prevOptionsRef.current = [...options];
+      if (!isInitialSortRef.current) {
+        isInitialSortRef.current = true;
       }
-      return a.label.localeCompare(b.label);
-    });
-    setSortedOptions(sorted);
-    isInitialSortRef.current = true;
+    }
   }, [options, value]);
   useEffect8(() => {
     virtualizer.measure();
-  }, [virtualizer, filteredOptions]);
+  }, [virtualizer, filteredOptions, size]);
   const handleSearchChange = useCallback13((event) => {
     setSearchTerm(event.target.value);
   }, []);
@@ -4682,19 +4596,7 @@ function FilterableCheckboxGroup(props) {
       disabled,
       endDecorator: /* @__PURE__ */ React31.createElement(SearchIcon, null)
     }
-  ), filteredOptions.length === 0 ? /* @__PURE__ */ React31.createElement(
-    Stack_default,
-    {
-      sx: (theme) => ({
-        padding: "20px 12px",
-        justifyContent: "center",
-        alignItems: "center",
-        fontSize: noOptionsFontSize,
-        color: theme.palette.neutral.softDisabledColor
-      })
-    },
-    "No options found."
-  ) : /* @__PURE__ */ React31.createElement(
+  ), filteredOptions.length === 0 ? /* @__PURE__ */ React31.createElement(Typography_default, { level: `body-${size}`, textColor: "neutral.softDisabledColor", padding: "20px 12px", textAlign: "center" }, "No options found.") : /* @__PURE__ */ React31.createElement(
     "div",
     {
       ref: parentRef,