@atlaskit/ds-explorations 2.3.2 → 2.4.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/ds-explorations
 
+## 2.4.0
+
+### Minor Changes
+
+- [#41275](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41275) [`1fd49b30e7e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1fd49b30e7e) - Revert removal of Box, Inline, Stack entry-points.
+
 ## 2.3.2
 
 ### Patch Changes

package/box/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@atlaskit/ds-explorations/box",
+  "main": "../dist/cjs/components/box.partial.js",
+  "module": "../dist/esm/components/box.partial.js",
+  "module:es2019": "../dist/es2019/components/box.partial.js",
+  "sideEffects": false,
+  "types": "../dist/types/components/box.partial.d.ts",
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "../dist/types-ts4.5/components/box.partial.d.ts"
+      ]
+    }
+  }
+}

package/dist/cjs/components/box.partial.js

@@ -0,0 +1,620 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Box = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _constants = require("../constants");
+var _surfaceProvider = require("./surface-provider");
+var _excluded = ["children", "as", "className", "display", "flexDirection", "alignItems", "justifyContent", "backgroundColor", "borderColor", "borderStyle", "borderWidth", "borderRadius", "shadow", "layer", "padding", "paddingBlock", "paddingInline", "position", "height", "overflow", "width", "UNSAFE_style", "testId"];
+/** @jsx jsx */
+/**
+ * @private
+ * @deprecated DSP-8009: This type is scheduled for deletion.
+ * Please use `Box` from `@atlaskit/primitives` instead.
+ */
+
+// Without this type annotation on Box we don't get autocomplete for props due to forwardRef types
+
+/**
+ * __Box__
+ *
+ * Box is a primitive component that has the design decisions of the Atlassian Design System baked in.
+ * Renders a `div` by default.
+ *
+ * @private
+ * @deprecated DSP-8009: This primitive is scheduled for deletion.
+ * Please use `Box` from `@atlaskit/primitives` instead.
+ */
+var Box = exports.Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var children = _ref.children,
+    as = _ref.as,
+    className = _ref.className,
+    _ref$display = _ref.display,
+    display = _ref$display === void 0 ? 'flex' : _ref$display,
+    flexDirection = _ref.flexDirection,
+    alignItems = _ref.alignItems,
+    justifyContent = _ref.justifyContent,
+    backgroundColor = _ref.backgroundColor,
+    borderColor = _ref.borderColor,
+    borderStyle = _ref.borderStyle,
+    borderWidth = _ref.borderWidth,
+    borderRadius = _ref.borderRadius,
+    shadow = _ref.shadow,
+    layer = _ref.layer,
+    padding = _ref.padding,
+    paddingBlock = _ref.paddingBlock,
+    paddingInline = _ref.paddingInline,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'relative' : _ref$position,
+    height = _ref.height,
+    overflow = _ref.overflow,
+    width = _ref.width,
+    UNSAFE_style = _ref.UNSAFE_style,
+    testId = _ref.testId,
+    htmlAttributes = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var Component = as || 'div';
+  var node = (0, _react2.jsx)(Component, (0, _extends2.default)({
+    style: UNSAFE_style,
+    ref: ref
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, htmlAttributes, {
+    className: className,
+    css: [baseStyles, display && displayMap[display], padding && paddingMap[padding], position && positionMap[position], paddingBlock && paddingBlockMap[paddingBlock], paddingInline && paddingInlineMap[paddingInline], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent], backgroundColor && backgroundColorMap[backgroundColor], borderColor && borderColorMap[borderColor], borderStyle && borderStyleMap[borderStyle], borderWidth && borderWidthMap[borderWidth], borderRadius && borderRadiusMap[borderRadius], shadow && shadowMap[shadow], layer && layerMap[layer], flexDirection && flexDirectionMap[flexDirection], overflow && overflowMap[overflow], width && widthMap[width], height && heightMap[height]],
+    "data-testid": testId
+  }), children);
+  return backgroundColor ? (0, _react2.jsx)(_surfaceProvider.SurfaceContext.Provider, {
+    value: backgroundColor
+  }, node) : node;
+});
+Box.displayName = 'Box';
+var _default = exports.default = Box; // <<< STYLES GO HERE >>>
+var borderStyleMap = {
+  none: (0, _react2.css)({
+    borderStyle: 'none'
+  }),
+  solid: (0, _react2.css)({
+    borderStyle: 'solid'
+  }),
+  dashed: (0, _react2.css)({
+    borderStyle: 'dashed'
+  }),
+  dotted: (0, _react2.css)({
+    borderStyle: 'dotted'
+  })
+};
+var borderWidthMap = {
+  '0px': (0, _react2.css)({
+    borderWidth: '0px'
+  }),
+  '1px': (0, _react2.css)({
+    borderWidth: '1px'
+  }),
+  '2px': (0, _react2.css)({
+    borderWidth: '2px'
+  }),
+  '3px': (0, _react2.css)({
+    borderWidth: '3px'
+  })
+};
+var borderRadiusMap = {
+  normal: (0, _react2.css)({
+    borderRadius: '3px'
+  }),
+  rounded: (0, _react2.css)({
+    borderRadius: '50%'
+  }),
+  badge: (0, _react2.css)({
+    borderRadius: '8px'
+  })
+};
+
+/**
+ * @experimental - this is likely to be removed
+ */
+
+var flexDirectionMap = {
+  column: (0, _react2.css)({
+    flexDirection: 'column'
+  }),
+  row: (0, _react2.css)({
+    flexDirection: 'row'
+  })
+};
+
+/**
+ * @experimental - this is likely to be removed
+ */
+
+var flexAlignItemsMap = {
+  center: (0, _react2.css)({
+    alignItems: 'center'
+  }),
+  baseline: (0, _react2.css)({
+    alignItems: 'baseline'
+  }),
+  flexStart: (0, _react2.css)({
+    alignItems: 'flex-start'
+  }),
+  flexEnd: (0, _react2.css)({
+    alignItems: 'flex-end'
+  }),
+  start: (0, _react2.css)({
+    alignItems: 'start'
+  }),
+  end: (0, _react2.css)({
+    alignItems: 'end'
+  })
+};
+
+/**
+ * @experimental - this is likely to be removed
+ */
+
+var flexJustifyContentMap = {
+  center: (0, _react2.css)({
+    justifyContent: 'center'
+  }),
+  flexStart: (0, _react2.css)({
+    justifyContent: 'flex-start'
+  }),
+  flexEnd: (0, _react2.css)({
+    justifyContent: 'flex-end'
+  }),
+  start: (0, _react2.css)({
+    justifyContent: 'start'
+  }),
+  end: (0, _react2.css)({
+    justifyContent: 'end'
+  })
+};
+var displayMap = {
+  block: (0, _react2.css)({
+    display: 'block'
+  }),
+  inline: (0, _react2.css)({
+    display: 'inline'
+  }),
+  flex: (0, _react2.css)({
+    display: 'flex'
+  }),
+  inlineFlex: (0, _react2.css)({
+    display: 'inline-flex'
+  }),
+  inlineBlock: (0, _react2.css)({
+    display: 'inline-block'
+  })
+};
+var positionMap = {
+  absolute: (0, _react2.css)({
+    position: 'absolute'
+  }),
+  fixed: (0, _react2.css)({
+    position: 'fixed'
+  }),
+  relative: (0, _react2.css)({
+    position: 'relative'
+  }),
+  static: (0, _react2.css)({
+    position: 'static'
+  })
+};
+var overflowMap = {
+  auto: (0, _react2.css)({
+    overflow: 'auto'
+  }),
+  hidden: (0, _react2.css)({
+    overflow: 'hidden'
+  })
+};
+var baseStyles = (0, _react2.css)({
+  boxSizing: 'border-box',
+  appearance: 'none',
+  border: 'none'
+});
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::327e769aaa3da9422a919a0ca9490070>>
+ * @codegenId dimensions
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["width", "height"]
+ */
+var widthMap = {
+  '100%': (0, _react2.css)({
+    width: '100%'
+  }),
+  'size.100': (0, _react2.css)({
+    width: '16px'
+  }),
+  'size.1000': (0, _react2.css)({
+    width: '192px'
+  }),
+  'size.200': (0, _react2.css)({
+    width: '24px'
+  }),
+  'size.300': (0, _react2.css)({
+    width: '32px'
+  }),
+  'size.400': (0, _react2.css)({
+    width: '40px'
+  }),
+  'size.500': (0, _react2.css)({
+    width: '48px'
+  }),
+  'size.600': (0, _react2.css)({
+    width: '96px'
+  })
+};
+var heightMap = {
+  '100%': (0, _react2.css)({
+    height: '100%'
+  }),
+  'size.100': (0, _react2.css)({
+    height: '16px'
+  }),
+  'size.1000': (0, _react2.css)({
+    height: '192px'
+  }),
+  'size.200': (0, _react2.css)({
+    height: '24px'
+  }),
+  'size.300': (0, _react2.css)({
+    height: '32px'
+  }),
+  'size.400': (0, _react2.css)({
+    height: '40px'
+  }),
+  'size.500': (0, _react2.css)({
+    height: '48px'
+  }),
+  'size.600': (0, _react2.css)({
+    height: '96px'
+  })
+};
+/**
+ * @codegenEnd
+ */
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::8aa9e47916dc6f6d72f32999f48fbd27>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["padding", "paddingBlock", "paddingInline"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::298080e8024fb3eb37589721413e0156>>
+ */
+var paddingMap = {
+  'space.0': (0, _react2.css)({
+    padding: "var(--ds-space-0, 0px)"
+  }),
+  'space.025': (0, _react2.css)({
+    padding: "var(--ds-space-025, 2px)"
+  }),
+  'space.050': (0, _react2.css)({
+    padding: "var(--ds-space-050, 4px)"
+  }),
+  'space.075': (0, _react2.css)({
+    padding: "var(--ds-space-075, 6px)"
+  }),
+  'space.100': (0, _react2.css)({
+    padding: "var(--ds-space-100, 8px)"
+  }),
+  'space.1000': (0, _react2.css)({
+    padding: "var(--ds-space-1000, 80px)"
+  }),
+  'space.150': (0, _react2.css)({
+    padding: "var(--ds-space-150, 12px)"
+  }),
+  'space.200': (0, _react2.css)({
+    padding: "var(--ds-space-200, 16px)"
+  }),
+  'space.250': (0, _react2.css)({
+    padding: "var(--ds-space-250, 20px)"
+  }),
+  'space.300': (0, _react2.css)({
+    padding: "var(--ds-space-300, 24px)"
+  }),
+  'space.400': (0, _react2.css)({
+    padding: "var(--ds-space-400, 32px)"
+  }),
+  'space.500': (0, _react2.css)({
+    padding: "var(--ds-space-500, 40px)"
+  }),
+  'space.600': (0, _react2.css)({
+    padding: "var(--ds-space-600, 48px)"
+  }),
+  'space.800': (0, _react2.css)({
+    padding: "var(--ds-space-800, 64px)"
+  })
+};
+var paddingBlockMap = {
+  'space.0': (0, _react2.css)({
+    paddingBlock: "var(--ds-space-0, 0px)"
+  }),
+  'space.025': (0, _react2.css)({
+    paddingBlock: "var(--ds-space-025, 2px)"
+  }),
+  'space.050': (0, _react2.css)({
+    paddingBlock: "var(--ds-space-050, 4px)"
+  }),
+  'space.075': (0, _react2.css)({
+    paddingBlock: "var(--ds-space-075, 6px)"
+  }),
+  'space.100': (0, _react2.css)({
+    paddingBlock: "var(--ds-space-100, 8px)"
+  }),
+  'space.1000': (0, _react2.css)({
+    paddingBlock: "var(--ds-space-1000, 80px)"
+  }),
+  'space.150': (0, _react2.css)({
+    paddingBlock: "var(--ds-space-150, 12px)"
+  }),
+  'space.200': (0, _react2.css)({
+    paddingBlock: "var(--ds-space-200, 16px)"
+  }),
+  'space.250': (0, _react2.css)({
+    paddingBlock: "var(--ds-space-250, 20px)"
+  }),
+  'space.300': (0, _react2.css)({
+    paddingBlock: "var(--ds-space-300, 24px)"
+  }),
+  'space.400': (0, _react2.css)({
+    paddingBlock: "var(--ds-space-400, 32px)"
+  }),
+  'space.500': (0, _react2.css)({
+    paddingBlock: "var(--ds-space-500, 40px)"
+  }),
+  'space.600': (0, _react2.css)({
+    paddingBlock: "var(--ds-space-600, 48px)"
+  }),
+  'space.800': (0, _react2.css)({
+    paddingBlock: "var(--ds-space-800, 64px)"
+  })
+};
+var paddingInlineMap = {
+  'space.0': (0, _react2.css)({
+    paddingInline: "var(--ds-space-0, 0px)"
+  }),
+  'space.025': (0, _react2.css)({
+    paddingInline: "var(--ds-space-025, 2px)"
+  }),
+  'space.050': (0, _react2.css)({
+    paddingInline: "var(--ds-space-050, 4px)"
+  }),
+  'space.075': (0, _react2.css)({
+    paddingInline: "var(--ds-space-075, 6px)"
+  }),
+  'space.100': (0, _react2.css)({
+    paddingInline: "var(--ds-space-100, 8px)"
+  }),
+  'space.1000': (0, _react2.css)({
+    paddingInline: "var(--ds-space-1000, 80px)"
+  }),
+  'space.150': (0, _react2.css)({
+    paddingInline: "var(--ds-space-150, 12px)"
+  }),
+  'space.200': (0, _react2.css)({
+    paddingInline: "var(--ds-space-200, 16px)"
+  }),
+  'space.250': (0, _react2.css)({
+    paddingInline: "var(--ds-space-250, 20px)"
+  }),
+  'space.300': (0, _react2.css)({
+    paddingInline: "var(--ds-space-300, 24px)"
+  }),
+  'space.400': (0, _react2.css)({
+    paddingInline: "var(--ds-space-400, 32px)"
+  }),
+  'space.500': (0, _react2.css)({
+    paddingInline: "var(--ds-space-500, 40px)"
+  }),
+  'space.600': (0, _react2.css)({
+    paddingInline: "var(--ds-space-600, 48px)"
+  }),
+  'space.800': (0, _react2.css)({
+    paddingInline: "var(--ds-space-800, 64px)"
+  })
+};
+/**
+ * @codegenEnd
+ */
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::1c951d1c65e5ffddea3f0a92075d4614>>
+ * @codegenId colors
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["border", "background", "shadow"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f6a616f7ea03ec40c148fc83050d073b>>
+ */
+var borderColorMap = {
+  'color.border': (0, _react2.css)({
+    borderColor: "var(--ds-border, #091e4221)"
+  }),
+  disabled: (0, _react2.css)({
+    borderColor: "var(--ds-border-disabled, #FAFBFC)"
+  }),
+  focused: (0, _react2.css)({
+    borderColor: "var(--ds-border-focused, #2684FF)"
+  }),
+  input: (0, _react2.css)({
+    borderColor: "var(--ds-border-input, #FAFBFC)"
+  }),
+  inverse: (0, _react2.css)({
+    borderColor: "var(--ds-border-inverse, #FFFFFF)"
+  }),
+  selected: (0, _react2.css)({
+    borderColor: "var(--ds-border-selected, #0052CC)"
+  }),
+  brand: (0, _react2.css)({
+    borderColor: "var(--ds-border-brand, #0052CC)"
+  }),
+  danger: (0, _react2.css)({
+    borderColor: "var(--ds-border-danger, #FF5630)"
+  }),
+  warning: (0, _react2.css)({
+    borderColor: "var(--ds-border-warning, #FFC400)"
+  }),
+  success: (0, _react2.css)({
+    borderColor: "var(--ds-border-success, #00875A)"
+  }),
+  discovery: (0, _react2.css)({
+    borderColor: "var(--ds-border-discovery, #998DD9)"
+  }),
+  information: (0, _react2.css)({
+    borderColor: "var(--ds-border-information, #0065FF)"
+  }),
+  bold: (0, _react2.css)({
+    borderColor: "var(--ds-border-bold, #344563)"
+  })
+};
+var backgroundColorMap = {
+  disabled: (0, _react2.css)({
+    backgroundColor: "var(--ds-background-disabled, #091e4289)"
+  }),
+  input: (0, _react2.css)({
+    backgroundColor: "var(--ds-background-input, #FAFBFC)"
+  }),
+  'inverse.subtle': (0, _react2.css)({
+    backgroundColor: "var(--ds-background-inverse-subtle, #00000029)"
+  }),
+  neutral: (0, _react2.css)({
+    backgroundColor: "var(--ds-background-neutral, #DFE1E6)"
+  }),
+  'neutral.subtle': (0, _react2.css)({
+    backgroundColor: "var(--ds-background-neutral-subtle, transparent)"
+  }),
+  'neutral.bold': (0, _react2.css)({
+    backgroundColor: "var(--ds-background-neutral-bold, #42526E)"
+  }),
+  selected: (0, _react2.css)({
+    backgroundColor: "var(--ds-background-selected, #DEEBFF)"
+  }),
+  'selected.bold': (0, _react2.css)({
+    backgroundColor: "var(--ds-background-selected-bold, #0052CC)"
+  }),
+  'brand.subtlest': (0, _react2.css)({
+    backgroundColor: "var(--ds-background-brand-subtlest, #B3D4FF)"
+  }),
+  'brand.bold': (0, _react2.css)({
+    backgroundColor: "var(--ds-background-brand-bold, #0052CC)"
+  }),
+  'brand.boldest': (0, _react2.css)({
+    backgroundColor: "var(--ds-background-brand-boldest, #0747A6)"
+  }),
+  danger: (0, _react2.css)({
+    backgroundColor: "var(--ds-background-danger, #FFEBE6)"
+  }),
+  'danger.bold': (0, _react2.css)({
+    backgroundColor: "var(--ds-background-danger-bold, #DE350B)"
+  }),
+  warning: (0, _react2.css)({
+    backgroundColor: "var(--ds-background-warning, #FFFAE6)"
+  }),
+  'warning.bold': (0, _react2.css)({
+    backgroundColor: "var(--ds-background-warning-bold, #FFAB00)"
+  }),
+  success: (0, _react2.css)({
+    backgroundColor: "var(--ds-background-success, #E3FCEF)"
+  }),
+  'success.bold': (0, _react2.css)({
+    backgroundColor: "var(--ds-background-success-bold, #00875A)"
+  }),
+  discovery: (0, _react2.css)({
+    backgroundColor: "var(--ds-background-discovery, #EAE6FF)"
+  }),
+  'discovery.bold': (0, _react2.css)({
+    backgroundColor: "var(--ds-background-discovery-bold, #5243AA)"
+  }),
+  information: (0, _react2.css)({
+    backgroundColor: "var(--ds-background-information, #DEEBFF)"
+  }),
+  'information.bold': (0, _react2.css)({
+    backgroundColor: "var(--ds-background-information-bold, #0052CC)"
+  }),
+  'color.blanket': (0, _react2.css)({
+    backgroundColor: "var(--ds-blanket, #091e4289)"
+  }),
+  'color.blanket.selected': (0, _react2.css)({
+    backgroundColor: "var(--ds-blanket-selected, #388BFF14)"
+  }),
+  'color.blanket.danger': (0, _react2.css)({
+    backgroundColor: "var(--ds-blanket-danger, #EF5C4814)"
+  }),
+  'elevation.surface': (0, _react2.css)({
+    backgroundColor: "var(--ds-surface, #FFFFFF)"
+  }),
+  'elevation.surface.overlay': (0, _react2.css)({
+    backgroundColor: "var(--ds-surface-overlay, #FFFFFF)"
+  }),
+  'elevation.surface.raised': (0, _react2.css)({
+    backgroundColor: "var(--ds-surface-raised, #FFFFFF)"
+  }),
+  'elevation.surface.sunken': (0, _react2.css)({
+    backgroundColor: "var(--ds-surface-sunken, #F4F5F7)"
+  })
+};
+var shadowMap = {
+  overflow: (0, _react2.css)({
+    boxShadow: "var(--ds-shadow-overflow, 0px 0px 8px #091e423f, 0px 0px 1px #091e424f)"
+  }),
+  'overflow.perimeter': (0, _react2.css)({
+    boxShadow: "var(--ds-shadow-overflow-perimeter, #091e421f)"
+  }),
+  'overflow.spread': (0, _react2.css)({
+    boxShadow: "var(--ds-shadow-overflow-spread, #091e4229)"
+  }),
+  overlay: (0, _react2.css)({
+    boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091e423f, 0px 0px 1px #091e424f)"
+  }),
+  raised: (0, _react2.css)({
+    boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091e423f, 0px 0px 1px #091e4221)"
+  })
+};
+/**
+ * @codegenEnd
+ */
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::bacbea271b30ec7d2f61306c9a8a9e63>>
+ * @codegenId misc
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["layer"]
+ */
+var layerMap = {
+  card: (0, _react2.css)({
+    zIndex: _constants.LAYERS['card']
+  }),
+  navigation: (0, _react2.css)({
+    zIndex: _constants.LAYERS['navigation']
+  }),
+  dialog: (0, _react2.css)({
+    zIndex: _constants.LAYERS['dialog']
+  }),
+  layer: (0, _react2.css)({
+    zIndex: _constants.LAYERS['layer']
+  }),
+  blanket: (0, _react2.css)({
+    zIndex: _constants.LAYERS['blanket']
+  }),
+  modal: (0, _react2.css)({
+    zIndex: _constants.LAYERS['modal']
+  }),
+  flag: (0, _react2.css)({
+    zIndex: _constants.LAYERS['flag']
+  }),
+  spotlight: (0, _react2.css)({
+    zIndex: _constants.LAYERS['spotlight']
+  }),
+  tooltip: (0, _react2.css)({
+    zIndex: _constants.LAYERS['tooltip']
+  })
+};
+
+/**
+ * @codegenEnd
+ */