@jobber/components 2.89.1 → 2.89.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 (4) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/MultiSelect/MultiSelect.d.ts +5 -1
  3. package/dist/MultiSelect/index.js +5 -3
  4. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -8,6 +8,14 @@ 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.89.2](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.89.1...@jobber/components@2.89.2) (2022-12-07)
12
+
13
+ **Note:** Version bump only for package @jobber/components
14
+
15
+
16
+
17
+
18
+
11
19
  ## [2.89.1](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.89.0...@jobber/components@2.89.1) (2022-11-30)
12
20
 
13
21
  **Note:** Version bump only for package @jobber/components
package/dist/MultiSelect/MultiSelect.d.ts CHANGED
@@ -17,6 +17,10 @@ interface MultiSelectProps {
17
17
  * Change handler
18
18
  */
19
19
  onOptionsChange: Dispatch<React.SetStateAction<Options>>;
20
+ /**
21
+ * Adjusts the interface to either have small or large spacing.
22
+ */
23
+ readonly size?: "small" | "large";
20
24
  }
21
- export declare function MultiSelect({ defaultLabel, allSelectedLabel, options, onOptionsChange, }: MultiSelectProps): JSX.Element;
25
+ export declare function MultiSelect({ defaultLabel, allSelectedLabel, options, onOptionsChange, size, }: MultiSelectProps): JSX.Element;
22
26
  export {};
package/dist/MultiSelect/index.js CHANGED
@@ -18,8 +18,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
18
18
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
19
19
  var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
20
20
 
21
- var css$1 = "._5SXg5kHN1rObHmXNp_iaJ {\n position: relative;\n width: 100%;\n}\n\n._3DcjSBXtI1-sptltr_DPIh {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: row;\n flex-direction: row;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -ms-flex-align: center;\n align-items: center;\n padding-top: calc(var(--space-base) - var(--space-smallest));\n padding-bottom: calc(var(--space-base) - var(--space-smallest));\n padding-left: var(--space-base);\n padding-right: var(--space-base);\n border: var(--border-base) solid var(--color-border);\n border-radius: var(--radius-base);\n}\n\n._3DcjSBXtI1-sptltr_DPIh p {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n._5SXg5kHN1rObHmXNp_iaJ:hover,\n._5SXg5kHN1rObHmXNp_iaJ._3DcjSBXtI1-sptltr_DPIh {\n cursor: pointer;\n caret-color: transparent;\n}\n\n._3DcjSBXtI1-sptltr_DPIh:focus,\n._3DcjSBXtI1-sptltr_DPIh.y1fw0Iy-QRJk5kSWc6TU {\n box-shadow: var(--shadow-focus);\n outline: none;\n}\n";
22
- var styles$1 = {"multiSelectContainer":"_5SXg5kHN1rObHmXNp_iaJ","multiSelect":"_3DcjSBXtI1-sptltr_DPIh","active":"y1fw0Iy-QRJk5kSWc6TU"};
21
+ var css$1 = "._5SXg5kHN1rObHmXNp_iaJ {\n position: relative;\n width: 100%;\n}\n\n._3DcjSBXtI1-sptltr_DPIh {\n --field--height: var(--space-largest);\n\n --field--padding-top: calc(var(--space-base) - var(--space-smallest));\n --field--padding-bottom: calc(var(--space-base) - var(--space-smallest));\n --field--padding-left: var(--space-base);\n --field--padding-right: var(--space-base);\n\n display: -ms-flexbox;\n\n display: flex;\n -ms-flex-direction: row;\n flex-direction: row;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -ms-flex-align: center;\n align-items: center;\n width: 100%;\n height: var(--field--height);\n padding-top: var(--field--padding-top);\n padding-bottom: var(--field--padding-bottom);\n padding-left: var(--field--padding-left);\n padding-right: var(--field--padding-right);\n border: var(--border-base) solid var(--color-border);\n border-radius: var(--radius-base);\n}\n\n._3DcjSBXtI1-sptltr_DPIh p {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n._5SXg5kHN1rObHmXNp_iaJ:hover,\n._5SXg5kHN1rObHmXNp_iaJ._3DcjSBXtI1-sptltr_DPIh {\n cursor: pointer;\n caret-color: transparent;\n}\n\n._3DcjSBXtI1-sptltr_DPIh:focus,\n._3DcjSBXtI1-sptltr_DPIh.y1fw0Iy-QRJk5kSWc6TU {\n box-shadow: var(--shadow-focus);\n outline: none;\n}\n\n._3egssIneZKNCN19CY2tTIL {\n --field--padding-left: calc(var(--space-base) - var(--space-smaller));\n --field--padding-right: calc(var(--space-base) - var(--space-smaller));\n --field--height: calc(var(--space-larger) + var(--space-smaller));\n}\n\n._1rVSENYUaPjYNP1ZTY5GbV {\n --field--padding-left: var(--space-large);\n --field--padding-right: var(--space-large);\n --field--height: calc(var(--space-extravagant));\n}\n";
22
+ var styles$1 = {"multiSelectContainer":"_5SXg5kHN1rObHmXNp_iaJ","multiSelect":"_3DcjSBXtI1-sptltr_DPIh","active":"y1fw0Iy-QRJk5kSWc6TU","small":"_3egssIneZKNCN19CY2tTIL","large":"_1rVSENYUaPjYNP1ZTY5GbV"};
23
23
  styleInject_es.styleInject(css$1);
24
24
 
25
25
  var css = "._3fnWzTcXADLV1Cck8AvQXx {\n display: -ms-flexbox;\n display: flex;\n position: absolute;\n z-index: var(--elevation-menu);\n width: 100%;\n max-height: calc(var(--space-extravagant) * 5);\n box-shadow: var(--shadow-base);\n margin: 0;\n padding: 0;\n border: var(--border-base) solid var(--color-border);\n border-radius: var(--radius-large);\n overflow: auto;\n background-color: var(--color-surface);\n -ms-flex-direction: column;\n flex-direction: column;\n scroll-behavior: smooth;\n}\n\n._3fnWzTcXADLV1Cck8AvQXx li {\n list-style: none;\n}\n\n._1ujGx9WtIEWz5g_6vsrhJM {\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n padding: var(--space-small) var(--space-base);\n cursor: pointer;\n transition: all var(--timing-base);\n}\n\n._1ujGx9WtIEWz5g_6vsrhJM:focus,\n._1ujGx9WtIEWz5g_6vsrhJM._3X26eN0ET6mLwNPXpC98so {\n background-color: var(--color-surface--hover);\n outline-color: var(--color-focus);\n}\n";
@@ -129,7 +129,7 @@ function DropDownMenu(_a) {
129
129
  // eslint-disable-next-line max-statements
130
130
  function MultiSelect(_a) {
131
131
  var _b;
132
- var defaultLabel = _a.defaultLabel, allSelectedLabel = _a.allSelectedLabel, options = _a.options, onOptionsChange = _a.onOptionsChange;
132
+ var defaultLabel = _a.defaultLabel, allSelectedLabel = _a.allSelectedLabel, options = _a.options, onOptionsChange = _a.onOptionsChange, size = _a.size;
133
133
  var _c = tslib_es6.__read(React.useState(defaultLabel), 2), label = _c[0], setLabel = _c[1];
134
134
  var _d = tslib_es6.__read(React.useState(false), 2), menuVisible = _d[0], setMenuVisible = _d[1];
135
135
  var _e = tslib_es6.__read(React.useState(false), 2), focused = _e[0], setFocused = _e[1];
@@ -137,6 +137,8 @@ function MultiSelect(_a) {
137
137
  var multiSelectRef = React.useRef();
138
138
  var multiSelectClass = classnames__default["default"](styles$1.multiSelect, (_b = {},
139
139
  _b[styles$1.active] = menuVisible,
140
+ _b[styles$1.large] = size === "large",
141
+ _b[styles$1.small] = size === "small",
140
142
  _b));
141
143
  function handleMenuVisibility() {
142
144
  multiSelectRef.current.focus();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jobber/components",
3
- "version": "2.89.1",
3
+ "version": "2.89.2",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -84,5 +84,5 @@
84
84
  "> 1%",
85
85
  "IE 10"
86
86
  ],
87
- "gitHead": "558080c2e04649042031a7529a45d66b3297d085"
87
+ "gitHead": "bd79dd924d2659617994f629ece5e09a660ff5f7"
88
88
  }