@jobber/components 2.71.7 → 2.72.2

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/CHANGELOG.md +30 -0
  2. package/dist/Chips/index.js +23 -7
  3. package/dist/Menu/Menu.d.ts +4 -0
  4. package/dist/Menu/index.js +7 -5
  5. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -8,6 +8,36 @@ menu: Changelog
8
8
  All notable changes to this project will be documented in this file.
9
9
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
10
10
 
11
+ ## [2.72.2](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.72.1...@jobber/components@2.72.2) (2022-01-21)
12
+
13
+ **Note:** Version bump only for package @jobber/components
14
+
15
+
16
+
17
+
18
+
19
+ ## [2.72.1](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.72.0...@jobber/components@2.72.1) (2022-01-12)
20
+
21
+
22
+ ### Bug Fixes
23
+
24
+ * Allow space bar key deselect on single select chip ([#827](https://github.com/GetJobber/atlantis/issues/827)) ([a6bc802](https://github.com/GetJobber/atlantis/commit/a6bc802b128a731be5a308f955ee2099029375dd))
25
+
26
+
27
+
28
+
29
+
30
+ # [2.72.0](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.71.7...@jobber/components@2.72.0) (2022-01-11)
31
+
32
+
33
+ ### Features
34
+
35
+ * section header in label for screen readers ([#759](https://github.com/GetJobber/atlantis/issues/759)) ([6551f4d](https://github.com/GetJobber/atlantis/commit/6551f4d4d11229fd29043b8e66638e332ede7d50))
36
+
37
+
38
+
39
+
40
+
11
41
  ## [2.71.7](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.71.6...@jobber/components@2.71.7) (2022-01-10)
12
42
 
13
43
  **Note:** Version bump only for package @jobber/components
package/dist/Chips/index.js CHANGED
@@ -130,18 +130,34 @@ function ChipDismissible(_a) {
130
130
 
131
131
  function InternalChipSingleSelect(_a) {
132
132
  var children = _a.children, selected = _a.selected, _b = _a.name, name = _b === void 0 ? uuid.v1() : _b, onChange = _a.onChange, onClick = _a.onClick;
133
- return (React__default.createElement("div", { className: styles.wrapper, "data-testid": "singleselect-chips" }, React__default.Children.map(children, function (child) { return (React__default.createElement("label", null,
134
- React__default.createElement("input", { type: "radio", checked: child.props.value === selected, className: styles.input, name: name, onClick: handleClick(child.props.value), onChange: function () {
135
- /* No op. onClick handles the change to allow deselecting. */
136
- }, disabled: child.props.disabled }),
137
- React__default.createElement(InternalChip, __chunk_1.__assign({}, child.props, { active: child.props.value === selected })))); })));
133
+ return (React__default.createElement("div", { className: styles.wrapper, "data-testid": "singleselect-chips" }, React__default.Children.map(children, function (child) {
134
+ var isSelected = child.props.value === selected;
135
+ return (React__default.createElement("label", null,
136
+ React__default.createElement("input", { type: "radio", checked: isSelected, className: styles.input, name: name, onClick: handleClick(child.props.value), onKeyUp: handleKeyUp(isSelected, child.props.value), onChange: function () {
137
+ /* No op. onClick handles the change to allow deselecting. */
138
+ }, disabled: child.props.disabled }),
139
+ React__default.createElement(InternalChip, __chunk_1.__assign({}, child.props, { active: isSelected }))));
140
+ })));
141
+ function handleKeyUp(active, value) {
142
+ if (!active)
143
+ return;
144
+ return function (event) {
145
+ if (event.key === " ") {
146
+ // Wait for DOM changes before applying the new change.
147
+ setTimeout(function () { return handleChange(value); }, 0);
148
+ }
149
+ };
150
+ }
138
151
  function handleClick(value) {
139
152
  return function (event) {
140
153
  onClick === null || onClick === void 0 ? void 0 : onClick(event, value);
141
- var newValue = value !== selected ? value : undefined;
142
- onChange(newValue);
154
+ handleChange(value);
143
155
  };
144
156
  }
157
+ function handleChange(value) {
158
+ var newValue = value !== selected ? value : undefined;
159
+ onChange(newValue);
160
+ }
145
161
  }
146
162
 
147
163
  function InternalChipMultiSelect(_a) {
package/dist/Menu/Menu.d.ts CHANGED
@@ -26,6 +26,10 @@ export interface ActionProps {
26
26
  * Action label
27
27
  */
28
28
  label: string;
29
+ /**
30
+ * Parent Section Label
31
+ */
32
+ sectionLabel?: string;
29
33
  /**
30
34
  * Visual cue for the action label
31
35
  */
package/dist/Menu/index.js CHANGED
@@ -18,8 +18,8 @@ var index$5 = require('../Button/index.js');
18
18
  var framerMotion = require('framer-motion');
19
19
  var hooks = require('@jobber/hooks');
20
20
 
21
- var css = "._3dsZe-fIMb0ftQQAJf53tI * {\n box-sizing: border-box;\n}\n\n._3dsZe-fIMb0ftQQAJf53tI {\n display: inline-block;\n position: relative;\n}\n\n._15jh7FtEcALDetgrjoV8HG {\n position: fixed;\n bottom: 0;\n left: 0;\n z-index: var(--elevation-menu);\n width: 100%;\n max-height: 72vh;\n padding: var(--space-small);\n padding-bottom: calc(env(safe-area-inset-bottom) + var(--space-small));\n border-radius: var(--radius-base) var(--radius-base) 0 0;\n -webkit-overflow-scrolling: touch;\n overflow-y: scroll;\n background-color: var(--color-surface)\n}\n\n@media (min-width: 640px) {\n\n._15jh7FtEcALDetgrjoV8HG {\n position: absolute;\n left: auto;\n width: calc(var(--base-unit) * 12.5);\n box-shadow: var(--shadow-base);\n padding: var(--space-small);\n border: var(--border-base) solid var(--color-border);\n border-radius: var(--radius-base);\n overflow: auto\n}\n }\n\n@media (min-width: 640px) {\n\n._15jh7FtEcALDetgrjoV8HG {\n position: absolute;\n left: auto;\n width: calc(var(--base-unit) * 12.5);\n box-shadow: var(--shadow-base);\n padding: var(--space-small);\n border: var(--border-base) solid var(--color-border);\n border-radius: var(--radius-base);\n overflow: auto\n}\n }\n\n@media (--medium-screens) {\n\n._15jh7FtEcALDetgrjoV8HG {\n position: absolute;\n left: auto;\n width: calc(var(--base-unit) * 12.5);\n box-shadow: var(--shadow-base);\n padding: var(--space-small);\n border: var(--border-base) solid var(--color-border);\n border-radius: var(--radius-base);\n overflow: auto\n}\n }\n\n@media (min-width: 640px) {\n\n._2S3J3IQ4JcMgnYjzx3A9AA {\n bottom: 100%;\n margin-bottom: var(--space-smallest)\n}\n }\n\n@media (min-width: 640px) {\n\n._2S3J3IQ4JcMgnYjzx3A9AA {\n bottom: 100%;\n margin-bottom: var(--space-smallest)\n}\n }\n\n@media (--medium-screens) {\n\n._2S3J3IQ4JcMgnYjzx3A9AA {\n bottom: 100%;\n margin-bottom: var(--space-smallest)\n}\n }\n\n@media (min-width: 640px) {\n\n.qgoF1WJ8Cu39FVc3p_c8w {\n top: 100%;\n bottom: auto;\n margin-top: var(--space-smallest)\n}\n }\n\n@media (min-width: 640px) {\n\n.qgoF1WJ8Cu39FVc3p_c8w {\n top: 100%;\n bottom: auto;\n margin-top: var(--space-smallest)\n}\n }\n\n@media (--medium-screens) {\n\n.qgoF1WJ8Cu39FVc3p_c8w {\n top: 100%;\n bottom: auto;\n margin-top: var(--space-smallest)\n}\n }\n\n@media (min-width: 640px) {\n\n._2QwnAwwIXZuZReq2cUwEoX {\n right: 0;\n left: auto\n}\n }\n\n@media (min-width: 640px) {\n\n._2QwnAwwIXZuZReq2cUwEoX {\n right: 0;\n left: auto\n}\n }\n\n@media (--medium-screens) {\n\n._2QwnAwwIXZuZReq2cUwEoX {\n right: 0;\n left: auto\n}\n }\n\n@media (min-width: 640px) {\n\n._2Bdz7gjSU8id-Og42er82U {\n right: auto;\n left: 0\n}\n }\n\n@media (min-width: 640px) {\n\n._2Bdz7gjSU8id-Og42er82U {\n right: auto;\n left: 0\n}\n }\n\n@media (--medium-screens) {\n\n._2Bdz7gjSU8id-Og42er82U {\n right: auto;\n left: 0\n}\n }\n\n._1j-ztPLXQgH-5XOlXybf0- {\n padding: var(--space-small) 0;\n border-bottom: var(--border-base) dotted var(--color-border);\n}\n\n._1j-ztPLXQgH-5XOlXybf0-:first-of-type {\n padding-top: 0;\n}\n\n._1j-ztPLXQgH-5XOlXybf0-:last-of-type {\n padding-bottom: 0;\n border-bottom: none;\n}\n\n.ecEGgRDm96wrHymIDR1FM {\n padding: var(--space-small);\n}\n\n._1lmtkHVgn76IrVsqnqlOYh {\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n padding: var(--space-small);\n border: none;\n border-radius: var(--radius-base);\n background-color: transparent;\n cursor: pointer;\n -ms-flex-align: center;\n align-items: center;\n}\n\n._1lmtkHVgn76IrVsqnqlOYh:hover,\n._1lmtkHVgn76IrVsqnqlOYh:focus {\n background-color: var(--color-surface--hover);\n outline-color: var(--color-focus);\n}\n\n.QMbGAf7Vb6_SM8qOIvLMc {\n margin-right: var(--space-base);\n}\n\n._1DIimpm0iJewCr_4Ee8NTa {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: var(--elevation-menu);\n background-color: rgba(\n 101,\n 120,\n 132,\n 0.8\n ) /* until we figure out rgba + color vars... */\n}\n\n@media (min-width: 640px) {\n\n._1DIimpm0iJewCr_4Ee8NTa {\n background-color: transparent\n}\n }\n\n@media (min-width: 640px) {\n\n._1DIimpm0iJewCr_4Ee8NTa {\n background-color: transparent\n}\n }\n\n@media (--medium-screens) {\n\n._1DIimpm0iJewCr_4Ee8NTa {\n background-color: transparent\n}\n }\n\n.qVvYE_6U6kPoQ4ms_2slA {\n width: 100%;\n}\n";
22
- var styles = {"wrapper":"_3dsZe-fIMb0ftQQAJf53tI","menu":"_15jh7FtEcALDetgrjoV8HG","above":"_2S3J3IQ4JcMgnYjzx3A9AA","below":"qgoF1WJ8Cu39FVc3p_c8w","left":"_2QwnAwwIXZuZReq2cUwEoX","right":"_2Bdz7gjSU8id-Og42er82U","section":"_1j-ztPLXQgH-5XOlXybf0-","sectionHeader":"ecEGgRDm96wrHymIDR1FM","action":"_1lmtkHVgn76IrVsqnqlOYh","icon":"QMbGAf7Vb6_SM8qOIvLMc","overlay":"_1DIimpm0iJewCr_4Ee8NTa","fullWidth":"qVvYE_6U6kPoQ4ms_2slA"};
21
+ var css = "._3dsZe-fIMb0ftQQAJf53tI * {\n box-sizing: border-box;\n}\n\n._3dsZe-fIMb0ftQQAJf53tI {\n display: inline-block;\n position: relative;\n}\n\n._15jh7FtEcALDetgrjoV8HG {\n position: fixed;\n bottom: 0;\n left: 0;\n z-index: var(--elevation-menu);\n width: 100%;\n max-height: 72vh;\n padding: var(--space-small);\n padding-bottom: calc(env(safe-area-inset-bottom) + var(--space-small));\n border-radius: var(--radius-base) var(--radius-base) 0 0;\n -webkit-overflow-scrolling: touch;\n overflow-y: scroll;\n background-color: var(--color-surface)\n}\n\n@media (min-width: 640px) {\n\n._15jh7FtEcALDetgrjoV8HG {\n position: absolute;\n left: auto;\n width: calc(var(--base-unit) * 12.5);\n box-shadow: var(--shadow-base);\n padding: var(--space-small);\n border: var(--border-base) solid var(--color-border);\n border-radius: var(--radius-base);\n overflow: auto\n}\n }\n\n@media (min-width: 640px) {\n\n._15jh7FtEcALDetgrjoV8HG {\n position: absolute;\n left: auto;\n width: calc(var(--base-unit) * 12.5);\n box-shadow: var(--shadow-base);\n padding: var(--space-small);\n border: var(--border-base) solid var(--color-border);\n border-radius: var(--radius-base);\n overflow: auto\n}\n }\n\n@media (--medium-screens) {\n\n._15jh7FtEcALDetgrjoV8HG {\n position: absolute;\n left: auto;\n width: calc(var(--base-unit) * 12.5);\n box-shadow: var(--shadow-base);\n padding: var(--space-small);\n border: var(--border-base) solid var(--color-border);\n border-radius: var(--radius-base);\n overflow: auto\n}\n }\n\n@media (min-width: 640px) {\n\n._2S3J3IQ4JcMgnYjzx3A9AA {\n bottom: 100%;\n margin-bottom: var(--space-smallest)\n}\n }\n\n@media (min-width: 640px) {\n\n._2S3J3IQ4JcMgnYjzx3A9AA {\n bottom: 100%;\n margin-bottom: var(--space-smallest)\n}\n }\n\n@media (--medium-screens) {\n\n._2S3J3IQ4JcMgnYjzx3A9AA {\n bottom: 100%;\n margin-bottom: var(--space-smallest)\n}\n }\n\n@media (min-width: 640px) {\n\n.qgoF1WJ8Cu39FVc3p_c8w {\n top: 100%;\n bottom: auto;\n margin-top: var(--space-smallest)\n}\n }\n\n@media (min-width: 640px) {\n\n.qgoF1WJ8Cu39FVc3p_c8w {\n top: 100%;\n bottom: auto;\n margin-top: var(--space-smallest)\n}\n }\n\n@media (--medium-screens) {\n\n.qgoF1WJ8Cu39FVc3p_c8w {\n top: 100%;\n bottom: auto;\n margin-top: var(--space-smallest)\n}\n }\n\n@media (min-width: 640px) {\n\n._2QwnAwwIXZuZReq2cUwEoX {\n right: 0;\n left: auto\n}\n }\n\n@media (min-width: 640px) {\n\n._2QwnAwwIXZuZReq2cUwEoX {\n right: 0;\n left: auto\n}\n }\n\n@media (--medium-screens) {\n\n._2QwnAwwIXZuZReq2cUwEoX {\n right: 0;\n left: auto\n}\n }\n\n@media (min-width: 640px) {\n\n._2Bdz7gjSU8id-Og42er82U {\n right: auto;\n left: 0\n}\n }\n\n@media (min-width: 640px) {\n\n._2Bdz7gjSU8id-Og42er82U {\n right: auto;\n left: 0\n}\n }\n\n@media (--medium-screens) {\n\n._2Bdz7gjSU8id-Og42er82U {\n right: auto;\n left: 0\n}\n }\n\n._1j-ztPLXQgH-5XOlXybf0- {\n padding: var(--space-small) 0;\n border-bottom: var(--border-base) dotted var(--color-border);\n}\n\n._1j-ztPLXQgH-5XOlXybf0-:first-of-type {\n padding-top: 0;\n}\n\n._1j-ztPLXQgH-5XOlXybf0-:last-of-type {\n padding-bottom: 0;\n border-bottom: none;\n}\n\n.ecEGgRDm96wrHymIDR1FM {\n padding: var(--space-small);\n}\n\n._1lmtkHVgn76IrVsqnqlOYh {\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n padding: var(--space-small);\n border: none;\n border-radius: var(--radius-base);\n background-color: transparent;\n cursor: pointer;\n -ms-flex-align: center;\n align-items: center;\n}\n\n._1lmtkHVgn76IrVsqnqlOYh:hover,\n._1lmtkHVgn76IrVsqnqlOYh:focus {\n background-color: var(--color-surface--hover);\n outline-color: var(--color-focus);\n}\n\n.QMbGAf7Vb6_SM8qOIvLMc {\n margin-right: var(--space-base);\n}\n\n._1DIimpm0iJewCr_4Ee8NTa {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: var(--elevation-menu);\n background-color: rgba(\n 101,\n 120,\n 132,\n 0.8\n ) /* until we figure out rgba + color vars... */\n}\n\n@media (min-width: 640px) {\n\n._1DIimpm0iJewCr_4Ee8NTa {\n background-color: transparent\n}\n }\n\n@media (min-width: 640px) {\n\n._1DIimpm0iJewCr_4Ee8NTa {\n background-color: transparent\n}\n }\n\n@media (--medium-screens) {\n\n._1DIimpm0iJewCr_4Ee8NTa {\n background-color: transparent\n}\n }\n\n.qVvYE_6U6kPoQ4ms_2slA {\n width: 100%;\n}\n\n._3Pk5uJMOz91YR7eDwLASEh {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n}\n";
22
+ var styles = {"wrapper":"_3dsZe-fIMb0ftQQAJf53tI","menu":"_15jh7FtEcALDetgrjoV8HG","above":"_2S3J3IQ4JcMgnYjzx3A9AA","below":"qgoF1WJ8Cu39FVc3p_c8w","left":"_2QwnAwwIXZuZReq2cUwEoX","right":"_2Bdz7gjSU8id-Og42er82U","section":"_1j-ztPLXQgH-5XOlXybf0-","sectionHeader":"ecEGgRDm96wrHymIDR1FM","action":"_1lmtkHVgn76IrVsqnqlOYh","icon":"QMbGAf7Vb6_SM8qOIvLMc","overlay":"_1DIimpm0iJewCr_4Ee8NTa","fullWidth":"qVvYE_6U6kPoQ4ms_2slA","screenReaderOnly":"_3Pk5uJMOz91YR7eDwLASEh"};
23
23
  __chunk_2.styleInject(css);
24
24
 
25
25
  var variation = {
@@ -93,7 +93,7 @@ function Menu(_a) {
93
93
  duration: 0.25,
94
94
  } }, items.map(function (item, key) { return (React__default.createElement("div", { key: key, className: styles.section },
95
95
  item.header && React__default.createElement(SectionHeader, { text: item.header }),
96
- item.actions.map(function (action, index) { return (React__default.createElement(Action, __chunk_1.__assign({ key: action.label, shouldFocus: key === 0 && index === 0 }, action))); }))); })))))));
96
+ item.actions.map(function (action, index) { return (React__default.createElement(Action, __chunk_1.__assign({ sectionLabel: item.header, key: action.label, shouldFocus: key === 0 && index === 0 }, action))); }))); })))))));
97
97
  function toggle(callbackPassthrough) {
98
98
  return function (event) {
99
99
  setVisible(!visible);
@@ -118,7 +118,7 @@ function SectionHeader(_a) {
118
118
  React__default.createElement(index.Typography, { element: "h6", size: "small", textCase: "uppercase", textColor: "greyBlue", fontWeight: "bold" }, text)));
119
119
  }
120
120
  function Action(_a) {
121
- var label = _a.label, icon = _a.icon, onClick = _a.onClick, _b = _a.shouldFocus, shouldFocus = _b === void 0 ? false : _b;
121
+ var label = _a.label, sectionLabel = _a.sectionLabel, icon = _a.icon, onClick = _a.onClick, _b = _a.shouldFocus, shouldFocus = _b === void 0 ? false : _b;
122
122
  var actionButtonRef = React.useRef();
123
123
  React.useEffect(function () {
124
124
  if (actionButtonRef.current && shouldFocus) {
@@ -128,7 +128,9 @@ function Action(_a) {
128
128
  return (React__default.createElement("button", { role: "menuitem", className: styles.action, key: label, onClick: onClick, ref: actionButtonRef },
129
129
  icon && (React__default.createElement("span", { className: styles.icon },
130
130
  React__default.createElement(index$2.Icon, { name: icon }))),
131
- React__default.createElement(index.Typography, { element: "span", size: "base", textColor: "greyBlueDark" }, label)));
131
+ React__default.createElement(index.Typography, { element: "span", size: "base", textColor: "greyBlueDark" },
132
+ sectionLabel && (React__default.createElement("span", { className: styles.screenReaderOnly }, sectionLabel)),
133
+ label)));
132
134
  }
133
135
 
134
136
  exports.Menu = Menu;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jobber/components",
3
- "version": "2.71.7",
3
+ "version": "2.72.2",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -19,7 +19,7 @@
19
19
  "dependencies": {
20
20
  "@jobber/design": "^0.21.0",
21
21
  "@jobber/formatters": "^0.2.0",
22
- "@jobber/hooks": "^1.9.1",
22
+ "@jobber/hooks": "^1.10.0",
23
23
  "@popperjs/core": "^2.0.6",
24
24
  "@std-proposal/temporal": "0.0.1",
25
25
  "@types/color": "^3.0.1",
@@ -84,5 +84,5 @@
84
84
  "> 1%",
85
85
  "IE 10"
86
86
  ],
87
- "gitHead": "7982ab7dda84412857549329d064955019a0e144"
87
+ "gitHead": "0bed1d6c9e1735478cfb4c117289cde4c6d3727c"
88
88
  }