@pantheon-systems/pds-toolkit-react 2.0.0-alpha.45 → 2.0.0-alpha.46

package/dist/index.source.d.ts

@@ -126,6 +126,7 @@ export * from './utilities/grid/GridItem';
 export * from './utilities/hooks/useBreakpoint/useBreakpoint';
 export * from './utilities/hooks/useClipboard/useClipboard';
 export * from './utilities/hooks/useDropdown';
+export * from './utilities/hooks/useIsMobile/useIsMobile';
 export * from './utilities/hooks/useKeyPress/useKeyPress';
 export * from './utilities/hooks/useMediaQuery/useMediaQuery';
 export * from './utilities/hooks/useWindowWidth/useWindowWidth';

package/dist/utilities/hooks/useIsMobile/useIsMobile.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Returns whether the layout is currently in its mobile presentation, tracking
+ * the `data-pds-mobile` attribute that `GlobalWrapper` sets on the document
+ * root. Reactive: updates when the breakpoint is crossed.
+ *
+ * Use this to render only the active responsive variant of a component, rather
+ * than mounting both a mobile and a desktop tree and toggling them with CSS —
+ * mounting both duplicates any ids in the slotted content (invalid HTML) and
+ * makes `getElementById`/`htmlFor`/`aria-controls` resolve to the hidden copy.
+ *
+ * SSR-safe: resolves to `false` (desktop) on the server and on the first client
+ * render, then updates after `GlobalWrapper` applies the attribute.
+ *
+ * @returns {boolean} `true` when the mobile presentation is active.
+ */
+export declare const useIsMobile: () => boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@pantheon-systems/pds-toolkit-react",
 	"technology": "React",
-	"version": "2.0.0-alpha.45",
+	"version": "2.0.0-alpha.46",
 	"description": "PDS toolkit built using the React framework",
 	"publishConfig": {
 		"access": "public",