@atlaskit/primitives 12.2.7 → 13.0.0

package/dist/types-ts4.5/compiled/responsive/media-helper.d.ts

@@ -0,0 +1,35 @@
+/**
+ * This is an object of usable media query helpers using our internal breakpoints configuration.
+ *
+ * When using Compiled CSS-in-JS, please ensure that only a single declaration can take effect at a time.
+ * This means that you should avoid multiple breakpoints taking effect at the same time,
+ * eg. ```{ [media.above.xs]: { color: 'red' }, [media.above.sm]: { color: 'green' }}```.
+ * Instead, make sure that only one breakpoint can take effect at a time,
+ * e.g, ```{ [media.only.xs]: { color: 'red' }, [media.above.sm]: { color: 'green' }}```.
+ * For more details, please see <https://compiledcssinjs.com/docs/atomic-css#selector-specificity>.
+ */
+export declare const media: {
+    above: {
+        readonly xxs: "@media all";
+        readonly xs: "@media (min-width: 30rem)";
+        readonly sm: "@media (min-width: 48rem)";
+        readonly md: "@media (min-width: 64rem)";
+        readonly lg: "@media (min-width: 90rem)";
+        readonly xl: "@media (min-width: 110.5rem)";
+    };
+    only: {
+        readonly xxs: "@media (min-width: 0rem) and (max-width: 29.99rem)";
+        readonly xs: "@media (min-width: 30rem) and (max-width: 47.99rem)";
+        readonly sm: "@media (min-width: 48rem) and (max-width: 63.99rem)";
+        readonly md: "@media (min-width: 64rem) and (max-width: 89.99rem)";
+        readonly lg: "@media (min-width: 90rem) and (max-width: 110.49rem)";
+        readonly xl: "@media (min-width: 110.5rem)";
+    };
+    below: {
+        readonly xs: "@media not all and (min-width: 30rem)";
+        readonly sm: "@media not all and (min-width: 48rem)";
+        readonly md: "@media not all and (min-width: 64rem)";
+        readonly lg: "@media not all and (min-width: 90rem)";
+        readonly xl: "@media not all and (min-width: 110.5rem)";
+    };
+};

package/dist/types-ts4.5/compiled/responsive/show.d.ts

@@ -0,0 +1,39 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+import { type BasePrimitiveProps } from '../components/types';
+import type { Breakpoint, ComponentAs } from './types';
+type ResponsiveShowProps = {
+    as?: ComponentAs;
+    children: ReactNode;
+} & ({
+    above?: never;
+    /**
+     * Apply CSS to show this specifically **below** this breakpoint.
+     * The smallest breakpoint is not included as it would never be shown and this would not be performant.
+     *
+     * @important do not mix `above` and `below` (TypeScript should prevent this).
+     */
+    below: Exclude<Breakpoint, 'xxs'>;
+} | {
+    /**
+     * Apply CSS to show this specifically **above** this breakpoint.
+     * The smallest breakpoint is not included as it would always be shown and this would not be performant.
+     *
+     * @important do not mix `above` and `below` (TypeScript should prevent this).
+     */
+    above: Exclude<Breakpoint, 'xxs'>;
+    below?: never;
+}) & Pick<BasePrimitiveProps, 'xcss'>;
+/**
+ * Shows the content at a given breakpoint.  By default, content is hidden.  The primary use case is for visual presentation.
+ * Mix `<Show above="md">` with `<Hide above="md">` to achieve content that shifts at a breakpoint.
+ *
+ * Please note:
+ * - This only uses `display: none` and `display: revert` to show/hide, it does not skip rendering of children trees.
+ * - As this is rendered at all times, there is little performance savings here (just that this is not painted).
+ */
+export declare const Show: ({ above, below, children, as: AsElement, xcss, }: ResponsiveShowProps) => JSX.Element;
+export {};

package/dist/types-ts4.5/compiled/responsive/types.d.ts

@@ -0,0 +1,10 @@
+import { type media } from './media-helper';
+/**
+ * The breakpoints we have for responsiveness.
+ */
+export type Breakpoint = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * All supported media queries for use as keys, eg. in `css({ [media.above.md]: { … } })`.
+ */
+export type MediaQuery = (typeof media.above)[Breakpoint];
+export type ComponentAs = 'article' | 'aside' | 'dialog' | 'div' | 'footer' | 'header' | 'li' | 'main' | 'nav' | 'ol' | 'section' | 'span' | 'ul';

package/dist/types-ts4.5/compiled/responsive/use-media-query.d.ts

@@ -0,0 +1,23 @@
+import { media } from './media-helper';
+type NestedQueryString = `above.${keyof typeof media.above}` | `below.${keyof typeof media.below}`;
+/**
+ * A hook which returnes a `window.matchMedia` result to help you build responsively around breakpoints in JavaScript.
+ *
+ * The returning value **WILL NOT** update or react to change.  You can use `mq.matches` to get the latest version and you can use the optional listener argument to react to changes as desired.
+ *
+ * @important
+ *  - This will always be `null` in SSR and the event listener should not fire on SSR => clientside hydration.
+ *  - `above.xxs` will always be truthy, your listener should never fire.
+ *
+ * @experimental This hook only works on the client-side and is not safe in an SSR environment as `window` is unavailable (and the user's viewport would be unknown)
+ *
+ * @example
+ * const mq = useMediaQuery('below.md', useCallback((event) => console.log('changed', event.matches)), []))
+ * const isMobile = mq?.matches;
+ *
+ * @returns
+ *  - `MediaQueryList`, primarily used to get if that media query is currently
+ *  - `null` when `matchMedia` is unavailable, eg. in SSR.
+ */
+export declare const UNSAFE_useMediaQuery: (queryString: NestedQueryString, listener?: ((event: MediaQueryListEvent) => void) | undefined) => MediaQueryList | null;
+export {};

package/dist/types-ts4.5/index.d.ts

@@ -29,5 +29,5 @@ export type {
 AnchorProps as UNSAFE_AnchorProps, AnchorProps, } from './components/anchor';
 export { media, UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './responsive';
 export type { Breakpoint, MediaQuery } from './responsive';
-export { useSurface as UNSAFE_useSurface, SurfaceContext as UNSAFE_SurfaceContext, } from './components/internal/surface-provider';
+export { useSurface as UNSAFE_useSurface } from './components/internal/surface-provider';
 export { inverseColorMap as UNSAFE_inverseColorMap } from './xcss/style-maps.partial';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "12.2.7",
+	"version": "13.0.0",
 	"description": "Primitives are token-backed low-level building blocks.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -120,6 +120,7 @@
 		"@atlaskit/tokens": "^2.0.0",
 		"@atlaskit/visually-hidden": "^1.5.0",
 		"@babel/runtime": "^7.0.0",
+		"@compiled/react": "^0.18.1",
 		"@emotion/react": "^11.7.1",
 		"@emotion/serialize": "^1.1.0",
 		"bind-event-listener": "^3.0.0",
@@ -186,6 +187,7 @@
 		"./text": "./src/components/text.tsx",
 		"./pressable": "./src/components/pressable.tsx",
 		"./anchor": "./src/components/anchor.tsx",
-		"./responsive": "./src/responsive/index.tsx"
+		"./responsive": "./src/responsive/index.tsx",
+		"./compiled": "./src/compiled/index.tsx"
 	}
 }