@jobber/components 2.89.0 → 2.89.2

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.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
+
+
+
+
+
 # [2.89.0](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.88.0...@jobber/components@2.89.0) (2022-11-25)
 
 

package/dist/DataTable/DataTable.d.ts

@@ -1,5 +1,5 @@
 import { ColumnDef, Row } from "@tanstack/react-table";
-import { PaginationType, Sorting } from "./types";
+import { PaginationType, SortingType } from "./types";
 export interface DataTableProps<T> {
     /**
      * The actual data that will be used for the table.
@@ -24,7 +24,7 @@ export interface DataTableProps<T> {
      * https://tanstack.com/table/v8/docs/api/features/sorting#table-options
      *
      */
-    sorting?: Sorting;
+    sorting?: SortingType;
     /**
      * This will force the table to have the specified hight
      *

package/dist/DataTable/Header.d.ts

@@ -1,9 +1,9 @@
 import { Row, Table } from "@tanstack/react-table";
-import { Sorting } from "./types";
+import { SortingType } from "./types";
 interface HeaderProps<T> {
     table: Table<T>;
     stickyHeader?: boolean;
-    sorting?: Sorting;
+    sorting?: SortingType;
     onRowClick?: (row: Row<T>) => void;
 }
 export declare function Header<T extends object>({ table, stickyHeader, sorting, onRowClick, }: HeaderProps<T>): JSX.Element;

package/dist/DataTable/createTableSettings.d.ts

@@ -1,6 +1,6 @@
 import { ColumnDef } from "@tanstack/react-table";
-import { Pagination, Sorting } from "./types";
+import { PaginationType, SortingType } from "./types";
 export declare function createTableSettings<T>(data: T[], columns: ColumnDef<T>[], options?: {
-    pagination?: Pagination;
-    sorting?: Sorting;
+    pagination?: PaginationType;
+    sorting?: SortingType;
 }): any;

package/dist/DataTable/index.js

@@ -118,7 +118,7 @@ function Pagination(_a) {
             React__default["default"].createElement("div", { className: styles$1.paginationSelect },
                 React__default["default"].createElement(Option.Select, { value: table.getState().pagination.pageSize, onChange: function (value) {
                         table.setPageSize(Number(value));
-                    } }, itemsPerPageOptions.map(function (numOfPages) { return (React__default["default"].createElement(Option.SelectOption, { key: numOfPages, value: numOfPages }, numOfPages)); })),
+                    }, size: "small" }, itemsPerPageOptions.map(function (numOfPages) { return (React__default["default"].createElement(Option.SelectOption, { key: numOfPages, value: numOfPages }, numOfPages)); })),
                 React__default["default"].createElement("span", { className: styles$1.paginationSelectLabel }, "per page")),
             React__default["default"].createElement("div", { className: styles$1.paginationButtons },
                 React__default["default"].createElement(Button.Button, { type: "secondary", variation: "subtle", icon: "arrowLeft", ariaLabel: "arrowLeft", onClick: function () { return table.previousPage(); }, disabled: !table.getCanPreviousPage() }),
@@ -131,19 +131,16 @@ function Header(_a) {
     var stickyClass = classnames__default["default"]((_b = {}, _b[styles$2.stickyHeader] = stickyHeader, _b));
     return (React__default["default"].createElement("thead", { className: stickyClass }, table.getHeaderGroups().map(function (headerGroup) { return (React__default["default"].createElement("tr", { key: headerGroup.id }, headerGroup.headers.map(function (header) {
         var _a;
-        var _b;
         return (React__default["default"].createElement("th", { key: header.id, colSpan: header.colSpan, className: sorting && header.column.getCanSort()
                 ? classnames__default["default"](styles$2.sortableColumn, (_a = {},
                     _a[styles$2.pinFirstHeaderSortable] = !!onRowClick,
                     _a))
                 : "", onClick: sorting ? header.column.getToggleSortingHandler() : undefined }, header.isPlaceholder ? null : (React__default["default"].createElement("div", null,
-            reactTable.flexRender(header.column.columnDef.header, header.getContext()), (_b = {
-            asc: React__default["default"].createElement(Icon.Icon, { name: "longArrowUp", color: "green" }),
-            desc: React__default["default"].createElement(Icon.Icon, { name: "longArrowDown", color: "green" }),
-        }[header.column.getIsSorted()]) !== null && _b !== void 0 ? _b : (React__default["default"].createElement("svg", { style: {
-                width: "var(--space-large)",
-                height: "var(--space-large)",
-            } }))))));
+            reactTable.flexRender(header.column.columnDef.header, header.getContext()),
+            {
+                asc: React__default["default"].createElement(Icon.Icon, { name: "longArrowUp", color: "green" }),
+                desc: React__default["default"].createElement(Icon.Icon, { name: "longArrowDown", color: "green" }),
+            }[header.column.getIsSorted()]))));
     }))); })));
 }
 

package/dist/DataTable/types.d.ts

@@ -80,4 +80,4 @@ export interface DefaultSorting {
      */
     manualSorting: false;
 }
-export declare type Sorting = DefaultSorting | ManualSorting;
+export declare type SortingType = DefaultSorting | ManualSorting;

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._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.0",
+  "version": "2.89.2",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -84,5 +84,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "2ae2744cf0846f54353087b6f0ea2fd130fd1a2e"
+  "gitHead": "bd79dd924d2659617994f629ece5e09a660ff5f7"
 }