@atlaskit/primitives 0.2.2 → 0.3.1

package/dist/es2019/helpers/responsive/constants.js

@@ -0,0 +1,74 @@
+/**
+ * Our internal configuration for breakpoints configuration.
+ *
+ * @experimental Unsafe for consumption outside of the design system itself.
+ */
+export const UNSAFE_BREAKPOINTS_CONFIG = {
+  // mobile
+  xxs: {
+    gridItemGutter: "var(--ds-space-200, 16px)",
+    gridMargin: "var(--ds-space-200, 16px)",
+    min: 0,
+    max: 479
+  },
+  // phablet
+  xs: {
+    gridItemGutter: "var(--ds-space-200, 16px)",
+    gridMargin: "var(--ds-space-200, 16px)",
+    min: 480,
+    max: 767
+  },
+  // tablet
+  sm: {
+    gridItemGutter: "var(--ds-space-200, 16px)",
+    gridMargin: "var(--ds-space-300, 24px)",
+    min: 768,
+    max: 1023
+  },
+  // laptop desktop
+  md: {
+    gridItemGutter: "var(--ds-space-300, 24px)",
+    gridMargin: "var(--ds-space-400, 32px)",
+    min: 1024,
+    max: 1439
+  },
+  // monitor
+  lg: {
+    gridItemGutter: "var(--ds-space-400, 32px)",
+    gridMargin: "var(--ds-space-400, 32px)",
+    min: 1440,
+    max: 1767
+  },
+  // large high res
+  xl: {
+    gridItemGutter: "var(--ds-space-400, 32px)",
+    gridMargin: "var(--ds-space-500, 40px)",
+    min: 1768,
+    max: 2159
+  },
+  // extra large high res
+  xxl: {
+    gridItemGutter: "var(--ds-space-500, 40px)",
+    gridMargin: "var(--ds-space-500, 40px)",
+    min: 2160,
+    max: Number.MAX_SAFE_INTEGER
+  }
+};
+
+/**
+ * The list of breakpoints in order from smallest to largest.  You may need to clone and reverse this list if you want the opposite.
+ *
+ * This is intentional for cascading with `min-width` or `media.above`. Media queries go from lowest width to highest.
+ *
+ * @experimental Unsafe for consumption outside of the design system itself.
+ */
+export const UNSAFE_BREAKPOINTS_ORDERED_LIST = Object.keys(UNSAFE_BREAKPOINTS_CONFIG).sort((a, b) => UNSAFE_BREAKPOINTS_CONFIG[a].min - UNSAFE_BREAKPOINTS_CONFIG[b].min);
+
+/**
+ * This is our smallest breakpoint with a few nuances to it:
+ * 1. It is the default value for shorthands, eg. `<GridItem span={6} />` maps to `{ [SMALLEST_BREAKPOINT]: props.span }`
+ * 2. It's omitted in `media.below` as there's nothing below `0px`.
+ *
+ * @experimental There's a chance this will change in _value_, but should only be used in a way that it will not matter if this value changes.
+ */
+export const SMALLEST_BREAKPOINT = UNSAFE_BREAKPOINTS_ORDERED_LIST[0];

package/dist/es2019/helpers/responsive/index.js

@@ -0,0 +1,3 @@
+export { UNSAFE_media } from './media-helper';
+export { UNSAFE_buildAboveMediaQueryCSS, UNSAFE_buildBelowMediaQueryCSS } from './build-media-query-css';
+export { UNSAFE_BREAKPOINTS_ORDERED_LIST, UNSAFE_BREAKPOINTS_CONFIG } from './constants';

package/dist/es2019/helpers/responsive/media-helper.js

@@ -0,0 +1,78 @@
+import { UNSAFE_BREAKPOINTS_CONFIG } from './constants';
+
+/**
+ * To ensure min-width and max-width do both target at the same time, we subtract a value.
+ * We use a fractional value here as used in other libraries and described in @link https://www.w3.org/TR/mediaqueries-4/#mq-min-max: "…possibility of fractional viewport sizes which can occur as a result of non-integer pixel densities…"
+ */
+const BELOW_PRECISION = 0.02;
+
+/**
+ * This is the full internal version.  The import has been separated to only expose as-needed.
+ */
+const internalMedia = {
+  /**
+   * A media query to target viewports above the min width of a given breakpoint.
+   * Note that `media.above.xs` is redundant and should not be used, but it's included for programatic purposes.
+   */
+  above: {
+    /**
+     * `above.xxs` is redundant and no media query should be used, but it's included for programatic purposes…
+     *
+     * Eg. this is `@media (min-width: 0px)`
+     */
+    xxs: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xxs.min}px)`,
+    xs: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xs.min}px)`,
+    sm: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.sm.min}px)`,
+    md: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.md.min}px)`,
+    lg: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.lg.min}px)`,
+    xl: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xl.min}px)`,
+    xxl: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xxl.min}px)`
+  },
+  below: {
+    /**
+     * A media query to target viewports below the min width of a given breakpoint.
+     * Note that `media.below.xxs` is intentionally omitted as this would be `@media (max-width: 0px)`
+     */
+    xs: `@media (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.xs.min - BELOW_PRECISION}px)`,
+    sm: `@media (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.sm.min - BELOW_PRECISION}px)`,
+    md: `@media (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.md.min - BELOW_PRECISION}px)`,
+    lg: `@media (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.lg.min - BELOW_PRECISION}px)`,
+    xl: `@media (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.xl.min - BELOW_PRECISION}px)`,
+    xxl: `@media (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.xxl.min - BELOW_PRECISION}px)`
+  },
+  /**
+   * A media query to target viewports exactly between the min and max of a given breakpoint.
+   */
+  only: {
+    xxs: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xxs.min}px) and (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.xxs.max}px)`,
+    xs: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xs.min}px) and (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.xs.max}px)`,
+    sm: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.sm.min}px) and (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.sm.max}px)`,
+    md: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.md.min}px) and (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.md.max}px)`,
+    lg: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.lg.min}px) and (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.lg.max}px)`,
+    xl: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xl.min}px) and (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.xl.max}px)`,
+    xxl: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xxl.min}px) and (max-width: ${UNSAFE_BREAKPOINTS_CONFIG.xxl.max}px)`
+  }
+};
+
+/**
+ * This is an object of usable media query helpers using our internal breakpoints configuration.
+ *
+ * @experimental Unsafe for usage as the API is not finalized.
+ */
+export const UNSAFE_media = {
+  above: internalMedia.above,
+  below: internalMedia.below
+};
+
+/**
+ * With these types:
+ * ```
+ * type MediaQuery = `@media (${string})`;
+ * type ResponsiveMediaObject = Record<Breakpoint, MediaQuery>;
+ * ```
+ *
+ * TODO: This `media` object as of typescript@4.9, would benefit from satisfies, eg.:
+ * ```
+ * const UNSAFE_media = { … } satisfies Record<'above' | 'only', ResponsiveMediaObject> & { below: Omit<ResponsiveMediaObject, 'xxs'> }
+ * ```
+ */

package/dist/es2019/helpers/responsive/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "0.2.2",
+	"version": "0.3.1",
 	"sideEffects": false
 }

package/dist/esm/components/internal/base-box.partial.js

@@ -8,16 +8,16 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import invariant from 'tiny-invariant';
-import { BREAKPOINTS_CONFIG, BREAKPOINTS_LIST, LAYERS } from '../../constants';
+import { LAYERS } from '../../constants';
+import { UNSAFE_buildAboveMediaQueryCSS } from '../../helpers/responsive';
 import { BOX_RESPONSIVE_PROPS } from './types';
 import { isResponsiveStyleProp, isStaticStyleProp } from './utils';
 var responsiveRules = BOX_RESPONSIVE_PROPS.reduce(function (mapping, cssProperty) {
-  return Object.assign(mapping, _defineProperty({}, cssProperty, BREAKPOINTS_LIST.reduce(function (configs, breakpoint) {
-    var config = BREAKPOINTS_CONFIG[breakpoint];
-    return Object.assign(configs, _defineProperty({}, breakpoint, css(_defineProperty({}, "@media (min-width: ".concat(config.min, "px)"), _defineProperty({}, cssProperty, "var(--ds-box-responsive-".concat(cssProperty, "-").concat(breakpoint, ")"))))));
-  }, {
+  return Object.assign(mapping, _defineProperty({}, cssProperty, _objectSpread({
     static: css(_defineProperty({}, cssProperty, "var(--ds-box-static-".concat(cssProperty, ")")))
-  })));
+  }, UNSAFE_buildAboveMediaQueryCSS(function (breakpoint) {
+    return _defineProperty({}, cssProperty, "var(--ds-box-responsive-".concat(cssProperty, "-").concat(breakpoint, ")"));
+  }))));
 }, {});
 var getResponsiveVars = function getResponsiveVars(propertyName, propertyValue, mapping) {
   if (isResponsiveStyleProp(propertyValue)) {
@@ -31,8 +31,8 @@ var getResponsiveVars = function getResponsiveVars(propertyName, propertyValue,
 var getResponsiveStyles = function getResponsiveStyles(propertyName, propertyValue) {
   invariant(typeof responsiveRules[propertyName] !== 'undefined', "Responsive rules for \"".concat(propertyName, "\" have not been statically defined."));
   if (isResponsiveStyleProp(propertyValue)) {
-    return Object.keys(propertyValue).map(function (responsiveProp) {
-      return responsiveRules[propertyName][responsiveProp];
+    return Object.keys(propertyValue).map(function (breakpoint) {
+      return responsiveRules[propertyName][breakpoint];
     });
   } else if (isStaticStyleProp(propertyValue)) {
     return responsiveRules[propertyName].static;
@@ -49,41 +49,41 @@ var getResponsiveStyles = function getResponsiveStyles(propertyName, propertyVal
  *
  * @internal
  */
-export var BaseBox = /*#__PURE__*/forwardRef(function (_ref2, ref) {
-  var as = _ref2.as,
-    className = _ref2.className,
-    children = _ref2.children,
-    color = _ref2.color,
-    backgroundColor = _ref2.backgroundColor,
-    shadow = _ref2.shadow,
-    borderStyle = _ref2.borderStyle,
-    borderWidth = _ref2.borderWidth,
-    borderRadius = _ref2.borderRadius,
-    borderColor = _ref2.borderColor,
-    layer = _ref2.layer,
-    flex = _ref2.flex,
-    flexGrow = _ref2.flexGrow,
-    flexShrink = _ref2.flexShrink,
-    alignSelf = _ref2.alignSelf,
-    overflow = _ref2.overflow,
-    overflowInline = _ref2.overflowInline,
-    overflowBlock = _ref2.overflowBlock,
-    padding = _ref2.padding,
-    paddingBlock = _ref2.paddingBlock,
-    paddingBlockStart = _ref2.paddingBlockStart,
-    paddingBlockEnd = _ref2.paddingBlockEnd,
-    paddingInline = _ref2.paddingInline,
-    paddingInlineStart = _ref2.paddingInlineStart,
-    paddingInlineEnd = _ref2.paddingInlineEnd,
-    height = _ref2.height,
-    width = _ref2.width,
-    _ref2$display = _ref2.display,
-    display = _ref2$display === void 0 ? displayMap.block : _ref2$display,
-    _ref2$position = _ref2.position,
-    position = _ref2$position === void 0 ? 'static' : _ref2$position,
-    UNSAFE_style = _ref2.UNSAFE_style,
-    testId = _ref2.testId,
-    htmlAttributes = _objectWithoutProperties(_ref2, _excluded);
+export var BaseBox = /*#__PURE__*/forwardRef(function (_ref3, ref) {
+  var as = _ref3.as,
+    className = _ref3.className,
+    children = _ref3.children,
+    color = _ref3.color,
+    backgroundColor = _ref3.backgroundColor,
+    shadow = _ref3.shadow,
+    borderStyle = _ref3.borderStyle,
+    borderWidth = _ref3.borderWidth,
+    borderRadius = _ref3.borderRadius,
+    borderColor = _ref3.borderColor,
+    layer = _ref3.layer,
+    flex = _ref3.flex,
+    flexGrow = _ref3.flexGrow,
+    flexShrink = _ref3.flexShrink,
+    alignSelf = _ref3.alignSelf,
+    overflow = _ref3.overflow,
+    overflowInline = _ref3.overflowInline,
+    overflowBlock = _ref3.overflowBlock,
+    padding = _ref3.padding,
+    paddingBlock = _ref3.paddingBlock,
+    paddingBlockStart = _ref3.paddingBlockStart,
+    paddingBlockEnd = _ref3.paddingBlockEnd,
+    paddingInline = _ref3.paddingInline,
+    paddingInlineStart = _ref3.paddingInlineStart,
+    paddingInlineEnd = _ref3.paddingInlineEnd,
+    height = _ref3.height,
+    width = _ref3.width,
+    _ref3$display = _ref3.display,
+    display = _ref3$display === void 0 ? displayMap.block : _ref3$display,
+    _ref3$position = _ref3.position,
+    position = _ref3$position === void 0 ? 'static' : _ref3$position,
+    UNSAFE_style = _ref3.UNSAFE_style,
+    testId = _ref3.testId,
+    htmlAttributes = _objectWithoutProperties(_ref3, _excluded);
   var Component = as || 'div';
   var inlineStyles = Object.assign({}, UNSAFE_style, getResponsiveVars('borderWidth', borderWidth, borderWidthMap), getResponsiveVars('display', display, displayMap), getResponsiveVars('padding', padding, paddingMap), getResponsiveVars('paddingBlock', paddingBlock, paddingMap), getResponsiveVars('paddingBlockStart', paddingBlockStart, paddingMap), getResponsiveVars('paddingBlockEnd', paddingBlockEnd, paddingMap), getResponsiveVars('paddingInline', paddingInline, paddingMap), getResponsiveVars('paddingInlineStart', paddingInlineStart, paddingMap), getResponsiveVars('paddingInlineEnd', paddingInlineEnd, paddingMap));
   var node = jsx(Component, _extends({

package/dist/esm/constants.js

@@ -1,4 +1,3 @@
-import { UNSAFE_Breakpoint as Breakpoint, UNSAFE_BreakpointConfig as BreakpointConfig, UNSAFE_BREAKPOINTS_CONFIG as BREAKPOINTS_CONFIG, UNSAFE_BREAKPOINTS_LIST as BREAKPOINTS_LIST } from '@atlaskit/ds-explorations';
 export var LAYERS = {
   card: 100,
   navigation: 200,
@@ -9,5 +8,4 @@ export var LAYERS = {
   flag: 600,
   spotlight: 700,
   tooltip: 800
-};
-export { BREAKPOINTS_CONFIG, BREAKPOINTS_LIST };
+};

package/dist/esm/helpers/responsive/build-media-query-css.js

@@ -0,0 +1,79 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { css } from '@emotion/react';
+import { SMALLEST_BREAKPOINT, UNSAFE_BREAKPOINTS_ORDERED_LIST } from './constants';
+import { UNSAFE_media } from './media-helper';
+/**
+ * Build a map of breakpoints to css with media queries and nested styles.
+ *
+ * @experimental Unsafe for usage as the API is not finalized.
+ *
+ * @example
+ * A map to build optional `display:none` for consumption on a div.
+ * ```ts
+ * const hideMediaQueries = buildAboveMediaQueryCSS({ display: 'none' });
+ *
+ * const Component = ({ hideAtBreakpoints: ('xs' | 'sm')[], children: ReactNode }) => {
+ *   return <div css={hideAtBreakpoints.map(b => hideMediaQueries[b])}>{children}</div>;
+ * }
+ * ```
+ *
+ * This roughly builds a map that will look roughly like this (if done manually):
+ * ```ts
+ * {
+ *   xxs: css({ '@media (min-width: 0px)': { display: 'none' } }),
+ *   xs: css({ '@media (min-width: …px)': { display: 'none' } }),
+ *   sm: css({ '@media (min-width: …px)': { display: 'none' } }),
+ * }
+ * ```
+ */
+export var UNSAFE_buildAboveMediaQueryCSS = function UNSAFE_buildAboveMediaQueryCSS(input) {
+  return UNSAFE_BREAKPOINTS_ORDERED_LIST.reduce(function (acc, breakpoint) {
+    return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, breakpoint, css(_defineProperty({}, UNSAFE_media.above[breakpoint], typeof input === 'function' ? input(breakpoint) : input))));
+  }, {});
+};
+
+/**
+ * Build a map of breakpoints to css with media queries and nested styles.
+ *
+ * WARNING: The smallest breakpoint is not a valid key as a media query below 0px is misleading.
+ * This is separated from `buildAboveMediaQueryCSS` for that specific reason, you cannot have type safety with this variance.
+ *
+ * @experimental Unsafe for usage as the API is not finalized.
+ *
+ * @example
+ * A map to build optional `display:none` for consumption on a div.
+ * ```ts
+ * const hideMediaQueries = buildBelowMediaQueryCSS({ display: 'none' });
+ *
+ * const Component = ({ hideAtBreakpoints: ('xs' | 'sm')[], children: ReactNode }) => {
+ *   return <div css={hideAtBreakpoints.map(b => hideMediaQueries[b])}>{children}</div>;
+ * }
+ * ```
+ *
+ * This roughly builds a map that will look roughly like this (if done manually):
+ * ```ts
+ * {
+ *   xs: css({ '@media (max-width: …px)': { display: 'none' } }),
+ *   sm: css({ '@media (max-width: …px)': { display: 'none' } }),
+ * }
+ * ```
+ *
+ * @experimental Unsafe for usage as the API is not finalized.
+ */
+export var UNSAFE_buildBelowMediaQueryCSS = function UNSAFE_buildBelowMediaQueryCSS(input) {
+  /**
+   * WARNING: it's very important that these are in the correct order.
+   * If they are not, cascading is not in the order higher/low breakpoints do not override as expected.
+   */
+  var reversedBreakpoints = _toConsumableArray(UNSAFE_BREAKPOINTS_ORDERED_LIST).reverse();
+  return reversedBreakpoints.reduce(function (acc, breakpoint) {
+    // Omit `media.below.xxs` as it's not available as that would be `<0px`…
+    if (breakpoint === SMALLEST_BREAKPOINT) {
+      return acc;
+    }
+    return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, breakpoint, css(_defineProperty({}, UNSAFE_media.below[breakpoint], typeof input === 'function' ? input(breakpoint) : input))));
+  }, {});
+};

package/dist/esm/helpers/responsive/constants.js

@@ -0,0 +1,76 @@
+/**
+ * Our internal configuration for breakpoints configuration.
+ *
+ * @experimental Unsafe for consumption outside of the design system itself.
+ */
+export var UNSAFE_BREAKPOINTS_CONFIG = {
+  // mobile
+  xxs: {
+    gridItemGutter: "var(--ds-space-200, 16px)",
+    gridMargin: "var(--ds-space-200, 16px)",
+    min: 0,
+    max: 479
+  },
+  // phablet
+  xs: {
+    gridItemGutter: "var(--ds-space-200, 16px)",
+    gridMargin: "var(--ds-space-200, 16px)",
+    min: 480,
+    max: 767
+  },
+  // tablet
+  sm: {
+    gridItemGutter: "var(--ds-space-200, 16px)",
+    gridMargin: "var(--ds-space-300, 24px)",
+    min: 768,
+    max: 1023
+  },
+  // laptop desktop
+  md: {
+    gridItemGutter: "var(--ds-space-300, 24px)",
+    gridMargin: "var(--ds-space-400, 32px)",
+    min: 1024,
+    max: 1439
+  },
+  // monitor
+  lg: {
+    gridItemGutter: "var(--ds-space-400, 32px)",
+    gridMargin: "var(--ds-space-400, 32px)",
+    min: 1440,
+    max: 1767
+  },
+  // large high res
+  xl: {
+    gridItemGutter: "var(--ds-space-400, 32px)",
+    gridMargin: "var(--ds-space-500, 40px)",
+    min: 1768,
+    max: 2159
+  },
+  // extra large high res
+  xxl: {
+    gridItemGutter: "var(--ds-space-500, 40px)",
+    gridMargin: "var(--ds-space-500, 40px)",
+    min: 2160,
+    max: Number.MAX_SAFE_INTEGER
+  }
+};
+
+/**
+ * The list of breakpoints in order from smallest to largest.  You may need to clone and reverse this list if you want the opposite.
+ *
+ * This is intentional for cascading with `min-width` or `media.above`. Media queries go from lowest width to highest.
+ *
+ * @experimental Unsafe for consumption outside of the design system itself.
+ */
+export var UNSAFE_BREAKPOINTS_ORDERED_LIST = Object.keys(UNSAFE_BREAKPOINTS_CONFIG).sort(function (a, b) {
+  return UNSAFE_BREAKPOINTS_CONFIG[a].min - UNSAFE_BREAKPOINTS_CONFIG[b].min;
+});
+
+/**
+ * This is our smallest breakpoint with a few nuances to it:
+ * 1. It is the default value for shorthands, eg. `<GridItem span={6} />` maps to `{ [SMALLEST_BREAKPOINT]: props.span }`
+ * 2. It's omitted in `media.below` as there's nothing below `0px`.
+ *
+ * @experimental There's a chance this will change in _value_, but should only be used in a way that it will not matter if this value changes.
+ */
+export var SMALLEST_BREAKPOINT = UNSAFE_BREAKPOINTS_ORDERED_LIST[0];

package/dist/esm/helpers/responsive/index.js

@@ -0,0 +1,3 @@
+export { UNSAFE_media } from './media-helper';
+export { UNSAFE_buildAboveMediaQueryCSS, UNSAFE_buildBelowMediaQueryCSS } from './build-media-query-css';
+export { UNSAFE_BREAKPOINTS_ORDERED_LIST, UNSAFE_BREAKPOINTS_CONFIG } from './constants';

package/dist/esm/helpers/responsive/media-helper.js

@@ -0,0 +1,78 @@
+import { UNSAFE_BREAKPOINTS_CONFIG } from './constants';
+
+/**
+ * To ensure min-width and max-width do both target at the same time, we subtract a value.
+ * We use a fractional value here as used in other libraries and described in @link https://www.w3.org/TR/mediaqueries-4/#mq-min-max: "…possibility of fractional viewport sizes which can occur as a result of non-integer pixel densities…"
+ */
+var BELOW_PRECISION = 0.02;
+
+/**
+ * This is the full internal version.  The import has been separated to only expose as-needed.
+ */
+var internalMedia = {
+  /**
+   * A media query to target viewports above the min width of a given breakpoint.
+   * Note that `media.above.xs` is redundant and should not be used, but it's included for programatic purposes.
+   */
+  above: {
+    /**
+     * `above.xxs` is redundant and no media query should be used, but it's included for programatic purposes…
+     *
+     * Eg. this is `@media (min-width: 0px)`
+     */
+    xxs: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xxs.min, "px)"),
+    xs: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xs.min, "px)"),
+    sm: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.sm.min, "px)"),
+    md: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.md.min, "px)"),
+    lg: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.lg.min, "px)"),
+    xl: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xl.min, "px)"),
+    xxl: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xxl.min, "px)")
+  },
+  below: {
+    /**
+     * A media query to target viewports below the min width of a given breakpoint.
+     * Note that `media.below.xxs` is intentionally omitted as this would be `@media (max-width: 0px)`
+     */
+    xs: "@media (max-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xs.min - BELOW_PRECISION, "px)"),
+    sm: "@media (max-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.sm.min - BELOW_PRECISION, "px)"),
+    md: "@media (max-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.md.min - BELOW_PRECISION, "px)"),
+    lg: "@media (max-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.lg.min - BELOW_PRECISION, "px)"),
+    xl: "@media (max-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xl.min - BELOW_PRECISION, "px)"),
+    xxl: "@media (max-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xxl.min - BELOW_PRECISION, "px)")
+  },
+  /**
+   * A media query to target viewports exactly between the min and max of a given breakpoint.
+   */
+  only: {
+    xxs: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xxs.min, "px) and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.xxs.max, "px)"),
+    xs: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xs.min, "px) and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.xs.max, "px)"),
+    sm: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.sm.min, "px) and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.sm.max, "px)"),
+    md: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.md.min, "px) and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.md.max, "px)"),
+    lg: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.lg.min, "px) and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.lg.max, "px)"),
+    xl: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xl.min, "px) and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.xl.max, "px)"),
+    xxl: "@media (min-width: ".concat(UNSAFE_BREAKPOINTS_CONFIG.xxl.min, "px) and (max-width: ").concat(UNSAFE_BREAKPOINTS_CONFIG.xxl.max, "px)")
+  }
+};
+
+/**
+ * This is an object of usable media query helpers using our internal breakpoints configuration.
+ *
+ * @experimental Unsafe for usage as the API is not finalized.
+ */
+export var UNSAFE_media = {
+  above: internalMedia.above,
+  below: internalMedia.below
+};
+
+/**
+ * With these types:
+ * ```
+ * type MediaQuery = `@media (${string})`;
+ * type ResponsiveMediaObject = Record<Breakpoint, MediaQuery>;
+ * ```
+ *
+ * TODO: This `media` object as of typescript@4.9, would benefit from satisfies, eg.:
+ * ```
+ * const UNSAFE_media = { … } satisfies Record<'above' | 'only', ResponsiveMediaObject> & { below: Omit<ResponsiveMediaObject, 'xxs'> }
+ * ```
+ */

package/dist/esm/helpers/responsive/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "0.2.2",
+	"version": "0.3.1",
 	"sideEffects": false
 }

package/dist/types/components/internal/base-box.partial.d.ts

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType, FC, ReactElement, ReactNode } from 'react';
-import { Breakpoint, Layer } from '../../constants';
+import { Layer } from '../../constants';
+import { ResponsiveObject } from '../../helpers/responsive';
 import type { BasePrimitiveProps } from '../types';
 export declare type BaseBoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className' | 'style'> & BasePrimitiveProps & BaseBoxPropsFoundation<T>;
 declare type BaseBoxPropsFoundation<T extends ElementType> = {
@@ -43,7 +44,7 @@ declare type BaseBoxPropsFoundation<T extends ElementType> = {
     /**
      * Defines border width.
      */
-    borderWidth?: BorderWidth | Partial<Record<Breakpoint, BorderWidth>>;
+    borderWidth?: BorderWidth | ResponsiveObject<BorderWidth>;
     /**
      * Token representing border color with a fallback.
      */
@@ -94,37 +95,37 @@ declare type BaseBoxPropsFoundation<T extends ElementType> = {
      * @see paddingBlock
      * @see paddingInline
      */
-    padding?: Padding | Partial<Record<Breakpoint, Padding>>;
+    padding?: Padding | ResponsiveObject<Padding>;
     /**
      * Tokens representing CSS shorthand `paddingBlock`.
      *
      * @see paddingBlockStart
      * @see paddingBlockEnd
      */
-    paddingBlock?: PaddingBlock | Partial<Record<Breakpoint, PaddingBlock>>;
+    paddingBlock?: PaddingBlock | ResponsiveObject<PaddingBlock>;
     /**
      * Tokens representing CSS `paddingBlockStart`.
      */
-    paddingBlockStart?: PaddingBlockStart | Partial<Record<Breakpoint, PaddingBlockStart>>;
+    paddingBlockStart?: PaddingBlockStart | ResponsiveObject<PaddingBlockStart>;
     /**
      * Tokens representing CSS `paddingBlockEnd`.
      */
-    paddingBlockEnd?: PaddingBlockEnd | Partial<Record<Breakpoint, PaddingBlockEnd>>;
+    paddingBlockEnd?: PaddingBlockEnd | ResponsiveObject<PaddingBlockEnd>;
     /**
      * Tokens representing CSS shorthand `paddingInline`.
      *
      * @see paddingInlineStart
      * @see paddingInlineEnd
      */
-    paddingInline?: PaddingInline | Partial<Record<Breakpoint, PaddingInline>>;
+    paddingInline?: PaddingInline | ResponsiveObject<PaddingInline>;
     /**
      * Tokens representing CSS `paddingInlineStart`.
      */
-    paddingInlineStart?: PaddingInlineStart | Partial<Record<Breakpoint, PaddingInlineStart>>;
+    paddingInlineStart?: PaddingInlineStart | ResponsiveObject<PaddingInlineStart>;
     /**
      * Tokens representing CSS `paddingInlineEnd`.
      */
-    paddingInlineEnd?: PaddingInlineEnd | Partial<Record<Breakpoint, PaddingInlineEnd>>;
+    paddingInlineEnd?: PaddingInlineEnd | ResponsiveObject<PaddingInlineEnd>;
     /**
      * Token representing width.
      * @experimental The existing tokens will be replaced to better reflect dimensions.
@@ -138,7 +139,7 @@ declare type BaseBoxPropsFoundation<T extends ElementType> = {
     /**
      * Defines display type and layout. Defaults to `block`.
      */
-    display?: Display | Partial<Record<Breakpoint, Display>>;
+    display?: Display | ResponsiveObject<Display>;
     /**
      * CSS position property.
      */

package/dist/types/components/internal/types.d.ts

@@ -1,6 +1,8 @@
 import { SerializedStyles } from '@emotion/react';
-import { Breakpoint } from '../../constants';
+import { ResponsiveCSSObject, ResponsiveObject } from '../../helpers/responsive';
 export declare const BOX_RESPONSIVE_PROPS: readonly ["borderWidth", "display", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd"];
 export declare type BoxResponsiveProp = typeof BOX_RESPONSIVE_PROPS[number];
-export declare type BreakpointIndexedStyle = Record<Breakpoint | 'static', SerializedStyles>;
-export declare type GenericPropertyValue = string | Partial<Record<Breakpoint, string>> | undefined;
+export declare type StaticResponsiveCSSObject = ResponsiveCSSObject & {
+    static: SerializedStyles;
+};
+export declare type GenericPropertyValue = string | ResponsiveObject<string> | undefined;

package/dist/types/constants.d.ts

@@ -1,4 +1,3 @@
-import { UNSAFE_Breakpoint as Breakpoint, UNSAFE_BreakpointConfig as BreakpointConfig, UNSAFE_BREAKPOINTS_CONFIG as BREAKPOINTS_CONFIG, UNSAFE_BREAKPOINTS_LIST as BREAKPOINTS_LIST } from '@atlaskit/ds-explorations';
 export declare const LAYERS: {
     readonly card: 100;
     readonly navigation: 200;
@@ -11,4 +10,3 @@ export declare const LAYERS: {
     readonly tooltip: 800;
 };
 export declare type Layer = keyof typeof LAYERS;
-export { BREAKPOINTS_CONFIG, BREAKPOINTS_LIST, type Breakpoint, type BreakpointConfig, };