@ceed/cds 0.0.84 → 0.0.86

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export { boxClasses, buttonClasses, checkboxClasses, dividerClasses, iconButtonClasses, inputClasses, menuClasses, menuButtonClasses, menuItemClasses, optionClasses, radioClasses, radioGroupClasses, selectClasses, switchClasses, tableClasses, textareaClasses, typographyClasses, formControlClasses, formLabelClasses, formHelperTextClasses, gridClasses, stackClasses, sheetClasses, modalClasses, modalCloseClasses, modalDialogClasses, modalOverflowClasses, dialogTitleClasses, dialogContentClasses, dialogActionsClasses, tooltipClasses, tabsClasses, tabListClasses, tabPanelClasses, accordionClasses, accordionDetailsClasses, accordionGroupClasses as accordionsClasses, accordionSummaryClasses, AutocompleteListbox, AutocompleteOption, autocompleteClasses, autocompleteListboxClasses, autocompleteOptionClasses, Avatar, avatarClasses, AvatarGroup, avatarGroupClasses, AspectRatio, aspectRatioClasses, Badge, badgeClasses, breadcrumbsClasses, Card, cardClasses, CardActions, cardActionsClasses, CardContent, cardContentClasses, CardCover, cardCoverClasses, CardOverflow, cardOverflowClasses, Chip, chipClasses, CircularProgress, circularProgressClasses, Drawer, drawerClasses, LinearProgress, linearProgressClasses, List, listClasses, ListDivider, listDividerClasses, ListItem, listItemClasses, ListItemButton, listItemButtonClasses, ListItemContent, listItemContentClasses, ListItemDecorator, listItemDecoratorClasses, ListSubheader, listSubheaderClasses, Link, linkClasses, Slider, sliderClasses, Step, stepClasses, StepButton, stepButtonClasses, StepIndicator, Stepper, stepperClasses, Skeleton, skeletonClasses, } from "@mui/joy";
+export { useTheme, useColorScheme, useThemeProps, boxClasses, buttonClasses, checkboxClasses, dividerClasses, iconButtonClasses, inputClasses, menuClasses, menuButtonClasses, menuItemClasses, optionClasses, radioClasses, radioGroupClasses, selectClasses, switchClasses, tableClasses, textareaClasses, typographyClasses, formControlClasses, formLabelClasses, formHelperTextClasses, gridClasses, stackClasses, sheetClasses, modalClasses, modalCloseClasses, modalDialogClasses, modalOverflowClasses, dialogTitleClasses, dialogContentClasses, dialogActionsClasses, tooltipClasses, tabsClasses, tabListClasses, tabPanelClasses, accordionClasses, accordionDetailsClasses, accordionGroupClasses as accordionsClasses, accordionSummaryClasses, AutocompleteListbox, AutocompleteOption, autocompleteClasses, autocompleteListboxClasses, autocompleteOptionClasses, Avatar, avatarClasses, AvatarGroup, avatarGroupClasses, AspectRatio, aspectRatioClasses, Badge, badgeClasses, breadcrumbsClasses, Card, cardClasses, CardActions, cardActionsClasses, CardContent, cardContentClasses, CardCover, cardCoverClasses, CardOverflow, cardOverflowClasses, Chip, chipClasses, CircularProgress, circularProgressClasses, Drawer, drawerClasses, LinearProgress, linearProgressClasses, List, listClasses, ListDivider, listDividerClasses, ListItem, listItemClasses, ListItemButton, listItemButtonClasses, ListItemContent, listItemContentClasses, ListItemDecorator, listItemDecoratorClasses, ListSubheader, listSubheaderClasses, Link, linkClasses, Slider, sliderClasses, Step, stepClasses, StepButton, stepButtonClasses, StepIndicator, Stepper, stepperClasses, Skeleton, skeletonClasses, } from "@mui/joy";
 export { Autocomplete, Accordion, Accordions, AccordionDetails, AccordionSummary, Box, Breadcrumbs, Button, Calendar, Checkbox, Container, DataTable, DatePicker, DateRangePicker, DialogActions, DialogContent, DialogTitle, DialogFrame, Divider, Dropdown, InsetDrawer, FormControl, FormHelperText, FormLabel, Grid, IconButton, Input, Menu, MenuButton, MenuItem, Modal, ModalClose, ModalDialog, ModalOverflow, ModalFrame, MonthRangePicker, Radio, RadioGroup, RadioList, Select, Option, Sheet, Stack, Switch, Table, TableHead, TableBody, Tabs, Tab, TabList, TabPanel, Textarea, ThemeProvider, Tooltip, Typography, } from "./components";

package/dist/index.js

@@ -1,5 +1,8 @@
 // src/index.ts
 import {
+  useTheme,
+  useColorScheme,
+  useThemeProps as useThemeProps2,
   boxClasses,
   buttonClasses,
   checkboxClasses as checkboxClasses2,
@@ -2838,5 +2841,8 @@ export {
   tabsClasses,
   textareaClasses,
   tooltipClasses,
-  typographyClasses
+  typographyClasses,
+  useColorScheme,
+  useTheme,
+  useThemeProps2 as useThemeProps
 };

package/framer/index.js

@@ -5728,7 +5728,6 @@ var require_createStyled = __commonJS({
 import { ControlType as ControlType28 } from "framer";
 import React184, {
   useEffect as useEffect37,
-  useMemo as useMemo38,
   useState as useState29
 } from "react";
 
@@ -44495,51 +44494,55 @@ var withCommonControls = (Component) => {
     }, []);
   };
 };
-var useMediaQuery = (fn2) => {
-  const theme = useTheme5();
-  const mediaQuery = useMemo38(() => fn2(theme), [fn2, theme]);
-  const [matches, setMatches] = useState29(
-    () => window.matchMedia(mediaQuery).matches
-  );
+var useElementResizeEffect = (element, callback) => {
   useEffect37(() => {
-    const handleResize = () => {
-      const matches2 = window.matchMedia(mediaQuery).matches;
-      setMatches(matches2);
-    };
-    window.addEventListener("resize", handleResize);
-    handleResize();
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [mediaQuery]);
+    const observer = new ResizeObserver(callback);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [element]);
+};
+var useResponsive = (breakpoint, rootElement) => {
+  const theme = useTheme5();
+  const point = theme.breakpoints.values[breakpoint];
+  const [matches, setMatches] = useState29(false);
+  useElementResizeEffect(rootElement, () => {
+    setMatches(rootElement.offsetWidth >= point);
+  });
   return matches;
 };
 var ResponsiveEmitter = (props) => {
   const { children, onSmChange, onMdChange, onLgChange, onXlChange } = props;
-  const isSm = useMediaQuery((theme) => theme.breakpoints.up("sm"));
-  const isMd = useMediaQuery((theme) => theme.breakpoints.up("md"));
-  const isLg = useMediaQuery((theme) => theme.breakpoints.up("lg"));
-  const isXl = useMediaQuery((theme) => theme.breakpoints.up("xl"));
-  useEffect37(() => {
-    if (isSm && onSmChange) {
-      onSmChange();
-    }
-  }, [isSm, onSmChange]);
-  useEffect37(() => {
-    if (isMd && onMdChange) {
-      onMdChange();
-    }
-  }, [isMd, onMdChange]);
-  useEffect37(() => {
-    if (isLg && onLgChange) {
-      onLgChange();
-    }
-  }, [isLg, onLgChange]);
+  const isSm = useResponsive(
+    "sm",
+    document.querySelector("#canvas-container .groundNodeWrapper") || document.body
+  );
+  const isMd = useResponsive(
+    "md",
+    document.querySelector("#canvas-container .groundNodeWrapper") || document.body
+  );
+  const isLg = useResponsive(
+    "lg",
+    document.querySelector("#canvas-container .groundNodeWrapper") || document.body
+  );
+  const isXl = useResponsive(
+    "xl",
+    document.querySelector("#canvas-container .groundNodeWrapper") || document.body
+  );
   useEffect37(() => {
     if (isXl && onXlChange) {
       onXlChange();
+      return;
+    } else if (isLg && onLgChange) {
+      onLgChange();
+      return;
+    } else if (isMd && onMdChange) {
+      onMdChange();
+      return;
+    } else if (isSm && onSmChange) {
+      onSmChange();
+      return;
     }
-  }, [isXl, onXlChange]);
+  }, [isSm, isMd, isLg, isXl, onSmChange, onMdChange, onLgChange, onXlChange]);
   return children;
 };
 var responsiveEmitterPropertyControls = {
@@ -44743,6 +44746,9 @@ export {
   tooltipClasses_default as tooltipClasses,
   typographyClasses_default as typographyClasses,
   typographyPropertyControls,
+  useColorScheme,
+  useTheme5 as useTheme,
+  useThemeProps2 as useThemeProps,
   withCommonControls
 };
 /*! Bundled license information:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ceed/cds",
-  "version": "0.0.84",
+  "version": "0.0.86",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",