@dhis2-ui/segmented-control 10.16.3-alpha.1 → 10.16.4

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 (5) hide show
  1. package/build/cjs/segmented-control.js +26 -33
  2. package/build/cjs/segmented-control.prod.stories.js +3 -6
  3. package/build/es/segmented-control.js +26 -33
  4. package/build/es/segmented-control.prod.stories.js +3 -6
  5. package/package.json +2 -2
package/build/cjs/segmented-control.js CHANGED
@@ -25,46 +25,39 @@ import { SegmentedControl } from '@dhis2/ui'
25
25
  ```
26
26
  */
27
27
 
28
- const SegmentedControl = _ref => {
29
- let {
30
- options,
31
- selected,
32
- onChange,
33
- ariaLabel
34
- } = _ref;
35
- if (!options.map(_ref2 => {
36
- let {
37
- value
38
- } = _ref2;
39
- return value;
40
- }).includes(selected)) {
28
+ const SegmentedControl = ({
29
+ options,
30
+ selected,
31
+ onChange,
32
+ ariaLabel
33
+ }) => {
34
+ if (!options.map(({
35
+ value
36
+ }) => value).includes(selected)) {
41
37
  const message = `There is no option with the value: "${selected}". ` + 'Make sure that the value passed to the selected ' + 'prop matches the value of an existing option.';
42
38
  throw new Error(message);
43
39
  }
44
40
  return /*#__PURE__*/_react.default.createElement("ul", {
45
41
  "aria-label": ariaLabel,
46
42
  className: _style.default.dynamic([["3664972916", [_uiConstants.colors.grey300, _uiConstants.colors.grey700, _uiConstants.spacers.dp12, _uiConstants.theme.focus, _uiConstants.colors.grey400, _uiConstants.colors.grey900, _uiConstants.elevations.e100, _uiConstants.colors.white, _uiConstants.colors.grey900]]]) + " " + "segmented-control"
47
- }, options.map(_ref3 => {
48
- let {
49
- label,
50
- value,
43
+ }, options.map(({
44
+ label,
45
+ value,
46
+ disabled
47
+ }) => /*#__PURE__*/_react.default.createElement("li", {
48
+ key: `option-${value}`,
49
+ className: _style.default.dynamic([["3664972916", [_uiConstants.colors.grey300, _uiConstants.colors.grey700, _uiConstants.spacers.dp12, _uiConstants.theme.focus, _uiConstants.colors.grey400, _uiConstants.colors.grey900, _uiConstants.elevations.e100, _uiConstants.colors.white, _uiConstants.colors.grey900]]])
50
+ }, /*#__PURE__*/_react.default.createElement("button", {
51
+ type: "button",
52
+ onClick: e => onChange({
53
+ value
54
+ }, e),
55
+ disabled: disabled,
56
+ className: _style.default.dynamic([["3664972916", [_uiConstants.colors.grey300, _uiConstants.colors.grey700, _uiConstants.spacers.dp12, _uiConstants.theme.focus, _uiConstants.colors.grey400, _uiConstants.colors.grey900, _uiConstants.elevations.e100, _uiConstants.colors.white, _uiConstants.colors.grey900]]]) + " " + ((0, _classnames.default)('segment', {
57
+ selected: value === selected,
51
58
  disabled
52
- } = _ref3;
53
- return /*#__PURE__*/_react.default.createElement("li", {
54
- key: `option-${value}`,
55
- className: _style.default.dynamic([["3664972916", [_uiConstants.colors.grey300, _uiConstants.colors.grey700, _uiConstants.spacers.dp12, _uiConstants.theme.focus, _uiConstants.colors.grey400, _uiConstants.colors.grey900, _uiConstants.elevations.e100, _uiConstants.colors.white, _uiConstants.colors.grey900]]])
56
- }, /*#__PURE__*/_react.default.createElement("button", {
57
- type: "button",
58
- onClick: e => onChange({
59
- value
60
- }, e),
61
- disabled: disabled,
62
- className: _style.default.dynamic([["3664972916", [_uiConstants.colors.grey300, _uiConstants.colors.grey700, _uiConstants.spacers.dp12, _uiConstants.theme.focus, _uiConstants.colors.grey400, _uiConstants.colors.grey900, _uiConstants.elevations.e100, _uiConstants.colors.white, _uiConstants.colors.grey900]]]) + " " + ((0, _classnames.default)('segment', {
63
- selected: value === selected,
64
- disabled
65
- }) || "")
66
- }, label));
67
- }), /*#__PURE__*/_react.default.createElement(_style.default, {
59
+ }) || "")
60
+ }, label))), /*#__PURE__*/_react.default.createElement(_style.default, {
68
61
  id: "3664972916",
69
62
  dynamic: [_uiConstants.colors.grey300, _uiConstants.colors.grey700, _uiConstants.spacers.dp12, _uiConstants.theme.focus, _uiConstants.colors.grey400, _uiConstants.colors.grey900, _uiConstants.elevations.e100, _uiConstants.colors.white, _uiConstants.colors.grey900]
70
63
  }, [`.segmented-control.__jsx-style-dynamic-selector{all:unset;list-style:none;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;background:${_uiConstants.colors.grey300};border-radius:5px;padding:2px;}`, `.segment.__jsx-style-dynamic-selector{all:unset;box-sizing:border-box;cursor:pointer;font-size:14px;text-align:center;border-radius:5px;background:transparent;color:${_uiConstants.colors.grey700};min-width:72px;max-width:320px;height:100%;padding:6px ${_uiConstants.spacers.dp12};}`, `.segment.__jsx-style-dynamic-selector:focus{outline:3px solid ${_uiConstants.theme.focus};outline-offset:-3px;}`, ".segment.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", `.segment.__jsx-style-dynamic-selector:not(.selected):not(.disabled):hover{background:${_uiConstants.colors.grey400};color:${_uiConstants.colors.grey900};}`, `.segment.selected.__jsx-style-dynamic-selector{cursor:default;box-shadow:${_uiConstants.elevations.e100};background:${_uiConstants.colors.white};color:${_uiConstants.colors.grey900};}`, ".segment.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;opacity:0.5;}"]));
package/build/cjs/segmented-control.prod.stories.js CHANGED
@@ -7,12 +7,9 @@ exports.default = exports.LongLabels = exports.DisabledOption = exports.Default
7
7
  var _react = _interopRequireDefault(require("react"));
8
8
  var _segmentedControl = require("./segmented-control.js");
9
9
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
10
- const logger = _ref => {
11
- let {
12
- value
13
- } = _ref;
14
- return console.log(`Selected value: ${value}`);
15
- };
10
+ const logger = ({
11
+ value
12
+ }) => console.log(`Selected value: ${value}`);
16
13
  var _default = exports.default = {
17
14
  title: 'Segmented Control',
18
15
  component: _segmentedControl.SegmentedControl,
package/build/es/segmented-control.js CHANGED
@@ -19,46 +19,39 @@ import { SegmentedControl } from '@dhis2/ui'
19
19
  ```
20
20
  */
21
21
 
22
- export const SegmentedControl = _ref => {
23
- let {
24
- options,
25
- selected,
26
- onChange,
27
- ariaLabel
28
- } = _ref;
29
- if (!options.map(_ref2 => {
30
- let {
31
- value
32
- } = _ref2;
33
- return value;
34
- }).includes(selected)) {
22
+ export const SegmentedControl = ({
23
+ options,
24
+ selected,
25
+ onChange,
26
+ ariaLabel
27
+ }) => {
28
+ if (!options.map(({
29
+ value
30
+ }) => value).includes(selected)) {
35
31
  const message = `There is no option with the value: "${selected}". ` + 'Make sure that the value passed to the selected ' + 'prop matches the value of an existing option.';
36
32
  throw new Error(message);
37
33
  }
38
34
  return /*#__PURE__*/React.createElement("ul", {
39
35
  "aria-label": ariaLabel,
40
36
  className: _JSXStyle.dynamic([["3664972916", [colors.grey300, colors.grey700, spacers.dp12, theme.focus, colors.grey400, colors.grey900, elevations.e100, colors.white, colors.grey900]]]) + " " + "segmented-control"
41
- }, options.map(_ref3 => {
42
- let {
43
- label,
44
- value,
37
+ }, options.map(({
38
+ label,
39
+ value,
40
+ disabled
41
+ }) => /*#__PURE__*/React.createElement("li", {
42
+ key: `option-${value}`,
43
+ className: _JSXStyle.dynamic([["3664972916", [colors.grey300, colors.grey700, spacers.dp12, theme.focus, colors.grey400, colors.grey900, elevations.e100, colors.white, colors.grey900]]])
44
+ }, /*#__PURE__*/React.createElement("button", {
45
+ type: "button",
46
+ onClick: e => onChange({
47
+ value
48
+ }, e),
49
+ disabled: disabled,
50
+ className: _JSXStyle.dynamic([["3664972916", [colors.grey300, colors.grey700, spacers.dp12, theme.focus, colors.grey400, colors.grey900, elevations.e100, colors.white, colors.grey900]]]) + " " + (cx('segment', {
51
+ selected: value === selected,
45
52
  disabled
46
- } = _ref3;
47
- return /*#__PURE__*/React.createElement("li", {
48
- key: `option-${value}`,
49
- className: _JSXStyle.dynamic([["3664972916", [colors.grey300, colors.grey700, spacers.dp12, theme.focus, colors.grey400, colors.grey900, elevations.e100, colors.white, colors.grey900]]])
50
- }, /*#__PURE__*/React.createElement("button", {
51
- type: "button",
52
- onClick: e => onChange({
53
- value
54
- }, e),
55
- disabled: disabled,
56
- className: _JSXStyle.dynamic([["3664972916", [colors.grey300, colors.grey700, spacers.dp12, theme.focus, colors.grey400, colors.grey900, elevations.e100, colors.white, colors.grey900]]]) + " " + (cx('segment', {
57
- selected: value === selected,
58
- disabled
59
- }) || "")
60
- }, label));
61
- }), /*#__PURE__*/React.createElement(_JSXStyle, {
53
+ }) || "")
54
+ }, label))), /*#__PURE__*/React.createElement(_JSXStyle, {
62
55
  id: "3664972916",
63
56
  dynamic: [colors.grey300, colors.grey700, spacers.dp12, theme.focus, colors.grey400, colors.grey900, elevations.e100, colors.white, colors.grey900]
64
57
  }, [`.segmented-control.__jsx-style-dynamic-selector{all:unset;list-style:none;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;background:${colors.grey300};border-radius:5px;padding:2px;}`, `.segment.__jsx-style-dynamic-selector{all:unset;box-sizing:border-box;cursor:pointer;font-size:14px;text-align:center;border-radius:5px;background:transparent;color:${colors.grey700};min-width:72px;max-width:320px;height:100%;padding:6px ${spacers.dp12};}`, `.segment.__jsx-style-dynamic-selector:focus{outline:3px solid ${theme.focus};outline-offset:-3px;}`, ".segment.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", `.segment.__jsx-style-dynamic-selector:not(.selected):not(.disabled):hover{background:${colors.grey400};color:${colors.grey900};}`, `.segment.selected.__jsx-style-dynamic-selector{cursor:default;box-shadow:${elevations.e100};background:${colors.white};color:${colors.grey900};}`, ".segment.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;opacity:0.5;}"]));
package/build/es/segmented-control.prod.stories.js CHANGED
@@ -1,11 +1,8 @@
1
1
  import React from 'react';
2
2
  import { SegmentedControl } from './segmented-control.js';
3
- const logger = _ref => {
4
- let {
5
- value
6
- } = _ref;
7
- return console.log(`Selected value: ${value}`);
8
- };
3
+ const logger = ({
4
+ value
5
+ }) => console.log(`Selected value: ${value}`);
9
6
  export default {
10
7
  title: 'Segmented Control',
11
8
  component: SegmentedControl,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dhis2-ui/segmented-control",
3
- "version": "10.16.3-alpha.1",
3
+ "version": "10.16.4",
4
4
  "description": "UI Segmented Control",
5
5
  "repository": {
6
6
  "type": "git",
@@ -33,7 +33,7 @@
33
33
  },
34
34
  "dependencies": {
35
35
  "@dhis2/prop-types": "^3.1.2",
36
- "@dhis2/ui-constants": "10.16.3-alpha.1",
36
+ "@dhis2/ui-constants": "10.16.4",
37
37
  "classnames": "^2.3.1",
38
38
  "prop-types": "^15.7.2"
39
39
  },