@synerise/ds-page-header 0.14.91 → 0.14.92

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 (31) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/README.md +2 -1
  3. package/dist/PageHeader.d.ts +3 -38
  4. package/dist/PageHeader.js +22 -49
  5. package/dist/PageHeader.styles.d.ts +0 -6
  6. package/dist/PageHeader.styles.js +6 -39
  7. package/dist/PageHeaderBack/PageHeaderBack.d.ts +4 -0
  8. package/dist/PageHeaderBack/PageHeaderBack.js +20 -0
  9. package/dist/PageHeaderBack/PageHeaderBack.styles.d.ts +1 -0
  10. package/dist/PageHeaderBack/PageHeaderBack.styles.js +7 -0
  11. package/dist/PageHeaderBack/index.d.ts +1 -0
  12. package/dist/PageHeaderBack/index.js +1 -0
  13. package/dist/PageHeaderClamp/PageHeaderClamp.d.ts +4 -0
  14. package/dist/PageHeaderClamp/PageHeaderClamp.js +15 -0
  15. package/dist/PageHeaderClamp/PageHeaderClamp.styles.d.ts +3 -0
  16. package/dist/PageHeaderClamp/PageHeaderClamp.styles.js +20 -0
  17. package/dist/PageHeaderClamp/index.d.ts +1 -0
  18. package/dist/PageHeaderClamp/index.js +1 -0
  19. package/dist/PageHeaderInlineEdit/PageHeaderInlineEdit.d.ts +4 -0
  20. package/dist/PageHeaderInlineEdit/PageHeaderInlineEdit.js +22 -0
  21. package/dist/PageHeaderInlineEdit/PageHeaderInlineEdit.styles.d.ts +1 -0
  22. package/dist/PageHeaderInlineEdit/PageHeaderInlineEdit.styles.js +5 -0
  23. package/dist/PageHeaderInlineEdit/index.d.ts +1 -0
  24. package/dist/PageHeaderInlineEdit/index.js +1 -0
  25. package/dist/PageHeaderRightSide/PageHeaderRightSide.d.ts +4 -0
  26. package/dist/PageHeaderRightSide/PageHeaderRightSide.js +19 -0
  27. package/dist/PageHeaderRightSide/PageHeaderRightSide.styles.d.ts +1 -0
  28. package/dist/PageHeaderRightSide/PageHeaderRightSide.styles.js +5 -0
  29. package/dist/PageHeaderRightSide/index.d.ts +1 -0
  30. package/dist/PageHeaderRightSide/index.js +1 -0
  31. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [0.14.92](https://github.com/synerise/synerise-design/compare/@synerise/ds-page-header@0.14.91...@synerise/ds-page-header@0.14.92) (2024-01-15)
7
+
8
+ **Note:** Version bump only for package @synerise/ds-page-header
9
+
10
+
11
+
12
+
13
+
6
14
  ## [0.14.91](https://github.com/synerise/synerise-design/compare/@synerise/ds-page-header@0.14.90...@synerise/ds-page-header@0.14.91) (2023-12-13)
7
15
 
8
16
  **Note:** Version bump only for package @synerise/ds-page-header
package/README.md CHANGED
@@ -14,10 +14,11 @@ This component could be used as header of page with main title and navigation
14
14
  ## API
15
15
 
16
16
  | Property | Description | Type | Default |
17
- | ----------- | ---------------------------------------- | ------------------------ | ------- |
17
+ | ----------- | ---------------------------------------- | ------------------------ |---------|
18
18
  | avatar | Place for optional avatar component | React.ReactNode | - |
19
19
  | bar | Place for optional node below header | React.ReactNode | - |
20
20
  | className | Class added to the component | string | - |
21
+ | children | The content of the component | React.ReactNode | - |
21
22
  | description | Description of header | React.ReactNode / string | - |
22
23
  | goBackIcon | Custom icon for "go back" button | React.ReactNode | - |
23
24
  | isolated | Add horizontal line to separate content | boolean | `false` |
@@ -1,38 +1,3 @@
1
- import * as React from 'react';
2
- declare const _default: React.ForwardRefExoticComponent<{
3
- title?: React.ReactNode;
4
- className?: string | undefined;
5
- children?: React.ReactNode;
6
- rightSide?: React.ReactNode;
7
- bar?: React.ReactNode;
8
- tabs?: React.ReactNode;
9
- avatar?: React.ReactNode;
10
- description?: React.ReactNode;
11
- more?: React.ReactNode;
12
- onGoBack?: (() => void) | undefined;
13
- goBackIcon?: React.ReactNode;
14
- onClose?: (() => void) | undefined;
15
- isolated?: boolean | undefined;
16
- tooltip?: import("@synerise/ds-tooltip").TooltipProps | undefined;
17
- tooltipIcon?: React.ReactNode;
18
- handleTooltipClick?: (() => void) | undefined;
19
- inlineEdit?: {
20
- name?: string | undefined;
21
- value: string | number;
22
- maxLength?: number | undefined;
23
- handleOnChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
24
- handleOnBlur?: React.FocusEventHandler<HTMLInputElement> | undefined;
25
- handleOnEnterPress?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
26
- placeholder?: string | undefined;
27
- size: "small" | "normal";
28
- style?: {
29
- [key: string]: string | number;
30
- } | undefined;
31
- error?: boolean | undefined;
32
- disabled?: boolean | undefined;
33
- hideIcon?: boolean | undefined;
34
- } | undefined;
35
- } & {
36
- theme?: any;
37
- }>;
38
- export default _default;
1
+ import { PageHeaderProps } from './PageHeader.types';
2
+ declare const PageHeader: (props: PageHeaderProps) => JSX.Element;
3
+ export default PageHeader;
@@ -1,14 +1,13 @@
1
1
  import * as React from 'react';
2
- import { theme } from '@synerise/ds-core';
3
- import InlineEdit from '@synerise/ds-inline-edit/';
4
- import Icon, { CloseM, ArrowLeftM } from '@synerise/ds-icon';
5
- import Button from '@synerise/ds-button/';
6
- import { withTheme } from 'styled-components';
7
- import Tooltip from '@synerise/ds-tooltip';
8
2
  import * as S from './PageHeader.styles';
3
+ import { PageHeaderBack } from './PageHeaderBack';
4
+ import { PageHeaderInlineEdit } from './PageHeaderInlineEdit';
5
+ import { PageHeaderClamp } from './PageHeaderClamp';
6
+ import { PageHeaderRightSide } from './PageHeaderRightSide';
9
7
 
10
8
  var PageHeader = function PageHeader(props) {
11
- var className = props.className,
9
+ var goBackIcon = props.goBackIcon,
10
+ className = props.className,
12
11
  onGoBack = props.onGoBack,
13
12
  onClose = props.onClose,
14
13
  children = props.children,
@@ -21,52 +20,26 @@ var PageHeader = function PageHeader(props) {
21
20
  inlineEdit = props.inlineEdit,
22
21
  more = props.more,
23
22
  avatar = props.avatar,
24
- goBackIcon = props.goBackIcon,
25
23
  tooltip = props.tooltip,
26
24
  tooltipIcon = props.tooltipIcon,
27
25
  handleTooltipClick = props.handleTooltipClick;
28
- var backIcon = goBackIcon || /*#__PURE__*/React.createElement(Icon, {
29
- className: "page-header__back",
30
- color: theme.palette['grey-600'],
31
- component: /*#__PURE__*/React.createElement(ArrowLeftM, null),
32
- size: 24
33
- });
34
26
  return /*#__PURE__*/React.createElement(S.MainContainer, {
35
27
  isolated: isolated,
36
28
  className: (className || '') + " ds-page-header"
37
- }, /*#__PURE__*/React.createElement(S.PageHeaderContainer, null, onGoBack && /*#__PURE__*/React.createElement(S.PageHeaderBack, null, /*#__PURE__*/React.createElement(Button, {
38
- type: "ghost",
39
- mode: "single-icon",
40
- onClick: onGoBack
41
- }, backIcon)), !!avatar && avatar, inlineEdit && /*#__PURE__*/React.createElement(S.PageHeaderInlineEdit, null, /*#__PURE__*/React.createElement(InlineEdit, {
42
- input: {
43
- name: inlineEdit.name,
44
- value: inlineEdit.value,
45
- maxLength: inlineEdit.maxLength,
46
- onChange: inlineEdit.handleOnChange,
47
- onBlur: inlineEdit.handleOnBlur,
48
- onEnterPress: inlineEdit.handleOnEnterPress,
49
- placeholder: inlineEdit.placeholder
50
- },
51
- size: inlineEdit.size,
52
- error: inlineEdit.error,
53
- disabled: inlineEdit.disabled,
54
- hideIcon: inlineEdit.hideIcon,
55
- style: inlineEdit.style
56
- })), /*#__PURE__*/React.createElement(S.PageHeaderClamp, null, /*#__PURE__*/React.createElement(S.PageHeaderTitle, null, children || title), tooltip !== undefined && tooltipIcon && /*#__PURE__*/React.createElement(S.PageHeaderTooltipWraper, null, /*#__PURE__*/React.createElement(Tooltip, tooltip, /*#__PURE__*/React.createElement(Icon, {
57
- component: tooltipIcon,
58
- onClick: handleTooltipClick
59
- })))), !!more && /*#__PURE__*/React.createElement(S.PageHeaderMore, null, more), !!description && /*#__PURE__*/React.createElement(S.PageHeaderDescription, null, description), /*#__PURE__*/React.createElement(S.PageHeaderRightSide, null, /*#__PURE__*/React.createElement("div", null, rightSide && rightSide, onClose && /*#__PURE__*/React.createElement(Button, {
60
- type: "ghost",
61
- mode: "single-icon"
62
- }, /*#__PURE__*/React.createElement(Icon, {
63
- className: "page-header__close",
64
- color: theme.palette['grey-500'],
65
- component: /*#__PURE__*/React.createElement(CloseM, null),
66
- size: 32,
67
- onClick: onClose
68
- }))))), !!tabs && /*#__PURE__*/React.createElement(S.PageHeaderTabsWrapper, null, tabs), !!bar && /*#__PURE__*/React.createElement(S.PageHeaderBar, null, bar));
69
- }; // @ts-ignore
29
+ }, /*#__PURE__*/React.createElement(S.PageHeaderContainer, null, onGoBack && /*#__PURE__*/React.createElement(PageHeaderBack, {
30
+ onGoBack: onGoBack,
31
+ goBackIcon: goBackIcon
32
+ }), !!avatar && avatar, inlineEdit && /*#__PURE__*/React.createElement(PageHeaderInlineEdit, {
33
+ inlineEdit: inlineEdit
34
+ }), /*#__PURE__*/React.createElement(PageHeaderClamp, {
35
+ tooltip: tooltip,
36
+ title: title,
37
+ tooltipIcon: tooltipIcon,
38
+ handleTooltipClick: handleTooltipClick
39
+ }, children), !!more && /*#__PURE__*/React.createElement(S.PageHeaderMore, null, more), !!description && /*#__PURE__*/React.createElement(S.PageHeaderDescription, null, description), /*#__PURE__*/React.createElement(PageHeaderRightSide, {
40
+ onClose: onClose,
41
+ rightSide: rightSide
42
+ })), !!tabs && /*#__PURE__*/React.createElement(S.PageHeaderTabsWrapper, null, tabs), !!bar && /*#__PURE__*/React.createElement(S.PageHeaderBar, null, bar));
43
+ };
70
44
 
71
-
72
- export default withTheme(PageHeader);
45
+ export default PageHeader;
@@ -2,14 +2,8 @@ export declare const MainContainer: import("styled-components").StyledComponent<
2
2
  isolated?: boolean | undefined;
3
3
  }, never>;
4
4
  export declare const PageHeaderContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
5
- export declare const PageHeaderBack: import("styled-components").StyledComponent<"div", any, {}, never>;
6
- export declare const PageHeaderRightSide: import("styled-components").StyledComponent<"div", any, {}, never>;
7
5
  export declare const PageHeaderDescription: import("styled-components").StyledComponent<"div", any, {}, never>;
8
- export declare const PageHeaderClamp: import("styled-components").StyledComponent<"div", any, {}, never>;
9
- export declare const PageHeaderTooltipWraper: import("styled-components").StyledComponent<"div", any, {}, never>;
10
- export declare const PageHeaderTitle: import("styled-components").StyledComponent<"span", any, {}, never>;
11
6
  export declare const PageHeaderTabsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
12
7
  export declare const PageHeaderBar: import("styled-components").StyledComponent<"div", any, {}, never>;
13
8
  export declare const PageHeaderMore: import("styled-components").StyledComponent<"div", any, {}, never>;
14
- export declare const PageHeaderInlineEdit: import("styled-components").StyledComponent<"div", any, {}, never>;
15
9
  export declare const PageHeaderClose: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -1,5 +1,4 @@
1
1
  import styled from 'styled-components';
2
- import { macro } from '@synerise/ds-typography';
3
2
  export var MainContainer = styled.div.withConfig({
4
3
  displayName: "PageHeaderstyles__MainContainer",
5
4
  componentId: "sc-1a87wfx-0"
@@ -10,61 +9,29 @@ export var PageHeaderContainer = styled.div.withConfig({
10
9
  displayName: "PageHeaderstyles__PageHeaderContainer",
11
10
  componentId: "sc-1a87wfx-1"
12
11
  })(["width:100%;min-height:80px;padding:24px;display:flex;align-items:center;align-content:center;"]);
13
- export var PageHeaderBack = styled.div.withConfig({
14
- displayName: "PageHeaderstyles__PageHeaderBack",
15
- componentId: "sc-1a87wfx-2"
16
- })(["margin-right:49px;display:flex;align-items:center;position:relative;&::after{content:'';position:absolute;width:1px;height:40px;right:-25px;background-color:", ";}&&{button{display:flex;align-items:center;padding:0 4px;}}"], function (props) {
17
- return props.theme.palette['grey-300'];
18
- });
19
- export var PageHeaderRightSide = styled.div.withConfig({
20
- displayName: "PageHeaderstyles__PageHeaderRightSide",
21
- componentId: "sc-1a87wfx-3"
22
- })(["display:flex;flex:1 auto;justify-content:flex-end;> div{display:flex;flex:1;justify-content:flex-end;align-items:center;flex-direction:row;> *{margin-left:8px;}}"]);
23
12
  export var PageHeaderDescription = styled.div.withConfig({
24
13
  displayName: "PageHeaderstyles__PageHeaderDescription",
25
- componentId: "sc-1a87wfx-4"
14
+ componentId: "sc-1a87wfx-2"
26
15
  })(["margin:0 24px;font-size:13px;line-height:18px;color:", ";"], function (props) {
27
16
  return props.theme.palette['grey-500'];
28
17
  });
29
- export var PageHeaderClamp = styled.div.withConfig({
30
- displayName: "PageHeaderstyles__PageHeaderClamp",
31
- componentId: "sc-1a87wfx-5"
32
- })(["", ";line-height:26px;display:flex;overflow:hidden;align-items:center;color:", ";align-items:center;"], macro.h600, function (props) {
33
- return props.theme.palette['grey-800'];
34
- });
35
- export var PageHeaderTooltipWraper = styled.div.withConfig({
36
- displayName: "PageHeaderstyles__PageHeaderTooltipWraper",
37
- componentId: "sc-1a87wfx-6"
38
- })([".ds-icon{margin-left:8px;svg{color:", ";fill:", ";}}"], function (props) {
39
- return props.theme.palette['grey-600'];
40
- }, function (props) {
41
- return props.theme.palette['grey-600'];
42
- });
43
- export var PageHeaderTitle = styled.span.withConfig({
44
- displayName: "PageHeaderstyles__PageHeaderTitle",
45
- componentId: "sc-1a87wfx-7"
46
- })(["display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;"]);
47
18
  export var PageHeaderTabsWrapper = styled.div.withConfig({
48
19
  displayName: "PageHeaderstyles__PageHeaderTabsWrapper",
49
- componentId: "sc-1a87wfx-8"
50
- })(["padding:0 24px;&&& .ds-tabs{padding:0px;}"]);
20
+ componentId: "sc-1a87wfx-3"
21
+ })(["padding:0 24px;&&& .ds-tabs{padding:0;}"]);
51
22
  export var PageHeaderBar = styled.div.withConfig({
52
23
  displayName: "PageHeaderstyles__PageHeaderBar",
53
- componentId: "sc-1a87wfx-9"
24
+ componentId: "sc-1a87wfx-4"
54
25
  })(["padding:12px 24px;border-top:1px solid ", ";position:relative;top:-1px;"], function (props) {
55
26
  return props.theme.palette['grey-100'];
56
27
  });
57
28
  export var PageHeaderMore = styled.div.withConfig({
58
29
  displayName: "PageHeaderstyles__PageHeaderMore",
59
- componentId: "sc-1a87wfx-10"
30
+ componentId: "sc-1a87wfx-5"
60
31
  })(["padding:0 24px;"]);
61
- export var PageHeaderInlineEdit = styled.div.withConfig({
62
- displayName: "PageHeaderstyles__PageHeaderInlineEdit",
63
- componentId: "sc-1a87wfx-11"
64
- })(["display:flex;margin-left:14px;"]);
65
32
  export var PageHeaderClose = styled.div.withConfig({
66
33
  displayName: "PageHeaderstyles__PageHeaderClose",
67
- componentId: "sc-1a87wfx-12"
34
+ componentId: "sc-1a87wfx-6"
68
35
  })(["& div{margin-left:52px;display:flex;align-items:center;position:relative;&::before{content:'';position:absolute;width:1px;height:40px;left:-25px;background-color:", ";}}"], function (props) {
69
36
  return props.theme.palette['grey-300'];
70
37
  });
@@ -0,0 +1,4 @@
1
+ import { PageHeaderProps } from 'PageHeader.types';
2
+ type PageHeaderBackProps = Pick<PageHeaderProps, 'goBackIcon' | 'onGoBack'>;
3
+ export declare const PageHeaderBack: ({ goBackIcon, onGoBack }: PageHeaderBackProps) => JSX.Element;
4
+ export {};
@@ -0,0 +1,20 @@
1
+ import React from 'react';
2
+ import { theme } from '@synerise/ds-core';
3
+ import Button from '@synerise/ds-button';
4
+ import Icon, { ArrowLeftM } from '@synerise/ds-icon';
5
+ import * as S from './PageHeaderBack.styles';
6
+ export var PageHeaderBack = function PageHeaderBack(_ref) {
7
+ var goBackIcon = _ref.goBackIcon,
8
+ onGoBack = _ref.onGoBack;
9
+ var backIcon = goBackIcon || /*#__PURE__*/React.createElement(Icon, {
10
+ className: "page-header__back",
11
+ color: theme.palette['grey-600'],
12
+ component: /*#__PURE__*/React.createElement(ArrowLeftM, null),
13
+ size: 24
14
+ });
15
+ return /*#__PURE__*/React.createElement(S.WrapperPageHeaderBack, null, /*#__PURE__*/React.createElement(Button, {
16
+ type: "ghost",
17
+ mode: "single-icon",
18
+ onClick: onGoBack
19
+ }, backIcon));
20
+ };
@@ -0,0 +1 @@
1
+ export declare const WrapperPageHeaderBack: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -0,0 +1,7 @@
1
+ import styled from 'styled-components';
2
+ export var WrapperPageHeaderBack = styled.div.withConfig({
3
+ displayName: "PageHeaderBackstyles__WrapperPageHeaderBack",
4
+ componentId: "sc-107ccyu-0"
5
+ })(["margin-right:49px;display:flex;align-items:center;position:relative;&::after{content:'';position:absolute;width:1px;height:40px;right:-25px;background-color:", ";}&&{button{display:flex;align-items:center;padding:0 4px;}}"], function (props) {
6
+ return props.theme.palette['grey-300'];
7
+ });
@@ -0,0 +1 @@
1
+ export * from './PageHeaderBack';
@@ -0,0 +1 @@
1
+ export * from './PageHeaderBack';
@@ -0,0 +1,4 @@
1
+ import { PageHeaderProps } from '../PageHeader.types';
2
+ type PageHeaderClampProps = Pick<PageHeaderProps, 'tooltip' | 'children' | 'title' | 'tooltipIcon' | 'handleTooltipClick'>;
3
+ export declare const PageHeaderClamp: ({ tooltip, children, title, tooltipIcon, handleTooltipClick, }: PageHeaderClampProps) => JSX.Element;
4
+ export {};
@@ -0,0 +1,15 @@
1
+ import React from 'react';
2
+ import Tooltip from '@synerise/ds-tooltip';
3
+ import Icon from '@synerise/ds-icon';
4
+ import * as S from './PageHeaderClamp.styles';
5
+ export var PageHeaderClamp = function PageHeaderClamp(_ref) {
6
+ var tooltip = _ref.tooltip,
7
+ children = _ref.children,
8
+ title = _ref.title,
9
+ tooltipIcon = _ref.tooltipIcon,
10
+ handleTooltipClick = _ref.handleTooltipClick;
11
+ return /*#__PURE__*/React.createElement(S.WrapperPageHeaderClamp, null, /*#__PURE__*/React.createElement(S.PageHeaderTitle, null, children || title), tooltip !== undefined && tooltipIcon && /*#__PURE__*/React.createElement(S.PageHeaderTooltipWraper, null, /*#__PURE__*/React.createElement(Tooltip, tooltip, /*#__PURE__*/React.createElement(Icon, {
12
+ component: tooltipIcon,
13
+ onClick: handleTooltipClick
14
+ }))));
15
+ };
@@ -0,0 +1,3 @@
1
+ export declare const WrapperPageHeaderClamp: import("styled-components").StyledComponent<"div", any, {}, never>;
2
+ export declare const PageHeaderTitle: import("styled-components").StyledComponent<"span", any, {}, never>;
3
+ export declare const PageHeaderTooltipWraper: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -0,0 +1,20 @@
1
+ import styled from 'styled-components';
2
+ import { macro } from '@synerise/ds-typography';
3
+ export var WrapperPageHeaderClamp = styled.div.withConfig({
4
+ displayName: "PageHeaderClampstyles__WrapperPageHeaderClamp",
5
+ componentId: "at80a6-0"
6
+ })(["", ";line-height:26px;display:flex;overflow:hidden;align-items:center;color:", ";"], macro.h600, function (props) {
7
+ return props.theme.palette['grey-800'];
8
+ });
9
+ export var PageHeaderTitle = styled.span.withConfig({
10
+ displayName: "PageHeaderClampstyles__PageHeaderTitle",
11
+ componentId: "at80a6-1"
12
+ })(["display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;"]);
13
+ export var PageHeaderTooltipWraper = styled.div.withConfig({
14
+ displayName: "PageHeaderClampstyles__PageHeaderTooltipWraper",
15
+ componentId: "at80a6-2"
16
+ })([".ds-icon{margin-left:8px;svg{color:", ";fill:", ";}}"], function (props) {
17
+ return props.theme.palette['grey-600'];
18
+ }, function (props) {
19
+ return props.theme.palette['grey-600'];
20
+ });
@@ -0,0 +1 @@
1
+ export * from './PageHeaderClamp';
@@ -0,0 +1 @@
1
+ export * from './PageHeaderClamp';
@@ -0,0 +1,4 @@
1
+ import type { PageHeaderProps } from '../PageHeader.types';
2
+ type PageHeaderInlineEditProps = Required<Pick<PageHeaderProps, 'inlineEdit'>>;
3
+ export declare const PageHeaderInlineEdit: ({ inlineEdit }: PageHeaderInlineEditProps) => JSX.Element;
4
+ export {};
@@ -0,0 +1,22 @@
1
+ import React from 'react';
2
+ import InlineEdit from '@synerise/ds-inline-edit/';
3
+ import * as S from './PageHeaderInlineEdit.styles';
4
+ export var PageHeaderInlineEdit = function PageHeaderInlineEdit(_ref) {
5
+ var inlineEdit = _ref.inlineEdit;
6
+ return /*#__PURE__*/React.createElement(S.WrapperPageHeaderInlineEdit, null, /*#__PURE__*/React.createElement(InlineEdit, {
7
+ input: {
8
+ name: inlineEdit.name,
9
+ value: inlineEdit.value,
10
+ maxLength: inlineEdit.maxLength,
11
+ onChange: inlineEdit.handleOnChange,
12
+ onBlur: inlineEdit.handleOnBlur,
13
+ onEnterPress: inlineEdit.handleOnEnterPress,
14
+ placeholder: inlineEdit.placeholder
15
+ },
16
+ size: inlineEdit.size,
17
+ error: inlineEdit.error,
18
+ disabled: inlineEdit.disabled,
19
+ hideIcon: inlineEdit.hideIcon,
20
+ style: inlineEdit.style
21
+ }));
22
+ };
@@ -0,0 +1 @@
1
+ export declare const WrapperPageHeaderInlineEdit: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -0,0 +1,5 @@
1
+ import styled from 'styled-components';
2
+ export var WrapperPageHeaderInlineEdit = styled.div.withConfig({
3
+ displayName: "PageHeaderInlineEditstyles__WrapperPageHeaderInlineEdit",
4
+ componentId: "sc-13xsyjb-0"
5
+ })(["display:flex;margin-left:14px;"]);
@@ -0,0 +1 @@
1
+ export * from './PageHeaderInlineEdit';
@@ -0,0 +1 @@
1
+ export * from './PageHeaderInlineEdit';
@@ -0,0 +1,4 @@
1
+ import type { PageHeaderProps } from '../PageHeader.types';
2
+ type PageHeaderRightSideProps = Pick<PageHeaderProps, 'rightSide' | 'onClose' | 'title' | 'tooltipIcon' | 'handleTooltipClick'>;
3
+ export declare const PageHeaderRightSide: ({ rightSide, onClose }: PageHeaderRightSideProps) => JSX.Element;
4
+ export {};
@@ -0,0 +1,19 @@
1
+ import React from 'react';
2
+ import Button from '@synerise/ds-button';
3
+ import Icon, { CloseM } from '@synerise/ds-icon';
4
+ import { theme } from '@synerise/ds-core';
5
+ import * as S from './PageHeaderRightSide.styles';
6
+ export var PageHeaderRightSide = function PageHeaderRightSide(_ref) {
7
+ var rightSide = _ref.rightSide,
8
+ onClose = _ref.onClose;
9
+ return /*#__PURE__*/React.createElement(S.WrapperPageHeaderRightSide, null, /*#__PURE__*/React.createElement("div", null, rightSide && rightSide, onClose && /*#__PURE__*/React.createElement(Button, {
10
+ type: "ghost",
11
+ mode: "single-icon"
12
+ }, /*#__PURE__*/React.createElement(Icon, {
13
+ className: "page-header__close",
14
+ color: theme.palette['grey-500'],
15
+ component: /*#__PURE__*/React.createElement(CloseM, null),
16
+ size: 32,
17
+ onClick: onClose
18
+ }))));
19
+ };
@@ -0,0 +1 @@
1
+ export declare const WrapperPageHeaderRightSide: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -0,0 +1,5 @@
1
+ import styled from 'styled-components';
2
+ export var WrapperPageHeaderRightSide = styled.div.withConfig({
3
+ displayName: "PageHeaderRightSidestyles__WrapperPageHeaderRightSide",
4
+ componentId: "hvehfk-0"
5
+ })(["display:flex;flex:1 auto;justify-content:flex-end;> div{display:flex;flex:1;justify-content:flex-end;align-items:center;flex-direction:row;> *{margin-left:8px;}}"]);
@@ -0,0 +1 @@
1
+ export * from './PageHeaderRightSide';
@@ -0,0 +1 @@
1
+ export * from './PageHeaderRightSide';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-page-header",
3
- "version": "0.14.91",
3
+ "version": "0.14.92",
4
4
  "description": "Page-Header UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "synerise/synerise-design",
@@ -33,10 +33,10 @@
33
33
  ],
34
34
  "types": "dist/index.d.ts",
35
35
  "dependencies": {
36
- "@synerise/ds-button": "^0.18.9",
37
- "@synerise/ds-icon": "^0.58.9",
38
- "@synerise/ds-inline-edit": "^0.6.91",
39
- "@synerise/ds-tooltip": "^0.14.13",
36
+ "@synerise/ds-button": "^0.18.10",
37
+ "@synerise/ds-icon": "^0.59.0",
38
+ "@synerise/ds-inline-edit": "^0.6.92",
39
+ "@synerise/ds-tooltip": "^0.14.14",
40
40
  "@synerise/ds-typography": "^0.14.1",
41
41
  "@synerise/ds-utils": "^0.24.23"
42
42
  },
@@ -50,5 +50,5 @@
50
50
  "@testing-library/react": "10.0.1",
51
51
  "@testing-library/user-event": "^10.3.1"
52
52
  },
53
- "gitHead": "76edb4723a30c59f1a54f666f66fcd814de0af70"
53
+ "gitHead": "ba51e38beff83b8adba409f09311131f429ada01"
54
54
  }