glints-aries 4.1.69 → 4.1.70

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/es/@next/Menu/Menu.d.ts +7 -2
  2. package/es/@next/Menu/Menu.js +20 -5
  3. package/es/@next/Menu/MenuStyle.d.ts +5 -0
  4. package/es/@next/Menu/MenuStyle.js +15 -4
  5. package/lib/@next/Menu/Menu.d.ts +7 -2
  6. package/lib/@next/Menu/Menu.js +19 -4
  7. package/lib/@next/Menu/MenuStyle.d.ts +5 -0
  8. package/lib/@next/Menu/MenuStyle.js +18 -5
  9. package/package.json +1 -1
package/es/@next/Menu/Menu.d.ts CHANGED
@@ -1,13 +1,18 @@
1
1
  import React from 'react';
2
+ import { TooltipPosition } from '../Tooltip/Tooltip';
2
3
  export interface Option {
3
4
  disabled?: boolean;
4
5
  id?: string;
5
6
  label: string | React.ReactNode;
6
7
  sublabel?: React.ReactNode;
7
8
  value: string;
9
+ tooltip?: {
10
+ content: React.ReactNode;
11
+ preferredPosition?: TooltipPosition;
12
+ };
8
13
  }
9
14
  export interface Section {
10
- title?: string;
15
+ title?: string | React.ReactNode;
11
16
  options: Option[];
12
17
  }
13
18
  export interface MenuProps {
@@ -18,7 +23,7 @@ export interface MenuProps {
18
23
  options?: Option[];
19
24
  /** Selected value based on Option.value */
20
25
  selectedValues?: string[];
21
- title?: string;
26
+ title?: string | React.ReactNode;
22
27
  allowMultiple?: boolean;
23
28
  sections?: Section[];
24
29
  }
package/es/@next/Menu/Menu.js CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import nextId from 'react-id-generator';
3
3
  import { Typography } from '../Typography';
4
4
  import { Neutral } from '../utilities/colors';
5
- import { StyledMenu, StyledSections, TitleContainer } from './MenuStyle';
5
+ import { StyledMenu, StyledSections, StyledTooltip, TitleContainer, TitleNodeContainer } from './MenuStyle';
6
6
  import { MenuOptionLabel } from './components/MenuOptionLabel';
7
7
  import { MenuOption } from './components/MenuOption';
8
8
  import { MenuOptionCheckbox } from './components/MenuOptionCheckbox';
@@ -18,6 +18,9 @@ export var Menu = function Menu(_ref) {
18
18
  var menuId = id ? id : randomId;
19
19
  var renderTitle = function renderTitle(_ref2) {
20
20
  var title = _ref2.title;
21
+ if ( /*#__PURE__*/React.isValidElement(title)) {
22
+ return /*#__PURE__*/React.createElement(TitleNodeContainer, null, title);
23
+ }
21
24
  return /*#__PURE__*/React.createElement(TitleContainer, null, /*#__PURE__*/React.createElement(Typography, {
22
25
  variant: "subtitle2",
23
26
  as: "span",
@@ -27,15 +30,17 @@ export var Menu = function Menu(_ref) {
27
30
  var renderOptions = function renderOptions(_ref3) {
28
31
  var options = _ref3.options;
29
32
  return /*#__PURE__*/React.createElement(StyledMenu, null, options == null ? void 0 : options.map(function (option) {
33
+ var _tooltip$preferredPos;
30
34
  var value = option.value,
31
35
  label = option.label,
32
36
  sublabel = option.sublabel,
33
37
  disabled = option.disabled,
34
- id = option.id;
38
+ id = option.id,
39
+ tooltip = option.tooltip;
35
40
  var randomId = nextId('glints-menu-option');
36
41
  var menuOptionId = id ? id : randomId;
37
42
  var isSelected = selectedValues == null ? void 0 : selectedValues.includes(value);
38
- return /*#__PURE__*/React.createElement(MenuOption, {
43
+ var menuOption = /*#__PURE__*/React.createElement(MenuOption, {
39
44
  key: menuOptionId,
40
45
  value: value,
41
46
  disabled: disabled,
@@ -46,19 +51,25 @@ export var Menu = function Menu(_ref) {
46
51
  label: label,
47
52
  sublabel: sublabel
48
53
  }));
54
+ return tooltip ? /*#__PURE__*/React.createElement(StyledTooltip, {
55
+ content: tooltip.content,
56
+ preferredPosition: (_tooltip$preferredPos = tooltip.preferredPosition) != null ? _tooltip$preferredPos : 'left-middle'
57
+ }, menuOption) : menuOption;
49
58
  }));
50
59
  };
51
60
  var renderOptionsWithCheckbox = function renderOptionsWithCheckbox(_ref4) {
52
61
  var options = _ref4.options;
53
62
  return /*#__PURE__*/React.createElement(StyledMenu, null, options == null ? void 0 : options.map(function (option) {
63
+ var _tooltip$preferredPos2;
54
64
  var value = option.value,
55
65
  label = option.label,
56
66
  disabled = option.disabled,
57
- id = option.id;
67
+ id = option.id,
68
+ tooltip = option.tooltip;
58
69
  var randomId = nextId('glints-menu-option');
59
70
  var menuOptionId = id ? id : randomId;
60
71
  var isSelected = selectedValues == null ? void 0 : selectedValues.includes(value);
61
- return /*#__PURE__*/React.createElement(MenuOption, {
72
+ var menuOption = /*#__PURE__*/React.createElement(MenuOption, {
62
73
  key: menuOptionId,
63
74
  value: value,
64
75
  disabled: disabled,
@@ -70,6 +81,10 @@ export var Menu = function Menu(_ref) {
70
81
  disabled: disabled,
71
82
  label: label
72
83
  }));
84
+ return tooltip ? /*#__PURE__*/React.createElement(StyledTooltip, {
85
+ content: tooltip.content,
86
+ preferredPosition: (_tooltip$preferredPos2 = tooltip.preferredPosition) != null ? _tooltip$preferredPos2 : 'left-middle'
87
+ }, menuOption) : menuOption;
73
88
  }));
74
89
  };
75
90
  var renderSections = function renderSections(_ref5) {
package/es/@next/Menu/MenuStyle.d.ts CHANGED
@@ -1,6 +1,11 @@
1
+ /// <reference types="react" />
1
2
  import { MenuProps } from './Menu';
2
3
  export declare const StyledMenu: import("styled-components").StyledComponent<"ul", any, MenuProps, never>;
4
+ export declare const StyledTooltip: import("styled-components").StyledComponent<({ children, content, preferredPosition, zIndex, clickable, timeout, onClick, tooltipClassName, ...props }: import("../Tooltip/Tooltip").TooltipProps) => JSX.Element, any, {
5
+ zIndex: 500;
6
+ }, "zIndex">;
3
7
  export declare const TitleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
8
+ export declare const TitleNodeContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
4
9
  export declare const ListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
5
10
  export declare const List: import("styled-components").StyledComponent<"li", any, {}, never>;
6
11
  export declare const StyledSections: import("styled-components").StyledComponent<"ul", any, {}, never>;
package/es/@next/Menu/MenuStyle.js CHANGED
@@ -2,23 +2,34 @@ import styled from 'styled-components';
2
2
  import { borderRadius4 } from '../utilities/borderRadius';
3
3
  import { Blue, Neutral } from '../utilities/colors';
4
4
  import { space16, space4, space8 } from '../utilities/spacing';
5
+ import { Tooltip } from '../Tooltip/Tooltip';
5
6
  export var StyledMenu = styled.ul.withConfig({
6
7
  displayName: "MenuStyle__StyledMenu",
7
8
  componentId: "sc-zm0l1a-0"
8
9
  })(["list-style:none;padding:0;margin:0;li{display:flex;min-height:44px;position:relative;align-items:center;padding:0 ", ";margin-bottom:", ";svg{height:24px;width:24px;}&:hover{background:", ";border-radius:", ";cursor:pointer;}&:focus{outline:none;background:rgba(255,255,255,0.001);border:2px solid ", ";border-radius:", ";}&[aria-disabled='true']{cursor:default;pointer-events:none;span{color:", ";}}&[data-active='true']{background:", ";border-radius:", ";cursor:default;::before{content:'';display:block;position:absolute;top:0;left:-", ";height:44px;width:3px;background-color:", ";border-radius:0px 4px 4px 0px;}&[data-multiple='true']{background:", ";::before{content:none;}}}}"], space8, space4, Neutral.B99, borderRadius4, Blue.S54, space4, Neutral.B85, Blue.S08, borderRadius4, space8, Blue.S99, Neutral.B100);
10
+ export var StyledTooltip = styled(Tooltip).attrs({
11
+ zIndex: 500
12
+ }).withConfig({
13
+ displayName: "MenuStyle__StyledTooltip",
14
+ componentId: "sc-zm0l1a-1"
15
+ })(["display:block;width:100%;"]);
9
16
  export var TitleContainer = styled.div.withConfig({
10
17
  displayName: "MenuStyle__TitleContainer",
11
- componentId: "sc-zm0l1a-1"
18
+ componentId: "sc-zm0l1a-2"
12
19
  })(["margin:", " 0 ", ";padding:", " ", ";span{text-transform:uppercase;}"], space8, space4, space8, space16);
20
+ export var TitleNodeContainer = styled.div.withConfig({
21
+ displayName: "MenuStyle__TitleNodeContainer",
22
+ componentId: "sc-zm0l1a-3"
23
+ })(["margin:", " 0 ", ";"], space8, space4);
13
24
  export var ListContainer = styled.div.withConfig({
14
25
  displayName: "MenuStyle__ListContainer",
15
- componentId: "sc-zm0l1a-2"
26
+ componentId: "sc-zm0l1a-4"
16
27
  })(["padding:0 ", ";"], space8);
17
28
  export var List = styled.li.withConfig({
18
29
  displayName: "MenuStyle__List",
19
- componentId: "sc-zm0l1a-3"
30
+ componentId: "sc-zm0l1a-5"
20
31
  })(["height:max-content;span{overflow:hidden;width:100%;}"]);
21
32
  export var StyledSections = styled.ul.withConfig({
22
33
  displayName: "MenuStyle__StyledSections",
23
- componentId: "sc-zm0l1a-4"
34
+ componentId: "sc-zm0l1a-6"
24
35
  })(["list-style:none;padding:0;margin:", " 0;"], space8);
package/lib/@next/Menu/Menu.d.ts CHANGED
@@ -1,13 +1,18 @@
1
1
  import React from 'react';
2
+ import { TooltipPosition } from '../Tooltip/Tooltip';
2
3
  export interface Option {
3
4
  disabled?: boolean;
4
5
  id?: string;
5
6
  label: string | React.ReactNode;
6
7
  sublabel?: React.ReactNode;
7
8
  value: string;
9
+ tooltip?: {
10
+ content: React.ReactNode;
11
+ preferredPosition?: TooltipPosition;
12
+ };
8
13
  }
9
14
  export interface Section {
10
- title?: string;
15
+ title?: string | React.ReactNode;
11
16
  options: Option[];
12
17
  }
13
18
  export interface MenuProps {
@@ -18,7 +23,7 @@ export interface MenuProps {
18
23
  options?: Option[];
19
24
  /** Selected value based on Option.value */
20
25
  selectedValues?: string[];
21
- title?: string;
26
+ title?: string | React.ReactNode;
22
27
  allowMultiple?: boolean;
23
28
  sections?: Section[];
24
29
  }
package/lib/@next/Menu/Menu.js CHANGED
@@ -23,6 +23,9 @@ var Menu = function Menu(_ref) {
23
23
  var menuId = id ? id : randomId;
24
24
  var renderTitle = function renderTitle(_ref2) {
25
25
  var title = _ref2.title;
26
+ if ( /*#__PURE__*/_react["default"].isValidElement(title)) {
27
+ return /*#__PURE__*/_react["default"].createElement(_MenuStyle.TitleNodeContainer, null, title);
28
+ }
26
29
  return /*#__PURE__*/_react["default"].createElement(_MenuStyle.TitleContainer, null, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
27
30
  variant: "subtitle2",
28
31
  as: "span",
@@ -32,15 +35,17 @@ var Menu = function Menu(_ref) {
32
35
  var renderOptions = function renderOptions(_ref3) {
33
36
  var options = _ref3.options;
34
37
  return /*#__PURE__*/_react["default"].createElement(_MenuStyle.StyledMenu, null, options == null ? void 0 : options.map(function (option) {
38
+ var _tooltip$preferredPos;
35
39
  var value = option.value,
36
40
  label = option.label,
37
41
  sublabel = option.sublabel,
38
42
  disabled = option.disabled,
39
- id = option.id;
43
+ id = option.id,
44
+ tooltip = option.tooltip;
40
45
  var randomId = (0, _reactIdGenerator["default"])('glints-menu-option');
41
46
  var menuOptionId = id ? id : randomId;
42
47
  var isSelected = selectedValues == null ? void 0 : selectedValues.includes(value);
43
- return /*#__PURE__*/_react["default"].createElement(_MenuOption.MenuOption, {
48
+ var menuOption = /*#__PURE__*/_react["default"].createElement(_MenuOption.MenuOption, {
44
49
  key: menuOptionId,
45
50
  value: value,
46
51
  disabled: disabled,
@@ -51,19 +56,25 @@ var Menu = function Menu(_ref) {
51
56
  label: label,
52
57
  sublabel: sublabel
53
58
  }));
59
+ return tooltip ? /*#__PURE__*/_react["default"].createElement(_MenuStyle.StyledTooltip, {
60
+ content: tooltip.content,
61
+ preferredPosition: (_tooltip$preferredPos = tooltip.preferredPosition) != null ? _tooltip$preferredPos : 'left-middle'
62
+ }, menuOption) : menuOption;
54
63
  }));
55
64
  };
56
65
  var renderOptionsWithCheckbox = function renderOptionsWithCheckbox(_ref4) {
57
66
  var options = _ref4.options;
58
67
  return /*#__PURE__*/_react["default"].createElement(_MenuStyle.StyledMenu, null, options == null ? void 0 : options.map(function (option) {
68
+ var _tooltip$preferredPos2;
59
69
  var value = option.value,
60
70
  label = option.label,
61
71
  disabled = option.disabled,
62
- id = option.id;
72
+ id = option.id,
73
+ tooltip = option.tooltip;
63
74
  var randomId = (0, _reactIdGenerator["default"])('glints-menu-option');
64
75
  var menuOptionId = id ? id : randomId;
65
76
  var isSelected = selectedValues == null ? void 0 : selectedValues.includes(value);
66
- return /*#__PURE__*/_react["default"].createElement(_MenuOption.MenuOption, {
77
+ var menuOption = /*#__PURE__*/_react["default"].createElement(_MenuOption.MenuOption, {
67
78
  key: menuOptionId,
68
79
  value: value,
69
80
  disabled: disabled,
@@ -75,6 +86,10 @@ var Menu = function Menu(_ref) {
75
86
  disabled: disabled,
76
87
  label: label
77
88
  }));
89
+ return tooltip ? /*#__PURE__*/_react["default"].createElement(_MenuStyle.StyledTooltip, {
90
+ content: tooltip.content,
91
+ preferredPosition: (_tooltip$preferredPos2 = tooltip.preferredPosition) != null ? _tooltip$preferredPos2 : 'left-middle'
92
+ }, menuOption) : menuOption;
78
93
  }));
79
94
  };
80
95
  var renderSections = function renderSections(_ref5) {
package/lib/@next/Menu/MenuStyle.d.ts CHANGED
@@ -1,6 +1,11 @@
1
+ /// <reference types="react" />
1
2
  import { MenuProps } from './Menu';
2
3
  export declare const StyledMenu: import("styled-components").StyledComponent<"ul", any, MenuProps, never>;
4
+ export declare const StyledTooltip: import("styled-components").StyledComponent<({ children, content, preferredPosition, zIndex, clickable, timeout, onClick, tooltipClassName, ...props }: import("../Tooltip/Tooltip").TooltipProps) => JSX.Element, any, {
5
+ zIndex: 500;
6
+ }, "zIndex">;
3
7
  export declare const TitleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
8
+ export declare const TitleNodeContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
4
9
  export declare const ListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
5
10
  export declare const List: import("styled-components").StyledComponent<"li", any, {}, never>;
6
11
  export declare const StyledSections: import("styled-components").StyledComponent<"ul", any, {}, never>;
package/lib/@next/Menu/MenuStyle.js CHANGED
@@ -2,33 +2,46 @@
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
4
  exports.__esModule = true;
5
- exports.TitleContainer = exports.StyledSections = exports.StyledMenu = exports.ListContainer = exports.List = void 0;
5
+ exports.TitleNodeContainer = exports.TitleContainer = exports.StyledTooltip = exports.StyledSections = exports.StyledMenu = exports.ListContainer = exports.List = void 0;
6
6
  var _styledComponents = _interopRequireDefault(require("styled-components"));
7
7
  var _borderRadius = require("../utilities/borderRadius");
8
8
  var _colors = require("../utilities/colors");
9
9
  var _spacing = require("../utilities/spacing");
10
+ var _Tooltip = require("../Tooltip/Tooltip");
10
11
  var StyledMenu = _styledComponents["default"].ul.withConfig({
11
12
  displayName: "MenuStyle__StyledMenu",
12
13
  componentId: "sc-zm0l1a-0"
13
14
  })(["list-style:none;padding:0;margin:0;li{display:flex;min-height:44px;position:relative;align-items:center;padding:0 ", ";margin-bottom:", ";svg{height:24px;width:24px;}&:hover{background:", ";border-radius:", ";cursor:pointer;}&:focus{outline:none;background:rgba(255,255,255,0.001);border:2px solid ", ";border-radius:", ";}&[aria-disabled='true']{cursor:default;pointer-events:none;span{color:", ";}}&[data-active='true']{background:", ";border-radius:", ";cursor:default;::before{content:'';display:block;position:absolute;top:0;left:-", ";height:44px;width:3px;background-color:", ";border-radius:0px 4px 4px 0px;}&[data-multiple='true']{background:", ";::before{content:none;}}}}"], _spacing.space8, _spacing.space4, _colors.Neutral.B99, _borderRadius.borderRadius4, _colors.Blue.S54, _spacing.space4, _colors.Neutral.B85, _colors.Blue.S08, _borderRadius.borderRadius4, _spacing.space8, _colors.Blue.S99, _colors.Neutral.B100);
14
15
  exports.StyledMenu = StyledMenu;
16
+ var StyledTooltip = (0, _styledComponents["default"])(_Tooltip.Tooltip).attrs({
17
+ zIndex: 500
18
+ }).withConfig({
19
+ displayName: "MenuStyle__StyledTooltip",
20
+ componentId: "sc-zm0l1a-1"
21
+ })(["display:block;width:100%;"]);
22
+ exports.StyledTooltip = StyledTooltip;
15
23
  var TitleContainer = _styledComponents["default"].div.withConfig({
16
24
  displayName: "MenuStyle__TitleContainer",
17
- componentId: "sc-zm0l1a-1"
25
+ componentId: "sc-zm0l1a-2"
18
26
  })(["margin:", " 0 ", ";padding:", " ", ";span{text-transform:uppercase;}"], _spacing.space8, _spacing.space4, _spacing.space8, _spacing.space16);
19
27
  exports.TitleContainer = TitleContainer;
28
+ var TitleNodeContainer = _styledComponents["default"].div.withConfig({
29
+ displayName: "MenuStyle__TitleNodeContainer",
30
+ componentId: "sc-zm0l1a-3"
31
+ })(["margin:", " 0 ", ";"], _spacing.space8, _spacing.space4);
32
+ exports.TitleNodeContainer = TitleNodeContainer;
20
33
  var ListContainer = _styledComponents["default"].div.withConfig({
21
34
  displayName: "MenuStyle__ListContainer",
22
- componentId: "sc-zm0l1a-2"
35
+ componentId: "sc-zm0l1a-4"
23
36
  })(["padding:0 ", ";"], _spacing.space8);
24
37
  exports.ListContainer = ListContainer;
25
38
  var List = _styledComponents["default"].li.withConfig({
26
39
  displayName: "MenuStyle__List",
27
- componentId: "sc-zm0l1a-3"
40
+ componentId: "sc-zm0l1a-5"
28
41
  })(["height:max-content;span{overflow:hidden;width:100%;}"]);
29
42
  exports.List = List;
30
43
  var StyledSections = _styledComponents["default"].ul.withConfig({
31
44
  displayName: "MenuStyle__StyledSections",
32
- componentId: "sc-zm0l1a-4"
45
+ componentId: "sc-zm0l1a-6"
33
46
  })(["list-style:none;padding:0;margin:", " 0;"], _spacing.space8);
34
47
  exports.StyledSections = StyledSections;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "glints-aries",
3
- "version": "4.1.69",
3
+ "version": "4.1.70",
4
4
  "description": "Glints ui-kit for frontend",
5
5
  "main": "./lib/index.js",
6
6
  "module": "./es/index.js",