@atlaskit/ds-explorations 1.2.1 → 1.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/cjs/components/inline.partial.js +9 -10
  3. package/dist/cjs/version.json +1 -1
  4. package/dist/es2019/components/inline.partial.js +9 -8
  5. package/dist/es2019/version.json +1 -1
  6. package/dist/esm/components/inline.partial.js +9 -8
  7. package/dist/esm/version.json +1 -1
  8. package/package.json +1 -1
  9. package/src/components/inline.partial.tsx +16 -10
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @atlaskit/ds-explorations
2
2
 
3
+ ## 1.2.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [`1dec7b39f7b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1dec7b39f7b) - - Children are only iterated over when divider prop is passed. There should be no behaviour change.
8
+ - Add `user-select: none;` to divider.
9
+
3
10
  ## 1.2.1
4
11
 
5
12
  ### Patch Changes
package/dist/cjs/components/inline.partial.js CHANGED
@@ -60,7 +60,8 @@ var baseStyles = (0, _react2.css)({
60
60
  var dividerStyles = (0, _react2.css)({
61
61
  margin: '0 -2px',
62
62
  color: "var(--ds-text-subtle, #42526E)",
63
- pointerEvents: 'none'
63
+ pointerEvents: 'none',
64
+ userSelect: 'none'
64
65
  });
65
66
 
66
67
  var Divider = function Divider(_ref) {
@@ -94,22 +95,20 @@ var Inline = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(
94
95
  flexWrap = _ref2.flexWrap,
95
96
  divider = _ref2.divider,
96
97
  UNSAFE_style = _ref2.UNSAFE_style,
97
- children = _ref2.children,
98
+ rawChildren = _ref2.children,
98
99
  testId = _ref2.testId;
99
100
  var dividerComponent = typeof divider === 'string' ? (0, _react2.jsx)(Divider, null, divider) : divider;
100
-
101
- var childrenArray = _react.Children.toArray(children).filter(Boolean);
102
-
101
+ var children = divider ? _react.Children.toArray(rawChildren).filter(Boolean).map(function (child, index) {
102
+ return (0, _react2.jsx)(_react.Fragment, {
103
+ key: index
104
+ }, divider && index > 0 ? dividerComponent : null, child);
105
+ }) : rawChildren;
103
106
  return (0, _react2.jsx)("div", {
104
107
  style: UNSAFE_style,
105
108
  css: [baseStyles, gap && columnGapMap[gap], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent], flexWrap && flexWrapMap[flexWrap]],
106
109
  "data-testid": testId,
107
110
  ref: ref
108
- }, childrenArray.map(function (child, index) {
109
- return (0, _react2.jsx)(_react.Fragment, {
110
- key: index
111
- }, divider && index > 0 ? dividerComponent : null, child);
112
- }));
111
+ }, children);
113
112
  }));
114
113
  Inline.displayName = 'Inline';
115
114
  var _default = Inline;
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/ds-explorations",
3
- "version": "1.2.1",
3
+ "version": "1.2.2",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/components/inline.partial.js CHANGED
@@ -51,7 +51,8 @@ const baseStyles = css({
51
51
  const dividerStyles = css({
52
52
  margin: '0 -2px',
53
53
  color: "var(--ds-text-subtle, #42526E)",
54
- pointerEvents: 'none'
54
+ pointerEvents: 'none',
55
+ userSelect: 'none'
55
56
  });
56
57
 
57
58
  const Divider = ({
@@ -84,21 +85,21 @@ const Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
84
85
  flexWrap,
85
86
  divider,
86
87
  UNSAFE_style,
87
- children,
88
+ children: rawChildren,
88
89
  testId
89
90
  }, ref) => {
90
91
  const dividerComponent = typeof divider === 'string' ? jsx(Divider, null, divider) : divider;
91
- const childrenArray = Children.toArray(children).filter(Boolean);
92
+ const children = divider ? Children.toArray(rawChildren).filter(Boolean).map((child, index) => {
93
+ return jsx(Fragment, {
94
+ key: index
95
+ }, divider && index > 0 ? dividerComponent : null, child);
96
+ }) : rawChildren;
92
97
  return jsx("div", {
93
98
  style: UNSAFE_style,
94
99
  css: [baseStyles, gap && columnGapMap[gap], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent], flexWrap && flexWrapMap[flexWrap]],
95
100
  "data-testid": testId,
96
101
  ref: ref
97
- }, childrenArray.map((child, index) => {
98
- return jsx(Fragment, {
99
- key: index
100
- }, divider && index > 0 ? dividerComponent : null, child);
101
- }));
102
+ }, children);
102
103
  }));
103
104
  Inline.displayName = 'Inline';
104
105
  export default Inline;
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/ds-explorations",
3
- "version": "1.2.1",
3
+ "version": "1.2.2",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/components/inline.partial.js CHANGED
@@ -51,7 +51,8 @@ var baseStyles = css({
51
51
  var dividerStyles = css({
52
52
  margin: '0 -2px',
53
53
  color: "var(--ds-text-subtle, #42526E)",
54
- pointerEvents: 'none'
54
+ pointerEvents: 'none',
55
+ userSelect: 'none'
55
56
  });
56
57
 
57
58
  var Divider = function Divider(_ref) {
@@ -85,20 +86,20 @@ var Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2, ref) {
85
86
  flexWrap = _ref2.flexWrap,
86
87
  divider = _ref2.divider,
87
88
  UNSAFE_style = _ref2.UNSAFE_style,
88
- children = _ref2.children,
89
+ rawChildren = _ref2.children,
89
90
  testId = _ref2.testId;
90
91
  var dividerComponent = typeof divider === 'string' ? jsx(Divider, null, divider) : divider;
91
- var childrenArray = Children.toArray(children).filter(Boolean);
92
+ var children = divider ? Children.toArray(rawChildren).filter(Boolean).map(function (child, index) {
93
+ return jsx(Fragment, {
94
+ key: index
95
+ }, divider && index > 0 ? dividerComponent : null, child);
96
+ }) : rawChildren;
92
97
  return jsx("div", {
93
98
  style: UNSAFE_style,
94
99
  css: [baseStyles, gap && columnGapMap[gap], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent], flexWrap && flexWrapMap[flexWrap]],
95
100
  "data-testid": testId,
96
101
  ref: ref
97
- }, childrenArray.map(function (child, index) {
98
- return jsx(Fragment, {
99
- key: index
100
- }, divider && index > 0 ? dividerComponent : null, child);
101
- }));
102
+ }, children);
102
103
  }));
103
104
  Inline.displayName = 'Inline';
104
105
  export default Inline;
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/ds-explorations",
3
- "version": "1.2.1",
3
+ "version": "1.2.2",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/ds-explorations",
3
- "version": "1.2.1",
3
+ "version": "1.2.2",
4
4
  "description": "An experimental package for exploration and validation of spacing / typography foundations.",
5
5
  "license": "Apache-2.0",
6
6
  "atlassian": {
package/src/components/inline.partial.tsx CHANGED
@@ -69,6 +69,7 @@ const dividerStyles = css({
69
69
  margin: '0 -2px',
70
70
  color: token('color.text.subtle', '#42526E'),
71
71
  pointerEvents: 'none',
72
+ userSelect: 'none',
72
73
  });
73
74
 
74
75
  const Divider: FC = ({ children }) => (
@@ -101,14 +102,26 @@ const Inline = memo(
101
102
  flexWrap,
102
103
  divider,
103
104
  UNSAFE_style,
104
- children,
105
+ children: rawChildren,
105
106
  testId,
106
107
  },
107
108
  ref,
108
109
  ) => {
109
110
  const dividerComponent =
110
111
  typeof divider === 'string' ? <Divider>{divider}</Divider> : divider;
111
- const childrenArray = Children.toArray(children).filter(Boolean);
112
+
113
+ const children = divider
114
+ ? Children.toArray(rawChildren)
115
+ .filter(Boolean)
116
+ .map((child, index) => {
117
+ return (
118
+ <Fragment key={index}>
119
+ {divider && index > 0 ? dividerComponent : null}
120
+ {child}
121
+ </Fragment>
122
+ );
123
+ })
124
+ : rawChildren;
112
125
 
113
126
  return (
114
127
  <div
@@ -123,14 +136,7 @@ const Inline = memo(
123
136
  data-testid={testId}
124
137
  ref={ref}
125
138
  >
126
- {childrenArray.map((child, index) => {
127
- return (
128
- <Fragment key={index}>
129
- {divider && index > 0 ? dividerComponent : null}
130
- {child}
131
- </Fragment>
132
- );
133
- })}
139
+ {children}
134
140
  </div>
135
141
  );
136
142
  },