glints-aries 4.0.383 → 4.0.384

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.
@@ -3,6 +3,7 @@ export interface Option {
3
3
  disabled?: boolean;
4
4
  id?: string;
5
5
  label: string | React.ReactNode;
6
+ sublabel?: React.ReactNode;
6
7
  value: string;
7
8
  }
8
9
  export interface Section {
@@ -29,6 +29,7 @@ export var Menu = function Menu(_ref) {
29
29
  return /*#__PURE__*/React.createElement(StyledMenu, null, options == null ? void 0 : options.map(function (option) {
30
30
  var value = option.value,
31
31
  label = option.label,
32
+ sublabel = option.sublabel,
32
33
  disabled = option.disabled,
33
34
  id = option.id;
34
35
  var randomId = nextId('glints-menu-option');
@@ -42,7 +43,8 @@ export var Menu = function Menu(_ref) {
42
43
  onClick: onClick,
43
44
  allowMultiple: allowMultiple
44
45
  }, /*#__PURE__*/React.createElement(MenuOptionLabel, {
45
- label: label
46
+ label: label,
47
+ sublabel: sublabel
46
48
  }));
47
49
  }));
48
50
  };
@@ -1,4 +1,7 @@
1
1
  import React from 'react';
2
- export declare const MenuOptionLabel: ({ label }: {
2
+ interface MenuOptionLabelProps {
3
3
  label: React.ReactNode;
4
- }) => JSX.Element;
4
+ sublabel?: React.ReactNode;
5
+ }
6
+ export declare const MenuOptionLabel: ({ label, sublabel }: MenuOptionLabelProps) => JSX.Element;
7
+ export {};
@@ -1,11 +1,24 @@
1
1
  import React from 'react';
2
2
  import { Typography } from '../../Typography';
3
3
  import { Neutral } from '../../utilities/colors';
4
+ import { MenuOptionLabelContainer } from './MenuOptionLabelStyle';
4
5
  export var MenuOptionLabel = function MenuOptionLabel(_ref) {
5
- var label = _ref.label;
6
- return /*#__PURE__*/React.createElement(Typography, {
6
+ var label = _ref.label,
7
+ sublabel = _ref.sublabel;
8
+ if (!sublabel) {
9
+ return /*#__PURE__*/React.createElement(Typography, {
10
+ as: "span",
11
+ variant: "body1",
12
+ color: Neutral.B18
13
+ }, label);
14
+ }
15
+ return /*#__PURE__*/React.createElement(MenuOptionLabelContainer, null, /*#__PURE__*/React.createElement(Typography, {
7
16
  as: "span",
8
17
  variant: "body1",
9
18
  color: Neutral.B18
10
- }, label);
19
+ }, label), /*#__PURE__*/React.createElement(Typography, {
20
+ as: "span",
21
+ variant: "subtitle2",
22
+ color: Neutral.B40
23
+ }, sublabel));
11
24
  };
@@ -0,0 +1,3 @@
1
+ export declare const MenuOptionLabelContainer: import("styled-components").StyledComponent<"div", any, {
2
+ sublabel?: React.ReactNode;
3
+ }, never>;
@@ -0,0 +1,5 @@
1
+ import styled from 'styled-components';
2
+ export var MenuOptionLabelContainer = styled.div.withConfig({
3
+ displayName: "MenuOptionLabelStyle__MenuOptionLabelContainer",
4
+ componentId: "sc-oryr0t-0"
5
+ })(["display:flex;flex-direction:column;align-items:center;padding:4px 0;"]);
@@ -17,3 +17,4 @@ export declare const MultiSelectScrollable: any;
17
17
  export declare const WithInlineError: any;
18
18
  export declare const SearchableDisabled: any;
19
19
  export declare const WithCustomPrefix: any;
20
+ export declare const OptionsWithSublabel: any;
@@ -3,6 +3,7 @@ export interface Option {
3
3
  disabled?: boolean;
4
4
  id?: string;
5
5
  label: string | React.ReactNode;
6
+ sublabel?: React.ReactNode;
6
7
  value: string;
7
8
  }
8
9
  export interface Section {
@@ -34,6 +34,7 @@ var Menu = function Menu(_ref) {
34
34
  return /*#__PURE__*/_react["default"].createElement(_MenuStyle.StyledMenu, null, options == null ? void 0 : options.map(function (option) {
35
35
  var value = option.value,
36
36
  label = option.label,
37
+ sublabel = option.sublabel,
37
38
  disabled = option.disabled,
38
39
  id = option.id;
39
40
  var randomId = (0, _reactIdGenerator["default"])('glints-menu-option');
@@ -47,7 +48,8 @@ var Menu = function Menu(_ref) {
47
48
  onClick: onClick,
48
49
  allowMultiple: allowMultiple
49
50
  }, /*#__PURE__*/_react["default"].createElement(_MenuOptionLabel.MenuOptionLabel, {
50
- label: label
51
+ label: label,
52
+ sublabel: sublabel
51
53
  }));
52
54
  }));
53
55
  };
@@ -1,4 +1,7 @@
1
1
  import React from 'react';
2
- export declare const MenuOptionLabel: ({ label }: {
2
+ interface MenuOptionLabelProps {
3
3
  label: React.ReactNode;
4
- }) => JSX.Element;
4
+ sublabel?: React.ReactNode;
5
+ }
6
+ export declare const MenuOptionLabel: ({ label, sublabel }: MenuOptionLabelProps) => JSX.Element;
7
+ export {};
@@ -6,12 +6,25 @@ exports.MenuOptionLabel = void 0;
6
6
  var _react = _interopRequireDefault(require("react"));
7
7
  var _Typography = require("../../Typography");
8
8
  var _colors = require("../../utilities/colors");
9
+ var _MenuOptionLabelStyle = require("./MenuOptionLabelStyle");
9
10
  var MenuOptionLabel = function MenuOptionLabel(_ref) {
10
- var label = _ref.label;
11
- return /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
11
+ var label = _ref.label,
12
+ sublabel = _ref.sublabel;
13
+ if (!sublabel) {
14
+ return /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
15
+ as: "span",
16
+ variant: "body1",
17
+ color: _colors.Neutral.B18
18
+ }, label);
19
+ }
20
+ return /*#__PURE__*/_react["default"].createElement(_MenuOptionLabelStyle.MenuOptionLabelContainer, null, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
12
21
  as: "span",
13
22
  variant: "body1",
14
23
  color: _colors.Neutral.B18
15
- }, label);
24
+ }, label), /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
25
+ as: "span",
26
+ variant: "subtitle2",
27
+ color: _colors.Neutral.B40
28
+ }, sublabel));
16
29
  };
17
30
  exports.MenuOptionLabel = MenuOptionLabel;
@@ -0,0 +1,3 @@
1
+ export declare const MenuOptionLabelContainer: import("styled-components").StyledComponent<"div", any, {
2
+ sublabel?: React.ReactNode;
3
+ }, never>;
@@ -0,0 +1,11 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ exports.__esModule = true;
5
+ exports.MenuOptionLabelContainer = void 0;
6
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
7
+ var MenuOptionLabelContainer = _styledComponents["default"].div.withConfig({
8
+ displayName: "MenuOptionLabelStyle__MenuOptionLabelContainer",
9
+ componentId: "sc-oryr0t-0"
10
+ })(["display:flex;flex-direction:column;align-items:center;padding:4px 0;"]);
11
+ exports.MenuOptionLabelContainer = MenuOptionLabelContainer;
@@ -17,3 +17,4 @@ export declare const MultiSelectScrollable: any;
17
17
  export declare const WithInlineError: any;
18
18
  export declare const SearchableDisabled: any;
19
19
  export declare const WithCustomPrefix: any;
20
+ export declare const OptionsWithSublabel: any;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "glints-aries",
3
- "version": "4.0.383",
3
+ "version": "4.0.384",
4
4
  "description": "Glints ui-kit for frontend",
5
5
  "main": "./lib/index.js",
6
6
  "module": "./es/index.js",