@atlaskit/panel 0.11.22 → 0.11.24

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 +12 -0
  2. package/afm-products/tsconfig.json +48 -0
  3. package/dist/cjs/components/Panel/styledPanel.js +26 -9
  4. package/dist/es2019/components/Panel/styledPanel.js +22 -22
  5. package/dist/esm/components/Panel/styledPanel.js +26 -9
  6. package/dist/types/components/Panel/styledPanel.d.ts +5 -4
  7. package/dist/types-ts4.5/components/Panel/styledPanel.d.ts +5 -4
  8. package/docs/0-intro.tsx +2 -1
  9. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/panel
2
2
 
3
+ ## 0.11.24
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 0.11.23
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
3
15
  ## 0.11.22
4
16
 
5
17
  ### Patch Changes
package/afm-products/tsconfig.json ADDED
@@ -0,0 +1,48 @@
1
+ {
2
+ "extends": "../../../../tsconfig.entry-points.products.json",
3
+ "compilerOptions": {
4
+ "declaration": true,
5
+ "target": "es5",
6
+ "outDir": "../../../../../tsDist/@atlaskit__panel/app",
7
+ "rootDir": "../",
8
+ "composite": true
9
+ },
10
+ "include": [
11
+ "../src/**/*.ts",
12
+ "../src/**/*.tsx"
13
+ ],
14
+ "exclude": [
15
+ "../src/**/__tests__/*",
16
+ "../src/**/*.test.*",
17
+ "../src/**/test.*",
18
+ "../src/**/examples.*",
19
+ "../src/**/examples/*",
20
+ "../src/**/examples/**/*",
21
+ "../src/**/*.stories.*",
22
+ "../src/**/stories/*",
23
+ "../src/**/stories/**/*"
24
+ ],
25
+ "references": [
26
+ {
27
+ "path": "../../../design-system/button/afm-products/tsconfig.json"
28
+ },
29
+ {
30
+ "path": "../../../design-system/icon/afm-products/tsconfig.json"
31
+ },
32
+ {
33
+ "path": "../../../design-system/link/afm-products/tsconfig.json"
34
+ },
35
+ {
36
+ "path": "../../../platform/feature-flags/afm-products/tsconfig.json"
37
+ },
38
+ {
39
+ "path": "../../../design-system/primitives/afm-products/tsconfig.json"
40
+ },
41
+ {
42
+ "path": "../../../design-system/theme/afm-products/tsconfig.json"
43
+ },
44
+ {
45
+ "path": "../../../design-system/tokens/afm-products/tsconfig.json"
46
+ }
47
+ ]
48
+ }
package/dist/cjs/components/Panel/styledPanel.js CHANGED
@@ -10,7 +10,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
10
10
  var _reactFocusWithin = require("react-focus-within");
11
11
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
12
12
  var _theme = require("@atlaskit/theme");
13
- var _templateObject, _templateObject2, _templateObject3, _templateObject4; // TODO: should use @emotion
13
+ var _templateObject, _templateObject2, _templateObject3; // TODO: should use @emotion
14
14
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
15
15
  // AFP-2532 TODO: Fix automatic suppressions below
16
16
  // eslint-disable-next-line @atlassian/tangerine/import/entry-points
@@ -18,17 +18,34 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
18
18
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
19
19
  var transition = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\ttransition: all 200ms ease-in-out;\n"])));
20
20
 
21
- // eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression, @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
21
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
22
22
  var PanelWrapper = exports.PanelWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\tmargin: 0 auto ", ";\n"])), "var(--ds-space-200, 16px)");
23
23
 
24
- // eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression, @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
25
- var ButtonWrapper = exports.ButtonWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\tleft: 0;\n\tline-height: 0;\n\topacity: ", ";\n\tposition: absolute;\n\t", ";\n\n\t/* IE 11 needs these vertical positioning rules - the flexbox\n behavior for absolute-positioned children is not up to spec.\n https://googlechrome.github.io/samples/css-flexbox-abspos/ */\n\ttop: 50%;\n\ttransform: translateY(-50%);\n\n\tbutton {\n\t\tpointer-events: none;\n\t}\n"])), function (_ref) {
26
- var isHidden = _ref.isHidden;
27
- return isHidden ? 0 : 1;
28
- }, transition);
29
-
30
24
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
31
- var PanelHeader = exports.PanelHeader = (0, _reactFocusWithin.withFocusWithin)(_styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\talign-items: center;\n\tbackground-color: ", ";\n\tborder-radius: ", ";\n\tdisplay: flex;\n\tleft: ", ";\n\tmargin-bottom: ", ";\n\tmargin-top: ", ";\n\tpadding: ", " ", " ", "\n\t\t", ";\n\tposition: relative;\n\t", ";\n\twidth: 100%;\n\n\t", " {\n\t\topacity: ", ";\n\t}\n\n\t&:hover {\n\t\tbackground-color: ", ";\n\t\tcursor: pointer;\n\n\t\t", " {\n\t\t\topacity: 1;\n\t\t}\n\t}\n"])), function (props) {
25
+ var ButtonWrapper = exports.ButtonWrapper = _styledComponents.default.div(
26
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-dynamic-styles
27
+ function (props) {
28
+ return {
29
+ left: 0,
30
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
31
+ lineHeight: 0,
32
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
33
+ opacity: props.isHidden ? 0 : 1,
34
+ position: 'absolute'
35
+ };
36
+ },
37
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
38
+ transition, {
39
+ top: '50%',
40
+ transform: 'translateY(-50%)',
41
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
42
+ button: {
43
+ pointerEvents: 'none'
44
+ }
45
+ });
46
+
47
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @typescript-eslint/ban-types -- Ignored via go/DSP-18766
48
+ var PanelHeader = exports.PanelHeader = (0, _reactFocusWithin.withFocusWithin)(_styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\talign-items: center;\n\tbackground-color: ", ";\n\tborder-radius: ", ";\n\tdisplay: flex;\n\tleft: ", ";\n\tmargin-bottom: ", ";\n\tmargin-top: ", ";\n\tpadding: ", " ", " ", "\n\t\t", ";\n\tposition: relative;\n\t", ";\n\twidth: 100%;\n\n\t", " {\n\t\topacity: ", ";\n\t}\n\n\t&:hover {\n\t\tbackground-color: ", ";\n\t\tcursor: pointer;\n\n\t\t", " {\n\t\t\topacity: 1;\n\t\t}\n\t}\n"])), function (props) {
32
49
  return props.isFocused && "var(--ds-surface-hovered, ".concat(_theme.colors.N20, ")");
33
50
  }, "var(--ds-radius-small, 3px)", "var(--ds-space-negative-300, -24px)", "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)", "var(--ds-space-025, 2px)", "var(--ds-space-0, 0px)", "var(--ds-space-025, 2px)", "var(--ds-space-300, 24px)", transition, ButtonWrapper, function (props) {
34
51
  return props.isFocused && 1;
package/dist/es2019/components/Panel/styledPanel.js CHANGED
@@ -11,33 +11,33 @@ const transition = css`
11
11
  transition: all 200ms ease-in-out;
12
12
  `;
13
13
 
14
- // eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression, @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
14
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
15
15
  export const PanelWrapper = styled.div`
16
16
  margin: 0 auto ${"var(--ds-space-200, 16px)"};
17
17
  `;
18
18
 
19
- // eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression, @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
20
- export const ButtonWrapper = styled.div`
21
- left: 0;
22
- line-height: 0;
23
- opacity: ${({
24
- isHidden
25
- }) => isHidden ? 0 : 1};
26
- position: absolute;
27
- ${transition};
28
-
29
- /* IE 11 needs these vertical positioning rules - the flexbox
30
- behavior for absolute-positioned children is not up to spec.
31
- https://googlechrome.github.io/samples/css-flexbox-abspos/ */
32
- top: 50%;
33
- transform: translateY(-50%);
34
-
35
- button {
36
- pointer-events: none;
37
- }
38
- `;
39
-
40
19
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
20
+ export const ButtonWrapper = styled.div(
21
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-dynamic-styles
22
+ props => ({
23
+ left: 0,
24
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
25
+ lineHeight: 0,
26
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
27
+ opacity: props.isHidden ? 0 : 1,
28
+ position: 'absolute'
29
+ }),
30
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
31
+ transition, {
32
+ top: '50%',
33
+ transform: 'translateY(-50%)',
34
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
35
+ button: {
36
+ pointerEvents: 'none'
37
+ }
38
+ });
39
+
40
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @typescript-eslint/ban-types -- Ignored via go/DSP-18766
41
41
  export const PanelHeader = withFocusWithin(styled.div`
42
42
  align-items: center;
43
43
  background-color: ${props => props.isFocused && `var(--ds-surface-hovered, ${colors.N20})`};
package/dist/esm/components/Panel/styledPanel.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
- var _templateObject, _templateObject2, _templateObject3, _templateObject4;
2
+ var _templateObject, _templateObject2, _templateObject3;
3
3
  import { withFocusWithin } from 'react-focus-within';
4
4
  // TODO: should use @emotion
5
5
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -11,17 +11,34 @@ import { colors } from '@atlaskit/theme';
11
11
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
12
12
  var transition = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\ttransition: all 200ms ease-in-out;\n"])));
13
13
 
14
- // eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression, @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
14
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
15
15
  export var PanelWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\tmargin: 0 auto ", ";\n"])), "var(--ds-space-200, 16px)");
16
16
 
17
- // eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression, @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
18
- export var ButtonWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\tleft: 0;\n\tline-height: 0;\n\topacity: ", ";\n\tposition: absolute;\n\t", ";\n\n\t/* IE 11 needs these vertical positioning rules - the flexbox\n behavior for absolute-positioned children is not up to spec.\n https://googlechrome.github.io/samples/css-flexbox-abspos/ */\n\ttop: 50%;\n\ttransform: translateY(-50%);\n\n\tbutton {\n\t\tpointer-events: none;\n\t}\n"])), function (_ref) {
19
- var isHidden = _ref.isHidden;
20
- return isHidden ? 0 : 1;
21
- }, transition);
22
-
23
17
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
24
- export var PanelHeader = withFocusWithin(styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\talign-items: center;\n\tbackground-color: ", ";\n\tborder-radius: ", ";\n\tdisplay: flex;\n\tleft: ", ";\n\tmargin-bottom: ", ";\n\tmargin-top: ", ";\n\tpadding: ", " ", " ", "\n\t\t", ";\n\tposition: relative;\n\t", ";\n\twidth: 100%;\n\n\t", " {\n\t\topacity: ", ";\n\t}\n\n\t&:hover {\n\t\tbackground-color: ", ";\n\t\tcursor: pointer;\n\n\t\t", " {\n\t\t\topacity: 1;\n\t\t}\n\t}\n"])), function (props) {
18
+ export var ButtonWrapper = styled.div(
19
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-dynamic-styles
20
+ function (props) {
21
+ return {
22
+ left: 0,
23
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
24
+ lineHeight: 0,
25
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
26
+ opacity: props.isHidden ? 0 : 1,
27
+ position: 'absolute'
28
+ };
29
+ },
30
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
31
+ transition, {
32
+ top: '50%',
33
+ transform: 'translateY(-50%)',
34
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
35
+ button: {
36
+ pointerEvents: 'none'
37
+ }
38
+ });
39
+
40
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @typescript-eslint/ban-types -- Ignored via go/DSP-18766
41
+ export var PanelHeader = withFocusWithin(styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\talign-items: center;\n\tbackground-color: ", ";\n\tborder-radius: ", ";\n\tdisplay: flex;\n\tleft: ", ";\n\tmargin-bottom: ", ";\n\tmargin-top: ", ";\n\tpadding: ", " ", " ", "\n\t\t", ";\n\tposition: relative;\n\t", ";\n\twidth: 100%;\n\n\t", " {\n\t\topacity: ", ";\n\t}\n\n\t&:hover {\n\t\tbackground-color: ", ";\n\t\tcursor: pointer;\n\n\t\t", " {\n\t\t\topacity: 1;\n\t\t}\n\t}\n"])), function (props) {
25
42
  return props.isFocused && "var(--ds-surface-hovered, ".concat(colors.N20, ")");
26
43
  }, "var(--ds-radius-small, 3px)", "var(--ds-space-negative-300, -24px)", "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)", "var(--ds-space-025, 2px)", "var(--ds-space-0, 0px)", "var(--ds-space-025, 2px)", "var(--ds-space-300, 24px)", transition, ButtonWrapper, function (props) {
27
44
  return props.isFocused && 1;
package/dist/types/components/Panel/styledPanel.d.ts CHANGED
@@ -1,8 +1,9 @@
1
- import type { FC, HTMLProps } from 'react';
2
- export declare const PanelWrapper: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
3
- export declare const ButtonWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
1
+ import type { ClassAttributes, DetailedHTMLProps, FC, HTMLAttributes, HTMLProps } from 'react';
2
+ import { type StyledComponentClass } from 'styled-components';
3
+ export declare const PanelWrapper: StyledComponentClass<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
4
+ export declare const ButtonWrapper: StyledComponentClass<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & {
4
5
  isHidden: boolean;
5
- }, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
6
+ }, any, ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & {
6
7
  isHidden: boolean;
7
8
  }>;
8
9
  export declare const PanelHeader: FC<HTMLProps<HTMLDivElement> & {
package/dist/types-ts4.5/components/Panel/styledPanel.d.ts CHANGED
@@ -1,8 +1,9 @@
1
- import type { FC, HTMLProps } from 'react';
2
- export declare const PanelWrapper: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
3
- export declare const ButtonWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
1
+ import type { ClassAttributes, DetailedHTMLProps, FC, HTMLAttributes, HTMLProps } from 'react';
2
+ import { type StyledComponentClass } from 'styled-components';
3
+ export declare const PanelWrapper: StyledComponentClass<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
4
+ export declare const ButtonWrapper: StyledComponentClass<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & {
4
5
  isHidden: boolean;
5
- }, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
6
+ }, any, ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & {
6
7
  isHidden: boolean;
7
8
  }>;
8
9
  export declare const PanelHeader: FC<HTMLProps<HTMLDivElement> & {
package/docs/0-intro.tsx CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
 
3
3
  import { AtlassianInternalWarning, code, Example, md, Props } from '@atlaskit/docs';
4
4
 
5
- export default md`
5
+ const intro: React.ReactElement = md`
6
6
  ${(<AtlassianInternalWarning />)}
7
7
 
8
8
  This panel component is designed hold content and expand and collapse with user interaction. It animates its opening and closing.
@@ -53,3 +53,4 @@ ${(
53
53
  />
54
54
  )}
55
55
  `;
56
+ export default intro;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/panel",
3
- "version": "0.11.22",
3
+ "version": "0.11.24",
4
4
  "description": "A React component rendering a collapsible panel",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -29,13 +29,13 @@
29
29
  },
30
30
  "dependencies": {
31
31
  "@atlaskit/afm-i18n-platform-bitbucket-panel": "2.7.0",
32
- "@atlaskit/button": "^23.5.0",
33
- "@atlaskit/icon": "^28.5.0",
32
+ "@atlaskit/button": "^23.6.0",
33
+ "@atlaskit/icon": "^29.0.0",
34
34
  "@atlaskit/link": "^3.2.0",
35
35
  "@atlaskit/platform-feature-flags": "^1.1.0",
36
- "@atlaskit/primitives": "^16.0.0",
36
+ "@atlaskit/primitives": "^16.1.0",
37
37
  "@atlaskit/theme": "^21.0.0",
38
- "@atlaskit/tokens": "^7.0.0",
38
+ "@atlaskit/tokens": "^8.0.0",
39
39
  "@babel/runtime": "^7.0.0",
40
40
  "react-animate-height": "^2.1.0",
41
41
  "react-focus-within": "^2.0.1",