@jobber/components 2.89.1 → 2.89.3

package/CHANGELOG.md

@@ -8,6 +8,22 @@ menu: Changelog
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.89.3](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.89.2...@jobber/components@2.89.3) (2022-12-12)
+
+**Note:** Version bump only for package @jobber/components
+
+
+
+
+
+## [2.89.2](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.89.1...@jobber/components@2.89.2) (2022-12-07)
+
+**Note:** Version bump only for package @jobber/components
+
+
+
+
+
 ## [2.89.1](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.89.0...@jobber/components@2.89.1) (2022-11-30)
 
 **Note:** Version bump only for package @jobber/components

package/dist/MultiSelect/MultiSelect.d.ts

@@ -17,6 +17,10 @@ interface MultiSelectProps {
      * Change handler
      */
     onOptionsChange: Dispatch<React.SetStateAction<Options>>;
+    /**
+     * Adjusts the interface to either have small or large spacing.
+     */
+    readonly size?: "small" | "large";
 }
-export declare function MultiSelect({ defaultLabel, allSelectedLabel, options, onOptionsChange, }: MultiSelectProps): JSX.Element;
+export declare function MultiSelect({ defaultLabel, allSelectedLabel, options, onOptionsChange, size, }: MultiSelectProps): JSX.Element;
 export {};

package/dist/MultiSelect/index.js

@@ -18,8 +18,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-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";
-var styles$1 = {"multiSelectContainer":"_5SXg5kHN1rObHmXNp_iaJ","multiSelect":"_3DcjSBXtI1-sptltr_DPIh","active":"y1fw0Iy-QRJk5kSWc6TU"};
+var css$1 = "._5SXg5kHN1rObHmXNp_iaJ {\n  position: relative;\n  width: 100%;\n}\n\n._5SXg5kHN1rObHmXNp_iaJ * {\n  box-sizing: border-box;\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";
+var styles$1 = {"multiSelectContainer":"_5SXg5kHN1rObHmXNp_iaJ","multiSelect":"_3DcjSBXtI1-sptltr_DPIh","active":"y1fw0Iy-QRJk5kSWc6TU","small":"_3egssIneZKNCN19CY2tTIL","large":"_1rVSENYUaPjYNP1ZTY5GbV"};
 styleInject_es.styleInject(css$1);
 
 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) {
 // eslint-disable-next-line max-statements
 function MultiSelect(_a) {
     var _b;
-    var defaultLabel = _a.defaultLabel, allSelectedLabel = _a.allSelectedLabel, options = _a.options, onOptionsChange = _a.onOptionsChange;
+    var defaultLabel = _a.defaultLabel, allSelectedLabel = _a.allSelectedLabel, options = _a.options, onOptionsChange = _a.onOptionsChange, size = _a.size;
     var _c = tslib_es6.__read(React.useState(defaultLabel), 2), label = _c[0], setLabel = _c[1];
     var _d = tslib_es6.__read(React.useState(false), 2), menuVisible = _d[0], setMenuVisible = _d[1];
     var _e = tslib_es6.__read(React.useState(false), 2), focused = _e[0], setFocused = _e[1];
@@ -137,6 +137,8 @@ function MultiSelect(_a) {
     var multiSelectRef = React.useRef();
     var multiSelectClass = classnames__default["default"](styles$1.multiSelect, (_b = {},
         _b[styles$1.active] = menuVisible,
+        _b[styles$1.large] = size === "large",
+        _b[styles$1.small] = size === "small",
         _b));
     function handleMenuVisibility() {
         multiSelectRef.current.focus();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "2.89.1",
+  "version": "2.89.3",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -84,5 +84,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "558080c2e04649042031a7529a45d66b3297d085"
+  "gitHead": "af9e5f7ae015b06a7da02e7e38a5008a4a48b676"
 }