@decisiv/ui-components 2.0.1-alpha.182 → 2.0.1-alpha.183

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.
@@ -1,4 +1,4 @@
1
1
  /// <reference types="react" />
2
- declare const Category: ({ borderRadius, label, items, showCheckbox, }: import("./types").Category) => JSX.Element;
2
+ declare const Category: ({ borderRadius, label, items, showCheckbox, size, }: import("../types").Category) => JSX.Element;
3
3
  export default Category;
4
- //# sourceMappingURL=Category.d.ts.map
4
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/atoms/OptionsList/Category/index.tsx"],"names":[],"mappings":";AAOA,QAAA,MAAM,QAAQ,mGA2Bb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
@@ -5,46 +5,36 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = void 0;
7
7
 
8
- var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
9
-
10
8
  var _react = _interopRequireWildcard(require("react"));
11
9
 
12
- var _styledComponents = _interopRequireDefault(require("styled-components"));
13
-
14
- var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
10
+ var _Option = _interopRequireDefault(require("../Option"));
15
11
 
16
- var _designTokens = require("@decisiv/design-tokens");
12
+ var _utils = require("../utils");
17
13
 
18
- var _Option = _interopRequireDefault(require("./Option"));
14
+ var _styles = require("./styles");
19
15
 
20
- var _utils = require("./utils");
16
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
17
 
22
18
  function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
23
19
 
24
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
25
-
26
20
  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
27
21
 
28
- var StyledCategory = _styledComponents.default.li.attrs({
29
- role: 'option',
30
- 'aria-disabled': true
31
- }).withConfig({
32
- displayName: "Category__StyledCategory",
33
- componentId: "sc-1kvf2r-0"
34
- })(["color:", ";font-size:", ";font-weight:", ";cursor:default;text-transform:uppercase;line-height:1.4;text-align:left;padding:", ";border-top:", " solid ", ";"], (0, _toColorString.default)(_designTokens.color.base.charcoal), (0, _rem.default)(_designTokens.typography.size.alias.paragraph2), _designTokens.typography.weight.alias.semibold, "".concat((0, _rem.default)(15), " ").concat((0, _rem.default)(30), " ").concat((0, _rem.default)(7), " ").concat((0, _rem.default)(10)), (0, _rem.default)(1), (0, _toColorString.default)(_designTokens.color.base.quarterMoon));
35
-
36
22
  var Category = function Category(_ref) {
37
23
  var borderRadius = _ref.borderRadius,
38
24
  label = _ref.label,
39
25
  items = _ref.items,
40
- showCheckbox = _ref.showCheckbox;
41
- return _react.default.createElement(_react.Fragment, null, _react.default.createElement(StyledCategory, null, label), items.map(function (subItem) {
26
+ showCheckbox = _ref.showCheckbox,
27
+ size = _ref.size;
28
+ return _react.default.createElement(_react.Fragment, null, _react.default.createElement(_styles.StyledCategory, {
29
+ size: size
30
+ }, label), items.map(function (subItem) {
42
31
  var id = (0, _utils.getId)(subItem);
43
32
  return _react.default.createElement(_Option.default, _extends({}, subItem, {
44
33
  key: id,
45
34
  id: id,
46
35
  borderRadius: borderRadius,
47
- showCheckbox: showCheckbox
36
+ showCheckbox: showCheckbox,
37
+ size: size
48
38
  }));
49
39
  }));
50
40
  };
@@ -0,0 +1,6 @@
1
+ import { StyledCategoryProps } from '../types';
2
+ export declare const StyledCategory: import("styled-components").StyledComponent<"li", any, {
3
+ role: "option";
4
+ 'aria-disabled': true;
5
+ } & StyledCategoryProps, "role" | "aria-disabled">;
6
+ //# sourceMappingURL=styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/atoms/OptionsList/Category/styles.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAmB/C,eAAO,MAAM,cAAc;;;kDAa1B,CAAC"}
@@ -0,0 +1,36 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.StyledCategory = void 0;
7
+
8
+ var _styledComponents = _interopRequireWildcard(require("styled-components"));
9
+
10
+ var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
11
+
12
+ var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
13
+
14
+ var _designTokens = require("@decisiv/design-tokens");
15
+
16
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
+
18
+ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
19
+
20
+ /* eslint-disable import/prefer-default-export */
21
+ var withCategorySizeModifiers = function withCategorySizeModifiers(props) {
22
+ var _props$size = props.size,
23
+ size = _props$size === void 0 ? 'small' : _props$size;
24
+ if (size === 'medium') return (0, _styledComponents.css)(["font-size:", ";padding:", ";"], (0, _rem.default)(_designTokens.typography.size.alias.paragraph), "".concat((0, _rem.default)(15), " ").concat((0, _rem.default)(30), " ").concat((0, _rem.default)(10), " ").concat((0, _rem.default)(10)));
25
+ return (0, _styledComponents.css)(["font-size:", ";padding:", ";"], (0, _rem.default)(_designTokens.typography.size.alias.paragraph2), "".concat((0, _rem.default)(15), " ").concat((0, _rem.default)(30), " ").concat((0, _rem.default)(7), " ").concat((0, _rem.default)(10)));
26
+ };
27
+
28
+ var StyledCategory = _styledComponents.default.li.attrs({
29
+ role: 'option',
30
+ 'aria-disabled': true
31
+ }).withConfig({
32
+ displayName: "styles__StyledCategory",
33
+ componentId: "sc-17ahmuu-0"
34
+ })(["color:", ";cursor:default;text-transform:uppercase;line-height:1.4;text-align:left;border-top:", " solid ", ";font-weight:", ";", ""], (0, _toColorString.default)(_designTokens.color.base.charcoal), (0, _rem.default)(1), (0, _toColorString.default)(_designTokens.color.base.quarterMoon), _designTokens.typography.weight.alias.semibold, withCategorySizeModifiers);
35
+
36
+ exports.StyledCategory = StyledCategory;
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
- import { OptionProps } from './types';
2
+ import { OptionProps } from '../types';
3
3
  declare function Option(props: OptionProps): JSX.Element;
4
4
  declare const _default: React.MemoExoticComponent<typeof Option>;
5
5
  export default _default;
6
- //# sourceMappingURL=Option.d.ts.map
6
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/atoms/OptionsList/Option/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAC/D,OAAO,EACL,WAAW,EAKZ,MAAM,UAAU,CAAC;AA4DlB,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAwH/C;;AAED,wBAAkC"}
@@ -5,35 +5,21 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = void 0;
7
7
 
8
- var _color = _interopRequireDefault(require("@decisiv/design-tokens/lib/color"));
9
-
10
8
  var _get = _interopRequireDefault(require("lodash/get"));
11
9
 
12
- var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
13
-
14
- var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
15
-
16
10
  var _react = _interopRequireWildcard(require("react"));
17
11
 
18
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
19
-
20
- var _focusRingWithColor = _interopRequireDefault(require("../../utils/focusRingWithColor"));
21
-
22
- var _styleModifiers = require("../../utils/styleModifiers");
23
-
24
- var _Typography = require("../../components/Typography");
12
+ var _context = require("../context");
25
13
 
26
- var _context = require("./context");
14
+ var _Checkbox = _interopRequireDefault(require("../../../components/Checkbox"));
27
15
 
28
- var _Checkbox = _interopRequireDefault(require("../../components/Checkbox"));
16
+ var _Avatar = _interopRequireDefault(require("../../../components/Avatar"));
29
17
 
30
- var _Avatar = _interopRequireDefault(require("../../components/Avatar"));
18
+ var _Badge = _interopRequireDefault(require("../../../components/Badge"));
31
19
 
32
- var _Badge = _interopRequireDefault(require("../../components/Badge"));
20
+ var _utils = require("../utils");
33
21
 
34
- var _Link = _interopRequireWildcard(require("../../components/Link"));
35
-
36
- var _utils = require("./utils");
22
+ var _styles = require("./styles");
37
23
 
38
24
  function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
39
25
 
@@ -45,30 +31,12 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
45
31
 
46
32
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
47
33
 
48
- function getBorderRadius(_ref) {
49
- var borderRadius = _ref.borderRadius;
50
- return borderRadius || '2px';
51
- }
52
-
53
- var enabledFGColor = _color.default.interaction.pacificOcean;
54
- var disabledFGColor = _color.default.opacity.charcoal40;
55
- var StyledLink = (0, _styledComponents.default)(_Link.default).withConfig({
56
- displayName: "Option__StyledLink",
57
- componentId: "sc-679ny4-0"
58
- })(["&&,&&:hover:not(:active),&&:focus:not(:active){text-decoration:none;", ";", ";}"], (0, _Link.linkColorStyles)(enabledFGColor, enabledFGColor, enabledFGColor), (0, _styleModifiers.when)('disabled', (0, _styledComponents.css)(["", ";cursor:not-allowed;"], (0, _Link.linkColorStyles)(disabledFGColor, disabledFGColor, disabledFGColor))));
59
-
60
- var Container = _styledComponents.default.li.withConfig({
61
- displayName: "Option__Container",
62
- componentId: "sc-679ny4-1"
63
- })(["text-align:left;&:focus{outline:none;}> .label,> ", "{align-items:center;border:1px solid transparent;color:", ";display:flex;padding:", ";pointer-events:none;width:100%;white-space:nowrap;> *{margin-right:", ";}}> ", "{pointer-events:auto;background-color:transparent;text-decoration:none;}&:first-child > .label,&:first-child > ", "{border-top-left-radius:", ";border-top-right-radius:", ";}&:last-child > .label,&:last-child > ", "{border-bottom-left-radius:", ";border-bottom-right-radius:", ";}&:hover:not([aria-disabled='true']):not([aria-selected='true']) > .label,&:hover:not([aria-disabled='true']):not([aria-selected='true']) > ", "{color:", ";text-decoration:none;.label > *{border-color:", ";}}&[aria-selected='true'] > .label{background:", ";color:", ";}&[aria-selected='true'] > .label > div > #optionLabelDetails{background:", ";color:", ";}", ";", " &[aria-disabled='true']{cursor:not-allowed;", "{pointer-events:none;}}&[aria-disabled='true'] > .label,&[aria-disabled='true'] > ", "{background:", ";color:", ";}"], StyledLink, (0, _toColorString.default)(_color.default.interaction.pacificOcean), "".concat((0, _rem.default)(5), " ").concat((0, _rem.default)(30), " ").concat((0, _rem.default)(5), " ").concat((0, _rem.default)(10)), (0, _rem.default)(10), StyledLink, StyledLink, getBorderRadius, getBorderRadius, StyledLink, getBorderRadius, getBorderRadius, StyledLink, (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _toColorString.default)(_color.default.interaction.indianOcean), (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _toColorString.default)(_color.default.base.snowWhite), (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _toColorString.default)(_color.default.base.snowWhite), (0, _styleModifiers.when)('isActive', (0, _styledComponents.css)(["color:", ";background:", ";.label > *{border-color:", ";}"], (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _toColorString.default)(_color.default.interaction.pacificOcean15), (0, _toColorString.default)(_color.default.interaction.indianOcean))), (0, _styleModifiers.when)([['isActive'], ['inputMethod', 'keyboard']], (0, _styledComponents.css)(["background:none;> .label,> ", "{border-color:", ";", "}&[aria-selected='true'] > .label,&[aria-selected='true'] > ", "{color:", ";", "}"], StyledLink, (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _focusRingWithColor.default)(_color.default.interaction.pacificOcean40), StyledLink, (0, _toColorString.default)(_color.default.base.snowWhite), (0, _focusRingWithColor.default)(_color.default.opacity.fullMoon50))), StyledLink, StyledLink, (0, _toColorString.default)(_color.default.base.snowWhite), (0, _toColorString.default)(_color.default.opacity.charcoal40));
64
-
65
- var StyleLabelWrapper = _styledComponents.default.div.withConfig({
66
- displayName: "Option__StyleLabelWrapper",
67
- componentId: "sc-679ny4-2"
68
- })(["display:flex;flex:1;flex-direction:column;"]); // This is used below to silence a React warning about
34
+ var sizeMapping = {
35
+ small: 'small',
36
+ medium: undefined
37
+ }; // This is used below to silence a React warning about
69
38
  // having a controlled input without a change handler.
70
39
 
71
-
72
40
  var noop = process.env.NODE_ENV === 'production' ? undefined : function () {};
73
41
 
74
42
  function isDecoration(decoration) {
@@ -99,12 +67,7 @@ function DecorationComponent(props) {
99
67
  default:
100
68
  return null;
101
69
  }
102
- }
103
-
104
- var DecorationComponentContainer = _styledComponents.default.div.withConfig({
105
- displayName: "Option__DecorationComponentContainer",
106
- componentId: "sc-679ny4-3"
107
- })(["", ";"], (0, _styleModifiers.when)('disabled', (0, _styledComponents.css)(["opacity:0.3;img{opacity:0.3;}"]))); // We always render the checkbox/radio inputs so that regular form
70
+ } // We always render the checkbox/radio inputs so that regular form
108
71
  // submission (i.e. one not handled programmatically) still works.
109
72
 
110
73
 
@@ -116,7 +79,9 @@ function Option(props) {
116
79
  borderRadius = props.borderRadius,
117
80
  labelDetails = props.labelDetails,
118
81
  _props$showCheckbox = props.showCheckbox,
119
- showCheckbox = _props$showCheckbox === void 0 ? true : _props$showCheckbox;
82
+ showCheckbox = _props$showCheckbox === void 0 ? true : _props$showCheckbox,
83
+ _props$size = props.size,
84
+ size = _props$size === void 0 ? 'small' : _props$size;
120
85
  var decorationType = (0, _get.default)(decoration, 'type');
121
86
 
122
87
  var _useOptionsList = (0, _context.useOptionsList)(),
@@ -147,8 +112,8 @@ function Option(props) {
147
112
  if (!disabled) toggleItemSelection(id);
148
113
  }, [toggleItemSelection, id, disabled]);
149
114
  var LabelWrapper = (0, _react.useMemo)(function () {
150
- return function (_ref2) {
151
- var children = _ref2.children;
115
+ return function (_ref) {
116
+ var children = _ref.children;
152
117
  return selectable ? _react.default.createElement("label", {
153
118
  className: "label"
154
119
  }, children) : _react.default.createElement("div", {
@@ -156,7 +121,7 @@ function Option(props) {
156
121
  }, children);
157
122
  };
158
123
  }, [selectable]);
159
- return _react.default.createElement(Container, {
124
+ return _react.default.createElement(_styles.Container, {
160
125
  "aria-disabled": !!disabled,
161
126
  "aria-selected": checked,
162
127
  borderRadius: borderRadius,
@@ -168,8 +133,9 @@ function Option(props) {
168
133
  tabIndex: -1,
169
134
  onMouseEnter: handleMouseEnter,
170
135
  inputMethod: inputMethod,
171
- role: itemRole
172
- }, (0, _utils.isLink)(props) ? _react.default.createElement(StyledLink, {
136
+ role: itemRole,
137
+ size: size
138
+ }, (0, _utils.isLink)(props) ? _react.default.createElement(_styles.StyledLink, {
173
139
  tabIndex: -1,
174
140
  to: props.linkTo,
175
141
  text: label,
@@ -177,13 +143,13 @@ function Option(props) {
177
143
  disabled: !!disabled
178
144
  }) : _react.default.createElement(LabelWrapper, null, selectable && (multiple && !!showCheckbox ? _react.default.createElement(_Checkbox.default, _extends({}, commonProps, {
179
145
  disabled: !!disabled,
180
- size: "small",
146
+ size: sizeMapping[size],
181
147
  value: props.value
182
148
  })) : _react.default.createElement("input", _extends({}, commonProps, {
183
149
  type: "radio",
184
150
  hidden: true,
185
151
  value: props.value
186
- }))), isDecoration(decoration) && _react.default.createElement(DecorationComponentContainer, {
152
+ }))), isDecoration(decoration) && _react.default.createElement(_styles.DecorationComponentContainer, {
187
153
  disabled: !!disabled && decorationType !== 'Icon'
188
154
  }, _react.default.createElement(DecorationComponent, decoration)), renderOptionLabel ? renderOptionLabel({
189
155
  id: id,
@@ -192,14 +158,9 @@ function Option(props) {
192
158
  value: props.value,
193
159
  disabled: disabled,
194
160
  meta: props.meta
195
- }) : _react.default.createElement(StyleLabelWrapper, null, _react.default.createElement(_Typography.P, {
196
- as: "span",
197
- color: "inherit"
198
- }, label), labelDetails && _react.default.createElement(_Typography.P, {
199
- as: "span",
200
- shade: 1,
201
- size: "small",
202
- id: "optionLabelDetails"
161
+ }) : _react.default.createElement(_styles.StyleLabelWrapper, null, _react.default.createElement(_styles.StyledLabel, null, label), labelDetails && _react.default.createElement(_styles.StyledLabelDetails, {
162
+ id: "optionLabelDetails",
163
+ size: sizeMapping[size]
203
164
  }, labelDetails))));
204
165
  }
205
166
 
@@ -0,0 +1,17 @@
1
+ /// <reference types="react" />
2
+ import { StyledLinkProps, ContainerProps } from '../types';
3
+ export declare const StyledLink: import("styled-components").StyledComponent<import("react").RefForwardingComponent<HTMLAnchorElement, import("../../../components/Link").LinkProps>, any, StyledLinkProps, never>;
4
+ export declare const Container: import("styled-components").StyledComponent<"li", any, ContainerProps, never>;
5
+ export declare const StyleLabelWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
6
+ export declare const DecorationComponentContainer: import("styled-components").StyledComponent<"div", any, {
7
+ disabled?: boolean | undefined;
8
+ }, never>;
9
+ export declare const StyledLabel: import("styled-components").StyledComponent<"p", any, import("../../../components/Typography").PProps & {
10
+ as: string;
11
+ color: "inherit";
12
+ }, "color" | "as">;
13
+ export declare const StyledLabelDetails: import("styled-components").StyledComponent<"p", any, import("../../../components/Typography").PProps & {
14
+ as: string;
15
+ shade: number;
16
+ }, "as" | "shade">;
17
+ //# sourceMappingURL=styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/atoms/OptionsList/Option/styles.ts"],"names":[],"mappings":";AAaA,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAK3D,eAAO,MAAM,UAAU,mLAgBtB,CAAC;AAuBF,eAAO,MAAM,SAAS,+EA6GrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,oEAI7B,CAAC;AAEF,eAAO,MAAM,4BAA4B;;SAUxC,CAAC;AAEF,eAAO,MAAM,WAAW;;;kBAEvB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;kBAG3B,CAAC"}
@@ -0,0 +1,83 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.StyledLabelDetails = exports.StyledLabel = exports.DecorationComponentContainer = exports.StyleLabelWrapper = exports.Container = exports.StyledLink = void 0;
7
+
8
+ var _styledComponents = _interopRequireWildcard(require("styled-components"));
9
+
10
+ var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
11
+
12
+ var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
13
+
14
+ var _designTokens = require("@decisiv/design-tokens");
15
+
16
+ var _Link = _interopRequireWildcard(require("../../../components/Link"));
17
+
18
+ var _Typography = require("../../../components/Typography");
19
+
20
+ var _styleModifiers = require("../../../utils/styleModifiers");
21
+
22
+ var _focusRingWithColor = _interopRequireDefault(require("../../../utils/focusRingWithColor"));
23
+
24
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
25
+
26
+ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
27
+
28
+ var enabledFGColor = _designTokens.color.interaction.pacificOcean;
29
+ var disabledFGColor = _designTokens.color.opacity.charcoal40;
30
+ var StyledLink = (0, _styledComponents.default)(_Link.default).withConfig({
31
+ displayName: "styles__StyledLink",
32
+ componentId: "sc-1vr9h8x-0"
33
+ })(["&&,&&:hover:not(:active),&&:focus:not(:active){text-decoration:none;", ";", ";}"], (0, _Link.linkColorStyles)(enabledFGColor, enabledFGColor, enabledFGColor), (0, _styleModifiers.when)('disabled', (0, _styledComponents.css)(["", ";cursor:not-allowed;"], (0, _Link.linkColorStyles)(disabledFGColor, disabledFGColor, disabledFGColor))));
34
+ exports.StyledLink = StyledLink;
35
+
36
+ var withSizeModifiers = function withSizeModifiers(props) {
37
+ var _props$size = props.size,
38
+ size = _props$size === void 0 ? 'small' : _props$size;
39
+ if (size === 'medium') return (0, _styledComponents.css)(["font-size:", ";padding:", ";"], (0, _rem.default)(_designTokens.typography.size.alias.header4), "".concat((0, _rem.default)(10), " ").concat((0, _rem.default)(30), " ").concat((0, _rem.default)(10), " ").concat((0, _rem.default)(10)));
40
+ return (0, _styledComponents.css)(["font-size:", ";padding:", ";"], (0, _rem.default)(_designTokens.typography.size.alias.paragraph), "".concat((0, _rem.default)(5), " ").concat((0, _rem.default)(30), " ").concat((0, _rem.default)(5), " ").concat((0, _rem.default)(10)));
41
+ };
42
+
43
+ function getBorderRadius(_ref) {
44
+ var borderRadius = _ref.borderRadius;
45
+ return borderRadius || '2px';
46
+ }
47
+
48
+ var Container = _styledComponents.default.li.withConfig({
49
+ displayName: "styles__Container",
50
+ componentId: "sc-1vr9h8x-1"
51
+ })(["text-align:left;&:focus{outline:none;}> .label,> ", "{align-items:center;border:1px solid transparent;color:", ";display:flex;pointer-events:none;width:100%;white-space:nowrap;", " > *{margin-right:", ";}}> ", "{pointer-events:auto;background-color:transparent;text-decoration:none;}&:first-child > .label,&:first-child > ", "{border-top-left-radius:", ";border-top-right-radius:", ";}&:last-child > .label,&:last-child > ", "{border-bottom-left-radius:", ";border-bottom-right-radius:", ";}&:hover:not([aria-disabled='true']):not([aria-selected='true']) > .label,&:hover:not([aria-disabled='true']):not([aria-selected='true']) > ", "{color:", ";text-decoration:none;.label > *{border-color:", ";}}&[aria-selected='true'] > .label{background:", ";color:", ";}&[aria-selected='true'] > .label > div > #optionLabelDetails{background:", ";color:", ";}", ";", " &[aria-disabled='true']{cursor:not-allowed;", "{pointer-events:none;}}&[aria-disabled='true'] > .label,&[aria-disabled='true'] > ", "{background:", ";color:", ";}"], StyledLink, (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), withSizeModifiers, (0, _rem.default)(10), StyledLink, StyledLink, getBorderRadius, getBorderRadius, StyledLink, getBorderRadius, getBorderRadius, StyledLink, (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _toColorString.default)(_designTokens.color.interaction.indianOcean), (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _toColorString.default)(_designTokens.color.base.snowWhite), (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _toColorString.default)(_designTokens.color.base.snowWhite), (0, _styleModifiers.when)('isActive', (0, _styledComponents.css)(["color:", ";background:", ";.label > *{border-color:", ";}"], (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean15), (0, _toColorString.default)(_designTokens.color.interaction.indianOcean))), (0, _styleModifiers.when)([['isActive'], ['inputMethod', 'keyboard']], (0, _styledComponents.css)(["background:none;> .label,> ", "{border-color:", ";", "}&[aria-selected='true'] > .label,&[aria-selected='true'] > ", "{color:", ";", "}"], StyledLink, (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _focusRingWithColor.default)(_designTokens.color.interaction.pacificOcean40), StyledLink, (0, _toColorString.default)(_designTokens.color.base.snowWhite), (0, _focusRingWithColor.default)(_designTokens.color.opacity.fullMoon50))), StyledLink, StyledLink, (0, _toColorString.default)(_designTokens.color.base.snowWhite), (0, _toColorString.default)(_designTokens.color.opacity.charcoal40));
52
+
53
+ exports.Container = Container;
54
+
55
+ var StyleLabelWrapper = _styledComponents.default.div.withConfig({
56
+ displayName: "styles__StyleLabelWrapper",
57
+ componentId: "sc-1vr9h8x-2"
58
+ })(["display:flex;flex:1;flex-direction:column;"]);
59
+
60
+ exports.StyleLabelWrapper = StyleLabelWrapper;
61
+
62
+ var DecorationComponentContainer = _styledComponents.default.div.withConfig({
63
+ displayName: "styles__DecorationComponentContainer",
64
+ componentId: "sc-1vr9h8x-3"
65
+ })(["", ";"], (0, _styleModifiers.when)('disabled', (0, _styledComponents.css)(["opacity:0.3;img{opacity:0.3;}"])));
66
+
67
+ exports.DecorationComponentContainer = DecorationComponentContainer;
68
+ var StyledLabel = (0, _styledComponents.default)(_Typography.P).attrs({
69
+ as: 'span',
70
+ color: 'inherit'
71
+ }).withConfig({
72
+ displayName: "styles__StyledLabel",
73
+ componentId: "sc-1vr9h8x-4"
74
+ })(["font-size:inherit;"]);
75
+ exports.StyledLabel = StyledLabel;
76
+ var StyledLabelDetails = (0, _styledComponents.default)(_Typography.P).attrs({
77
+ as: 'span',
78
+ shade: 1
79
+ }).withConfig({
80
+ displayName: "styles__StyledLabelDetails",
81
+ componentId: "sc-1vr9h8x-5"
82
+ })([""]);
83
+ exports.StyledLabelDetails = StyledLabelDetails;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AAcf,OAAO,EAGL,gBAAgB,EAIjB,MAAM,SAAS,CAAC;AAwBjB,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kDAmCrB,CAAC;AA4SF,QAAA,MAAM,2BAA2B,2FAA0B,CAAC;AAkC5D,eAAe,2BAA2B,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AAcf,OAAO,EAGL,gBAAgB,EAIjB,MAAM,SAAS,CAAC;AAwBjB,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kDAmCrB,CAAC;AA+SF,QAAA,MAAM,2BAA2B,2FAA0B,CAAC;AAmC5D,eAAe,2BAA2B,CAAC"}
@@ -86,13 +86,13 @@ var Container = _styledComponents.default.ul.withConfig({
86
86
  componentId: "sc-107p8d5-0"
87
87
  })(["list-style:none;margin:0;width:100%;height:auto;max-height:", ";max-width:", ";padding:0;overflow:auto;position:relative;", " ", " ", " &:focus{outline:none;}"], (0, _rem.default)(310), (0, _rem.default)(340), function (_ref) {
88
88
  var minWidth = _ref.minWidth;
89
- return minWidth ? "\n min-width: ".concat(minWidth, ";\n ") : '';
89
+ return minWidth ? "\nmin-width: ".concat(minWidth, ";\n") : '';
90
90
  }, function (_ref2) {
91
91
  var maxWidth = _ref2.maxWidth;
92
- return maxWidth ? "\n max-width: ".concat(maxWidth, ";\n ") : '';
92
+ return maxWidth ? "\nmax-width: ".concat(maxWidth, ";\n") : '';
93
93
  }, function (_ref3) {
94
94
  var maxHeight = _ref3.maxHeight;
95
- return maxHeight ? "\n max-height: ".concat(maxHeight, ";\n ") : '';
95
+ return maxHeight ? "\nmax-height: ".concat(maxHeight, ";\n") : '';
96
96
  });
97
97
 
98
98
  exports.Container = Container;
@@ -113,6 +113,8 @@ function OptionsList(props, forwardedRef) {
113
113
  showCheckbox = props.showCheckbox,
114
114
  tabIndex = props.tabIndex,
115
115
  selectable = props.selectable,
116
+ _props$size = props.size,
117
+ size = _props$size === void 0 ? 'small' : _props$size,
116
118
  defaultSelected = props.defaultSelected,
117
119
  itemRole = props.itemRole,
118
120
  role = props.role,
@@ -299,14 +301,16 @@ function OptionsList(props, forwardedRef) {
299
301
  return _react.default.createElement(_Category.default, _extends({}, item, {
300
302
  key: id,
301
303
  borderRadius: borderRadius,
302
- showCheckbox: showCheckbox
304
+ showCheckbox: showCheckbox,
305
+ size: size
303
306
  }));
304
307
  }
305
308
 
306
309
  return _react.default.createElement(_Option.default, _extends({}, item, {
307
310
  key: id,
308
311
  borderRadius: borderRadius,
309
- showCheckbox: showCheckbox
312
+ showCheckbox: showCheckbox,
313
+ size: size
310
314
  }));
311
315
  }))), actions && _react.default.createElement(Row, null, _react.default.createElement(_Footer.default, {
312
316
  actions: actions
@@ -332,7 +336,8 @@ OptionsListWithContainerRef.defaultProps = {
332
336
  itemRole: 'option',
333
337
  tabIndex: 0,
334
338
  selectable: true,
335
- showCheckbox: true
339
+ showCheckbox: true,
340
+ size: 'small'
336
341
  };
337
342
  var _default = OptionsListWithContainerRef;
338
343
  exports.default = _default;
@@ -101,132 +101,100 @@ var defaultProps = {
101
101
  onChange: jest.fn()
102
102
  };
103
103
  describe('OptionsList', function () {
104
- it('renders items and categories sub items', function () {
105
- var _render = render(_react.default.createElement(_.default, defaultProps)),
106
- queryByText = _render.queryByText;
107
-
108
- items.forEach(function (item) {
109
- var label = item.label;
110
- expect(queryByText(label)).toBeInTheDocument();
111
-
112
- if ((0, _utils.isCategory)(item)) {
113
- item.items.forEach(function (_ref2) {
114
- var subItemLabel = _ref2.label;
115
- expect(queryByText(subItemLabel)).toBeInTheDocument();
116
- });
117
- }
118
- });
119
- });
120
- it('renders custom option label', function () {
121
- var renderOptionLabel = function renderOptionLabel(_ref3) {
122
- var label = _ref3.label;
123
- return _react.default.createElement("span", null, "".concat(label, " foo"));
124
- };
125
-
126
- var _render2 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
127
- renderOptionLabel: renderOptionLabel
128
- }))),
129
- queryByText = _render2.queryByText;
130
-
131
- items.forEach(function (item) {
132
- var label = item.label;
133
-
134
- if ((0, _utils.isCategory)(item)) {
135
- item.items.forEach(function (_ref4) {
136
- var subItemLabel = _ref4.label;
137
- expect(queryByText("".concat(subItemLabel, " foo"))).toBeInTheDocument();
138
- });
139
- } else {
140
- expect(queryByText("".concat(label, " foo"))).toBeInTheDocument();
141
- }
104
+ ['small', 'medium'].forEach(function (size) {
105
+ it('renders items and categories sub items', function () {
106
+ var _render = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
107
+ size: size
108
+ }))),
109
+ queryByText = _render.queryByText;
110
+
111
+ items.forEach(function (item) {
112
+ var label = item.label;
113
+ expect(queryByText(label)).toBeInTheDocument();
114
+
115
+ if ((0, _utils.isCategory)(item)) {
116
+ item.items.forEach(function (_ref2) {
117
+ var subItemLabel = _ref2.label;
118
+ expect(queryByText(subItemLabel)).toBeInTheDocument();
119
+ });
120
+ }
121
+ });
142
122
  });
143
- });
144
- it('checks that labelDetails when provided ', function () {
145
- var _render3 = render(_react.default.createElement(_.default, defaultProps)),
146
- getByText = _render3.getByText;
147
-
148
- expect(getByText('test detail label')).toBeInTheDocument();
149
- });
150
- it('navigates through the options with arrow keys', function () {
151
- var _render4 = render(_react.default.createElement(_.default, defaultProps)),
152
- getByText = _render4.getByText,
153
- container = _render4.container;
154
-
155
- var optionsList = container.querySelector('ul'); // simulate it is focused while tabbing
156
-
157
- _react2.fireEvent.keyDown(container, {
158
- key: 'Tab'
123
+ it('renders custom option label', function () {
124
+ var renderOptionLabel = function renderOptionLabel(_ref3) {
125
+ var label = _ref3.label;
126
+ return _react.default.createElement("span", null, "".concat(label, " foo"));
127
+ };
128
+
129
+ var _render2 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
130
+ renderOptionLabel: renderOptionLabel,
131
+ size: size
132
+ }))),
133
+ queryByText = _render2.queryByText;
134
+
135
+ items.forEach(function (item) {
136
+ var label = item.label;
137
+
138
+ if ((0, _utils.isCategory)(item)) {
139
+ item.items.forEach(function (_ref4) {
140
+ var subItemLabel = _ref4.label;
141
+ expect(queryByText("".concat(subItemLabel, " foo"))).toBeInTheDocument();
142
+ });
143
+ } else {
144
+ expect(queryByText("".concat(label, " foo"))).toBeInTheDocument();
145
+ }
146
+ });
159
147
  });
148
+ it('checks that labelDetails when provided ', function () {
149
+ var _render3 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
150
+ size: size
151
+ }))),
152
+ getByText = _render3.getByText;
160
153
 
161
- _react2.fireEvent.focus(optionsList); // default first element active
162
- // check the active item with border style
163
-
164
-
165
- expect(getByText(defaultProps.items[0].label).closest('.label')).toHaveStyle("\n border-color: ".concat((0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), ";\n "));
166
-
167
- _react2.fireEvent.keyDown(optionsList, {
168
- key: 'ArrowDown'
154
+ expect(getByText('test detail label')).toBeInTheDocument();
169
155
  });
156
+ it('navigates through the options with arrow keys', function () {
157
+ var _render4 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
158
+ size: size
159
+ }))),
160
+ getByText = _render4.getByText,
161
+ container = _render4.container;
170
162
 
171
- expect(getByText(defaultProps.items[1].label).closest('.label')).toHaveStyle("\n border-color: ".concat((0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), ";\n "));
163
+ var optionsList = container.querySelector('ul'); // simulate it is focused while tabbing
172
164
 
173
- _react2.fireEvent.keyDown(optionsList, {
174
- key: 'ArrowUp'
175
- });
165
+ _react2.fireEvent.keyDown(container, {
166
+ key: 'Tab'
167
+ });
176
168
 
177
- expect(getByText(defaultProps.items[0].label).closest('.label')).toHaveStyle("\n border-color: ".concat((0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), ";\n "));
178
- });
179
- it('selects an item with Enter or Space key', function () {
180
- var onChange = jest.fn();
169
+ _react2.fireEvent.focus(optionsList); // default first element active
170
+ // check the active item with border style
181
171
 
182
- var _render5 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
183
- onChange: onChange
184
- }))),
185
- getByLabelText = _render5.getByLabelText,
186
- container = _render5.container;
187
172
 
188
- var selectedItem = defaultProps.items[1];
189
- var optionsList = container.querySelector('ul'); // simulate it is focused while tabbing
173
+ expect(getByText(defaultProps.items[0].label).closest('.label')).toHaveStyle("\n border-color: ".concat((0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), ";\n "));
190
174
 
191
- _react2.fireEvent.keyDown(container, {
192
- key: 'Tab'
193
- });
175
+ _react2.fireEvent.keyDown(optionsList, {
176
+ key: 'ArrowDown'
177
+ });
194
178
 
195
- _react2.fireEvent.focus(optionsList);
179
+ expect(getByText(defaultProps.items[1].label).closest('.label')).toHaveStyle("\n border-color: ".concat((0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), ";\n "));
196
180
 
197
- _react2.fireEvent.keyDown(optionsList, {
198
- key: 'ArrowDown'
199
- });
181
+ _react2.fireEvent.keyDown(optionsList, {
182
+ key: 'ArrowUp'
183
+ });
200
184
 
201
- _react2.fireEvent.keyDown(optionsList, {
202
- key: 'Enter'
185
+ expect(getByText(defaultProps.items[0].label).closest('.label')).toHaveStyle("\n border-color: ".concat((0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), ";\n "));
203
186
  });
204
-
205
- expect(onChange).toHaveBeenCalledWith(selectedItem.id);
206
- expect(getByLabelText(selectedItem.label)).toBeChecked();
207
- });
208
- describe('selecting disabled element with keyboard', function () {
209
187
  it('selects an item with Enter or Space key', function () {
210
188
  var onChange = jest.fn();
211
- var onlyDisabledItems = [{
212
- id: '2',
213
- label: 'Option 2',
214
- value: '2',
215
- disabled: true
216
- }, {
217
- id: disabledItemId,
218
- label: disabledItemLabel,
219
- value: '4',
220
- disabled: true
221
- }];
222
-
223
- var _render6 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
224
- items: onlyDisabledItems,
225
- onChange: onChange
189
+
190
+ var _render5 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
191
+ onChange: onChange,
192
+ size: size
226
193
  }))),
227
- getByLabelText = _render6.getByLabelText,
228
- container = _render6.container;
194
+ getByLabelText = _render5.getByLabelText,
195
+ container = _render5.container;
229
196
 
197
+ var selectedItem = defaultProps.items[1];
230
198
  var optionsList = container.querySelector('ul'); // simulate it is focused while tabbing
231
199
 
232
200
  _react2.fireEvent.keyDown(container, {
@@ -243,131 +211,179 @@ describe('OptionsList', function () {
243
211
  key: 'Enter'
244
212
  });
245
213
 
246
- expect(onChange).not.toHaveBeenCalledWith(disabledItemId);
247
- expect(onChange).not.toHaveBeenCalled();
248
- expect(getByLabelText(disabledItemLabel)).not.toBeChecked();
214
+ expect(onChange).toHaveBeenCalledWith(selectedItem.id);
215
+ expect(getByLabelText(selectedItem.label)).toBeChecked();
249
216
  });
250
- });
251
- describe('single selection', function () {
252
- it('calls onChange with id when item is clicked', function () {
253
- var onChange = jest.fn();
254
-
255
- var _render7 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
256
- onChange: onChange
257
- }))),
258
- getByText = _render7.getByText,
259
- getByLabelText = _render7.getByLabelText;
217
+ describe('selecting disabled element with keyboard', function () {
218
+ it('selects an item with Enter or Space key', function () {
219
+ var onChange = jest.fn();
220
+ var onlyDisabledItems = [{
221
+ id: '2',
222
+ label: 'Option 2',
223
+ value: '2',
224
+ disabled: true
225
+ }, {
226
+ id: disabledItemId,
227
+ label: disabledItemLabel,
228
+ value: '4',
229
+ disabled: true
230
+ }];
231
+
232
+ var _render6 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
233
+ items: onlyDisabledItems,
234
+ onChange: onChange,
235
+ size: size
236
+ }))),
237
+ getByLabelText = _render6.getByLabelText,
238
+ container = _render6.container;
260
239
 
261
- var item = items[0];
240
+ var optionsList = container.querySelector('ul'); // simulate it is focused while tabbing
262
241
 
263
- _react2.fireEvent.click(getByText(item.label));
242
+ _react2.fireEvent.keyDown(container, {
243
+ key: 'Tab'
244
+ });
264
245
 
265
- expect(onChange).toHaveBeenLastCalledWith(item.id);
266
- var subItem = items[2].items[0];
246
+ _react2.fireEvent.focus(optionsList);
267
247
 
268
- _react2.fireEvent.click(getByText(subItem.label));
248
+ _react2.fireEvent.keyDown(optionsList, {
249
+ key: 'ArrowDown'
250
+ });
269
251
 
270
- expect(onChange).toHaveBeenLastCalledWith(subItem.id); // there should be an item marked as selected
252
+ _react2.fireEvent.keyDown(optionsList, {
253
+ key: 'Enter'
254
+ });
271
255
 
272
- expect(getByLabelText(subItem.label)).toBeChecked();
256
+ expect(onChange).not.toHaveBeenCalledWith(disabledItemId);
257
+ expect(onChange).not.toHaveBeenCalled();
258
+ expect(getByLabelText(disabledItemLabel)).not.toBeChecked();
259
+ });
273
260
  });
274
- describe('disabled element', function () {
275
- it('does not calls onChange when item is clicked', function () {
261
+ describe('single selection', function () {
262
+ it('calls onChange with id when item is clicked', function () {
276
263
  var onChange = jest.fn();
277
264
 
278
- var _render8 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
279
- onChange: onChange
265
+ var _render7 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
266
+ onChange: onChange,
267
+ size: size
280
268
  }))),
281
- getByText = _render8.getByText,
282
- getByLabelText = _render8.getByLabelText;
269
+ getByText = _render7.getByText,
270
+ getByLabelText = _render7.getByLabelText;
283
271
 
284
- _react2.fireEvent.click(getByText(disabledItemLabel));
272
+ var item = items[0];
285
273
 
286
- expect(onChange).not.toHaveBeenLastCalledWith(disabledItemId);
287
- expect(onChange).not.toHaveBeenCalled(); // the item shouldn't be marked as selected
274
+ _react2.fireEvent.click(getByText(item.label));
288
275
 
289
- expect(getByLabelText(disabledItemLabel)).not.toBeChecked();
276
+ expect(onChange).toHaveBeenLastCalledWith(item.id);
277
+ var subItem = items[2].items[0];
278
+
279
+ _react2.fireEvent.click(getByText(subItem.label));
280
+
281
+ expect(onChange).toHaveBeenLastCalledWith(subItem.id); // there should be an item marked as selected
282
+
283
+ expect(getByLabelText(subItem.label)).toBeChecked();
290
284
  });
291
- });
292
- describe('controlled', function () {
293
- it('prefers value over internal', function () {
294
- var selected = items[1];
285
+ describe('disabled element', function () {
286
+ it('does not calls onChange when item is clicked', function () {
287
+ var onChange = jest.fn();
295
288
 
296
- var _render9 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
297
- selected: selected.id
298
- }))),
299
- getByText = _render9.getByText,
300
- getByLabelText = _render9.getByLabelText;
289
+ var _render8 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
290
+ onChange: onChange,
291
+ size: size
292
+ }))),
293
+ getByText = _render8.getByText,
294
+ getByLabelText = _render8.getByLabelText;
301
295
 
302
- var item = items[0];
296
+ _react2.fireEvent.click(getByText(disabledItemLabel));
303
297
 
304
- _react2.fireEvent.click(getByText(item.label));
298
+ expect(onChange).not.toHaveBeenLastCalledWith(disabledItemId);
299
+ expect(onChange).not.toHaveBeenCalled(); // the item shouldn't be marked as selected
300
+
301
+ expect(getByLabelText(disabledItemLabel)).not.toBeChecked();
302
+ });
303
+ });
304
+ describe('controlled', function () {
305
+ it('prefers value over internal', function () {
306
+ var selected = items[1];
307
+
308
+ var _render9 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
309
+ selected: selected.id,
310
+ size: size
311
+ }))),
312
+ getByText = _render9.getByText,
313
+ getByLabelText = _render9.getByLabelText;
314
+
315
+ var item = items[0];
305
316
 
306
- expect(getByLabelText(item.label)).not.toBeChecked();
307
- expect(getByLabelText(selected.label)).toBeChecked();
317
+ _react2.fireEvent.click(getByText(item.label));
318
+
319
+ expect(getByLabelText(item.label)).not.toBeChecked();
320
+ expect(getByLabelText(selected.label)).toBeChecked();
321
+ });
308
322
  });
309
323
  });
310
- });
311
- describe('multi selection', function () {
312
- it('calls onChange with array of selected ids when item is clicked', function () {
313
- var onChange = jest.fn();
324
+ describe('multi selection', function () {
325
+ it('calls onChange with array of selected ids when item is clicked', function () {
326
+ var onChange = jest.fn();
314
327
 
315
- var _render10 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
316
- onChange: onChange,
317
- multiple: true
318
- }))),
319
- getByText = _render10.getByText,
320
- getByLabelText = _render10.getByLabelText;
328
+ var _render10 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
329
+ onChange: onChange,
330
+ multiple: true,
331
+ size: size
332
+ }))),
333
+ getByText = _render10.getByText,
334
+ getByLabelText = _render10.getByLabelText;
321
335
 
322
- var item = items[0];
336
+ var item = items[0];
323
337
 
324
- _react2.fireEvent.click(getByText(item.label));
338
+ _react2.fireEvent.click(getByText(item.label));
325
339
 
326
- expect(onChange).toHaveBeenLastCalledWith([item.id]);
327
- var subItem = items[2].items[0];
340
+ expect(onChange).toHaveBeenLastCalledWith([item.id]);
341
+ var subItem = items[2].items[0];
328
342
 
329
- _react2.fireEvent.click(getByText(subItem.label));
343
+ _react2.fireEvent.click(getByText(subItem.label));
330
344
 
331
- expect(onChange).toHaveBeenLastCalledWith([item.id, subItem.id]);
332
- expect(getByLabelText(subItem.label)).toBeChecked();
333
- expect(getByLabelText(item.label)).toBeChecked(); // second click unselects
345
+ expect(onChange).toHaveBeenLastCalledWith([item.id, subItem.id]);
346
+ expect(getByLabelText(subItem.label)).toBeChecked();
347
+ expect(getByLabelText(item.label)).toBeChecked(); // second click unselects
334
348
 
335
- _react2.fireEvent.click(getByText(item.label));
349
+ _react2.fireEvent.click(getByText(item.label));
336
350
 
337
- expect(onChange).toHaveBeenLastCalledWith([subItem.id]);
338
- });
339
- it('adds a footer with buttons when actions are provided', function () {
340
- var onClick = jest.fn();
341
- var actions = [{
342
- id: '1',
343
- text: 'apply',
344
- onClick: onClick
345
- }, {
346
- id: '2',
347
- text: 'cancel',
348
- kind: 'secondary',
349
- onClick: onClick
350
- }, {
351
- id: '3',
352
- text: 'clear',
353
- kind: 'secondary',
354
- variant: 'ghost',
355
- paddingLeft: 4,
356
- onClick: onClick
357
- }];
358
-
359
- var _render11 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
360
- actions: actions,
361
- multiple: true
362
- }))),
363
- baseElement = _render11.baseElement,
364
- getByText = _render11.getByText;
351
+ expect(onChange).toHaveBeenLastCalledWith([subItem.id]);
352
+ });
353
+ it('adds a footer with buttons when actions are provided', function () {
354
+ var onClick = jest.fn();
355
+ var actions = [{
356
+ id: '1',
357
+ text: 'apply',
358
+ onClick: onClick
359
+ }, {
360
+ id: '2',
361
+ text: 'cancel',
362
+ kind: 'secondary',
363
+ onClick: onClick
364
+ }, {
365
+ id: '3',
366
+ text: 'clear',
367
+ kind: 'secondary',
368
+ variant: 'ghost',
369
+ paddingLeft: 4,
370
+ onClick: onClick
371
+ }];
372
+
373
+ var _render11 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
374
+ actions: actions,
375
+ multiple: true,
376
+ size: size
377
+ }))),
378
+ baseElement = _render11.baseElement,
379
+ getByText = _render11.getByText;
365
380
 
366
- actions.forEach(function (_ref5) {
367
- var label = _ref5.text;
368
- return expect(getByText(label)).toBeTruthy();
381
+ actions.forEach(function (_ref5) {
382
+ var label = _ref5.text;
383
+ return expect(getByText(label)).toBeTruthy();
384
+ });
385
+ expect(baseElement).toMatchSnapshot();
369
386
  });
370
- expect(baseElement).toMatchSnapshot();
371
387
  });
372
388
  });
373
389
  });
@@ -1 +1 @@
1
- {"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAA2C,CAAC;AAuExD,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAA2C,CAAC;AA0ExD,eAAe,MAAM,CAAC"}
@@ -39,7 +39,8 @@ schema.makePropTypes = function () {
39
39
  renderOptionLabel: _reactDesc.PropTypes.func.description('Function to customize render of option labels, called with the item value.'),
40
40
  selectable: _reactDesc.PropTypes.bool.description('Enables selection in the options list.').defaultValue(true),
41
41
  role: _reactDesc.PropTypes.string.description('The role assigned to the list.').defaultValue('listbox'),
42
- itemRole: _reactDesc.PropTypes.string.description('The role assigned to each item in the list.').defaultValue('option')
42
+ itemRole: _reactDesc.PropTypes.string.description('The role assigned to each item in the list.').defaultValue('option'),
43
+ size: _reactDesc.PropTypes.oneOf(['small', 'medium']).description('Defines the size of the OptionList').defaultValue('small')
43
44
  };
44
45
  };
45
46
 
@@ -5,9 +5,11 @@ import { AvatarProps } from '../../components/Avatar';
5
5
  import { BadgeProps } from '../../components/Badge';
6
6
  import { DimensionsProps } from '../../modifiers/dimensions';
7
7
  import { ButtonProps } from '../../components/Button';
8
+ import { LinkProps } from '../../components/Link';
8
9
  export declare type OptionAvatarProps = Omit<AvatarProps, 'ref' | 'size'>;
9
10
  export declare type OptionBadgeProps = Omit<BadgeProps, 'size' | 'variant'>;
10
11
  export declare type InputMethod = 'mouse' | 'keyboard' | undefined;
12
+ export declare type Size = 'small' | 'medium' | undefined;
11
13
  export declare type Selection = string | string[];
12
14
  export declare type OptionsListDimensions = Pick<DimensionsProps, 'minWidth' | 'maxHeight' | 'maxWidth'>;
13
15
  interface AvatarDecoration extends OptionAvatarProps {
@@ -38,6 +40,7 @@ export interface Category {
38
40
  items: Option[];
39
41
  label: string;
40
42
  showCheckbox?: boolean;
43
+ size?: Size;
41
44
  }
42
45
  export declare type CategoryProps = Category;
43
46
  export declare type IconComponent = (props: IconProps) => JSX.Element;
@@ -50,6 +53,7 @@ interface BaseOption {
50
53
  labelDetails?: string;
51
54
  showCheckbox?: boolean;
52
55
  meta?: object;
56
+ size?: Size;
53
57
  }
54
58
  export interface ItemOption extends BaseOption {
55
59
  value?: string;
@@ -76,10 +80,24 @@ export interface OptionsListProps extends OptionsListDimensions {
76
80
  showCheckbox?: boolean;
77
81
  tabIndex?: number;
78
82
  selectable?: boolean;
83
+ size?: Size;
79
84
  defaultSelected?: Selection;
80
85
  role?: string;
81
86
  itemRole?: string;
82
87
  }
83
88
  export declare type OptionsListContainerRef = HTMLUListElement;
89
+ export interface StyledCategoryProps extends React.LiHTMLAttributes<HTMLLIElement> {
90
+ size: Size;
91
+ }
92
+ export interface ContainerProps {
93
+ borderRadius?: BorderRadiusProperty<string>;
94
+ isActive: boolean;
95
+ multiple: boolean;
96
+ inputMethod: InputMethod;
97
+ size: Size;
98
+ }
99
+ export interface StyledLinkProps extends LinkProps {
100
+ disabled: boolean;
101
+ }
84
102
  export {};
85
103
  //# sourceMappingURL=types.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/types.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/types.ts"],"names":[],"mappings":"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"}
@@ -4,7 +4,7 @@ import { Props as GroupProps, ItemProps as BaseItemProps } from '../../atoms/Boo
4
4
  export declare type Props = Omit<GroupProps, 'itemRenderer'>;
5
5
  export declare type ItemProps = BaseItemProps;
6
6
  declare const CheckboxGroup: {
7
- (props: Pick<GroupProps, "size" | "onChange" | "vertical" | "disabled" | "readOnly" | "status" | "warningMessage" | "items">): JSX.Element;
7
+ (props: Pick<GroupProps, "size" | "onChange" | "vertical" | "disabled" | "readOnly" | "status" | "items" | "warningMessage">): JSX.Element;
8
8
  propTypes: {
9
9
  disabled: PropTypes.Requireable<boolean>;
10
10
  items: PropTypes.Requireable<(PropTypes.InferProps<{}> | null | undefined)[]>;
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import { LinkRendererProps } from '../../providers/ConfigProvider';
3
3
  declare const _default: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<Pick<LinkRendererProps, "children" | "to"> & React.RefAttributes<HTMLAnchorElement>>, any, {
4
- size?: "small" | "medium" | undefined;
4
+ size?: import("../../atoms/OptionsList/types").Size;
5
5
  }, never>;
6
6
  export default _default;
7
7
  //# sourceMappingURL=DisabledLink.d.ts.map
@@ -1,20 +1,20 @@
1
1
  import { FlattenSimpleInterpolation, SimpleInterpolation } from 'styled-components';
2
- import { Color, IconPosition } from './types';
2
+ import { Color } from './types';
3
3
  export declare function linkColorStyles(normalColor: Color, visitedColor: Color, hoverColor: Color, focusColors?: {
4
4
  border: Color;
5
5
  shadow: Color;
6
6
  }): FlattenSimpleInterpolation;
7
7
  export declare const fontSize: (p: {
8
- size?: "small" | "medium" | undefined;
8
+ size?: import("../../atoms/OptionsList/types").Size;
9
9
  }) => SimpleInterpolation;
10
10
  export declare const IconContainer: import("styled-components").StyledComponent<"span", any, {
11
- position: IconPosition;
11
+ position: "left" | "right";
12
12
  withText: boolean;
13
13
  }, never>;
14
14
  export declare const sharedLinkStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
15
- size?: "small" | "medium" | undefined;
15
+ size?: import("../../atoms/OptionsList/types").Size;
16
16
  }, any>>;
17
17
  export declare const linkStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
18
- size?: "small" | "medium" | undefined;
18
+ size?: import("../../atoms/OptionsList/types").Size;
19
19
  }, any>>;
20
20
  //# sourceMappingURL=styles.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Link/styles.ts"],"names":[],"mappings":"AAEA,OAAe,EAEb,0BAA0B,EAC1B,mBAAmB,EACpB,MAAM,mBAAmB,CAAC;AAS3B,OAAO,EAAE,KAAK,EAAE,YAAY,EAAY,MAAM,SAAS,CAAC;AAiBxD,wBAAgB,eAAe,CAC7B,WAAW,EAAE,KAAK,EAClB,YAAY,EAAE,KAAK,EACnB,UAAU,EAAE,KAAK,EACjB,WAAW,CAAC,EAAE;IAAE,MAAM,EAAE,KAAK,CAAC;IAAC,MAAM,EAAE,KAAK,CAAA;CAAE,GAC7C,0BAA0B,CAsC5B;AAuDD,eAAO,MAAM,QAAQ;;yBAMpB,CAAC;AAcF,eAAO,MAAM,aAAa;;;SAGzB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;QAkB5B,CAAC;AAEF,eAAO,MAAM,UAAU;;QAItB,CAAC"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Link/styles.ts"],"names":[],"mappings":"AAEA,OAAe,EAEb,0BAA0B,EAC1B,mBAAmB,EACpB,MAAM,mBAAmB,CAAC;AAS3B,OAAO,EAAE,KAAK,EAA0B,MAAM,SAAS,CAAC;AAiBxD,wBAAgB,eAAe,CAC7B,WAAW,EAAE,KAAK,EAClB,YAAY,EAAE,KAAK,EACnB,UAAU,EAAE,KAAK,EACjB,WAAW,CAAC,EAAE;IAAE,MAAM,EAAE,KAAK,CAAC;IAAC,MAAM,EAAE,KAAK,CAAA;CAAE,GAC7C,0BAA0B,CAsC5B;AAuDD,eAAO,MAAM,QAAQ;;yBAMpB,CAAC;AAcF,eAAO,MAAM,aAAa;;;SAGzB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;QAkB5B,CAAC;AAEF,eAAO,MAAM,UAAU;;QAItB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@decisiv/ui-components",
3
- "version": "2.0.1-alpha.182+bbde1e2",
3
+ "version": "2.0.1-alpha.183+9f79a5a",
4
4
  "description": "Decisiv's design system React components",
5
5
  "author": "Decisiv UI Development Team",
6
6
  "license": "MIT",
@@ -71,5 +71,5 @@
71
71
  "access": "public"
72
72
  },
73
73
  "private": false,
74
- "gitHead": "bbde1e2883ce206cad4795fb09e444750b2cc535"
74
+ "gitHead": "9f79a5ae794f4d60bccf1f9c25d2b4a66fd7145e"
75
75
  }
@@ -1 +0,0 @@
1
- {"version":3,"file":"Category.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/Category.tsx"],"names":[],"mappings":";AA0BA,QAAA,MAAM,QAAQ,4FAyBb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Option.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/Option.tsx"],"names":[],"mappings":"AAOA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAK/D,OAAO,EACL,WAAW,EAMZ,MAAM,SAAS,CAAC;AAoNjB,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAqH/C;;AAED,wBAAkC"}