@itwin/itwinui-react 1.35.0 → 1.37.1

package/esm/core/utils/color/ColorValue.js

@@ -328,9 +328,9 @@ var ColorValue = /** @class */ (function () {
             if (value < 0) {
                 value = 0xffffffff + value + 1;
             }
-            return "#" + ("00000000" + value.toString(16)).slice(-8);
+            return "#".concat("00000000".concat(value.toString(16)).slice(-8));
         }
-        return "#" + ("000000" + this.getRgb().toString(16)).slice(-6);
+        return "#".concat("000000".concat(this.getRgb().toString(16)).slice(-6));
     };
     /**
      * Compute the 0xTTBBGGRR color corresponding to the specified hue, saturation, lightness values.
@@ -490,34 +490,34 @@ var ColorValue = /** @class */ (function () {
     ColorValue.prototype.toRgbString = function (includeAlpha) {
         var _a;
         var rgb = this.toRgbColor();
-        var rgbString = rgb.r + ", " + rgb.g + ", " + rgb.b;
+        var rgbString = "".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b);
         if (includeAlpha) {
             var alpha = (_a = rgb.a) !== null && _a !== void 0 ? _a : 1;
-            return "rgba(" + rgbString + ", " + ColorValue.getFormattedColorNumber(alpha, 2) + ")";
+            return "rgba(".concat(rgbString, ", ").concat(ColorValue.getFormattedColorNumber(alpha, 2), ")");
         }
-        return "rgb(" + rgbString + ")";
+        return "rgb(".concat(rgbString, ")");
     };
     /** Convert this ColorValue to a string in the form "hsl(h,s,l) or hsla(h,s,l,a)" - i.e hsl(120,50%,50%). */
     ColorValue.prototype.toHslString = function (includeAlpha) {
         var _a, _b;
         var hsl = this.toHslColor();
-        var hslString = ColorValue.getFormattedColorNumber((_a = this._hue) !== null && _a !== void 0 ? _a : hsl.h) + ", " + ColorValue.getFormattedColorNumber(hsl.s) + "%, " + ColorValue.getFormattedColorNumber(hsl.l) + "%";
+        var hslString = "".concat(ColorValue.getFormattedColorNumber((_a = this._hue) !== null && _a !== void 0 ? _a : hsl.h), ", ").concat(ColorValue.getFormattedColorNumber(hsl.s), "%, ").concat(ColorValue.getFormattedColorNumber(hsl.l), "%");
         if (includeAlpha) {
             var alpha = (_b = hsl.a) !== null && _b !== void 0 ? _b : 1;
-            return "hsla(" + hslString + ", " + ColorValue.getFormattedColorNumber(alpha, 2) + ")";
+            return "hsla(".concat(hslString, ", ").concat(ColorValue.getFormattedColorNumber(alpha, 2), ")");
         }
-        return "hsl(" + hslString + ")";
+        return "hsl(".concat(hslString, ")");
     };
     /** Convert this ColorValue to a string in the form "hsv(h,s,v) or hsva(h,s,v,a)" - i.e hsv(120,50%,50%). */
     ColorValue.prototype.toHsvString = function (includeAlpha) {
         var _a, _b;
         var hsv = this.toHsvColor();
-        var hsvString = ((_a = this._hue) !== null && _a !== void 0 ? _a : hsv.h) + ", " + hsv.s + "%, " + hsv.v + "%";
+        var hsvString = "".concat((_a = this._hue) !== null && _a !== void 0 ? _a : hsv.h, ", ").concat(hsv.s, "%, ").concat(hsv.v, "%");
         if (includeAlpha) {
             var alpha = (_b = hsv.a) !== null && _b !== void 0 ? _b : 1;
-            return "hsva(" + hsvString + ", " + ColorValue.getFormattedColorNumber(alpha, 2) + ")";
+            return "hsva(".concat(hsvString, ", ").concat(ColorValue.getFormattedColorNumber(alpha, 2), ")");
         }
-        return "hsv(" + hsvString + ")";
+        return "hsv(".concat(hsvString, ")");
     };
     return ColorValue;
 }());

package/esm/core/utils/components/FocusTrap.js

@@ -19,23 +19,21 @@ export var FocusTrap = function (props) {
         return [firstElement, lastElement];
     };
     var onFirstFocus = function (event) {
-        var _a, _b;
-        var _c = getFirstLastFocusables(), firstElement = _c[0], lastElement = _c[1];
+        var _a = getFirstLastFocusables(), firstElement = _a[0], lastElement = _a[1];
         if (event.relatedTarget === firstElement) {
-            (_a = lastElement) === null || _a === void 0 ? void 0 : _a.focus();
+            lastElement === null || lastElement === void 0 ? void 0 : lastElement.focus();
         }
         else {
-            (_b = firstElement) === null || _b === void 0 ? void 0 : _b.focus();
+            firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
         }
     };
     var onLastFocus = function (event) {
-        var _a, _b;
-        var _c = getFirstLastFocusables(), firstElement = _c[0], lastElement = _c[1];
+        var _a = getFirstLastFocusables(), firstElement = _a[0], lastElement = _a[1];
         if (event.relatedTarget === lastElement) {
-            (_a = firstElement) === null || _a === void 0 ? void 0 : _a.focus();
+            firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
         }
         else {
-            (_b = lastElement) === null || _b === void 0 ? void 0 : _b.focus();
+            lastElement === null || lastElement === void 0 ? void 0 : lastElement.focus();
         }
     };
     return (React.createElement("div", null,

package/esm/core/utils/components/InputContainer.js

@@ -37,7 +37,7 @@ export var InputContainer = function (props) {
     return (React.createElement(Element, __assign({ className: cx('iui-input-container', (_a = {
                 'iui-disabled': disabled
             },
-            _a["iui-" + status] = !!status,
+            _a["iui-".concat(status)] = !!status,
             _a['iui-inline-label'] = isLabelInline,
             _a['iui-inline-icon'] = isIconInline,
             _a['iui-with-message'] = (!!message || !!icon || !!statusMessage) && !isLabelInline,

package/esm/core/utils/components/MiddleTextTruncation.js

@@ -38,7 +38,7 @@ export var MiddleTextTruncation = function (props) {
     var _b = useOverflow(text), ref = _b[0], visibleCount = _b[1];
     var truncatedText = React.useMemo(function () {
         if (visibleCount < text.length) {
-            return "" + text.substr(0, visibleCount - endCharsCount - ELLIPSIS_CHAR.length) + ELLIPSIS_CHAR + text.substr(text.length - endCharsCount);
+            return "".concat(text.substr(0, visibleCount - endCharsCount - ELLIPSIS_CHAR.length)).concat(ELLIPSIS_CHAR).concat(text.substr(text.length - endCharsCount));
         }
         else {
             return text;

package/esm/core/utils/components/Popover.js

@@ -72,7 +72,19 @@ export var Popover = React.forwardRef(function (props, ref) {
         };
     }
     else {
-        computedProps.content = mounted ? props.content : '';
+        // Fixing issue where elements below Popover gets click events.
+        // Tippy uses react Portal, which propagates events by react tree, not dom tree.
+        // Read more: https://reactjs.org/docs/portals.html#event-bubbling-through-portals
+        var clonedContent = React.isValidElement(props.content)
+            ? React.cloneElement(props.content, {
+                onClick: function (e) {
+                    var _a, _b;
+                    e.stopPropagation();
+                    (_b = (_a = props.content.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                },
+            })
+            : props.content;
+        computedProps.content = mounted ? clonedContent : '';
     }
     return React.createElement(Tippy, __assign({}, computedProps, { ref: refs }));
 });

package/esm/core/utils/components/VirtualScroll.js

@@ -131,7 +131,7 @@ export var VirtualScroll = React.forwardRef(function (_a, ref) {
         if (!parentRef.current) {
             return;
         }
-        parentRef.current.style.transform = "translateY(" + getTranslateValue(childHeight.current, startIndex) + "px)";
+        parentRef.current.style.transform = "translateY(".concat(getTranslateValue(childHeight.current, startIndex), "px)");
     }, [bufferSize, itemsLength]);
     var removeScrollListener = React.useCallback(function () {
         var _a, _b;

package/esm/core/utils/components/WithCSSTransition.js

@@ -31,17 +31,17 @@ export var WithCSSTransition = function (props) {
     var expandedSize = React.useRef(0);
     var dimensionCamelCase = dimension === 'height' ? 'Height' : 'Width';
     return (React.createElement(CSSTransition, __assign({ in: visible, timeout: 200, unmountOnExit: true, onEnter: function (node) {
-            node.style["min" + dimensionCamelCase] = 'initial';
+            node.style["min".concat(dimensionCamelCase)] = 'initial';
             node.style[dimension] = '0px';
         }, onEntering: function (node) {
-            node.style[dimension] = expandedSize.current + "px";
+            node.style[dimension] = "".concat(expandedSize.current, "px");
         }, onEntered: function (node) {
-            node.style["min" + dimensionCamelCase] = '';
+            node.style["min".concat(dimensionCamelCase)] = '';
             node.style[dimension] = '';
         }, onExit: function (node) {
-            node.style[dimension] = expandedSize.current + "px";
+            node.style[dimension] = "".concat(expandedSize.current, "px");
         }, onExiting: function (node) {
-            node.style["min" + dimensionCamelCase] = 'initial';
+            node.style["min".concat(dimensionCamelCase)] = 'initial';
             node.style[dimension] = '0px';
         }, classNames: 'iui' }, rest), React.cloneElement(children, {
         ref: function (el) {

package/esm/core/utils/functions/focusable.js

@@ -24,7 +24,7 @@ export var getFocusableElements = function (container) {
     if (!container) {
         return [];
     }
-    var elements = container.querySelectorAll(tabbableElementsSelector + ", [tabindex=\"-1\"]");
+    var elements = container.querySelectorAll("".concat(tabbableElementsSelector, ", [tabindex=\"-1\"]"));
     return Array.from(elements).filter(function (el) {
         return !el.hasAttribute('disabled') &&
             !el.classList.contains('iui-disabled') &&

package/esm/core/utils/hooks/useOverflow.js

@@ -61,15 +61,15 @@ export var useOverflow = function (items, disabled, orientation) {
             return;
         }
         var dimension = orientation === 'horizontal' ? 'Width' : 'Height';
-        var availableSize = containerRef.current["offset" + dimension];
-        var requiredSize = containerRef.current["scroll" + dimension];
+        var availableSize = containerRef.current["offset".concat(dimension)];
+        var requiredSize = containerRef.current["scroll".concat(dimension)];
         if (availableSize < requiredSize) {
             var avgItemSize = requiredSize / visibleCount;
             var visibleItems = Math.floor(availableSize / avgItemSize);
             setVisibleCount(visibleItems);
         }
         else if (needsFullRerender.current) {
-            var childrenSize = Array.from(containerRef.current.children).reduce(function (sum, child) { return sum + child["offset" + dimension]; }, 0);
+            var childrenSize = Array.from(containerRef.current.children).reduce(function (sum, child) { return sum + child["offset".concat(dimension)]; }, 0);
             var avgItemSize = childrenSize / visibleCount;
             var visibleItems = Math.floor(availableSize / avgItemSize);
             // Doubling the visible items to overflow the container. Just to be safe.

package/esm/core/utils/hooks/useTheme.js

@@ -75,5 +75,5 @@ var applyTheme = function (theme, _a) {
     if (currentTheme) {
         classList.remove(currentTheme);
     }
-    classList.add("iui-theme-" + theme + (highContrast ? '-hc' : ''));
+    classList.add("iui-theme-".concat(theme).concat(highContrast ? '-hc' : ''));
 };

package/esm/types/react-table-config.d.ts

@@ -2,9 +2,22 @@
 declare module 'react-table' {
     type FieldType = 'text' | 'number' | 'date' | string;
     type CellRendererProps<D extends object = {}> = {
+        /**
+         * Cell HTML props passed from the Table.
+         */
         cellElementProps: TableCellProps;
+        /**
+         * Table specific cell props like `column`, `row`.
+         */
         cellProps: CellProps<D>;
+        /**
+         * Cell's content.
+         */
         children: React.ReactNode;
+        /**
+         * Function that returns whether the cell is disabled.
+         */
+        isDisabled?: (rowData: D) => boolean;
     };
     interface TableOptions<D extends object = {}> extends Omit<UseTableOptions<D>, 'data'>, UseRowSelectOptions<D>, UseExpandedOptions<D>, UseFiltersOptions<D>, UsePaginationOptions<D>, Omit<UseResizeColumnsOptions<D>, 'disableResizing'>, UseSortByOptions<D> {
         /**
@@ -73,6 +86,11 @@ declare module 'react-table' {
          * @default false
          */
         disableReordering?: boolean;
+        /**
+         * If true, column's visibility cannot be toggled.
+         * @default false
+         */
+        disableToggleVisibility?: boolean;
     }
     interface ColumnInstance<D extends object = {}> extends UseFiltersColumnProps<D>, UseGroupByColumnProps<D>, UseResizeColumnsColumnProps<D>, UseSortByColumnProps<D> {
         originalWidth: number;

package/package.json

@@ -1,11 +1,17 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "1.35.0",
+  "version": "1.37.1",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",
   "module": "esm/index.js",
   "typings": "cjs/index.d.ts",
+  "files": [
+    "cjs",
+    "esm",
+    "CHANGELOG.md",
+    "LICENSE.md"
+  ],
   "description": "A react implementation of our iTwinUI UX standards",
   "homepage": "https://github.com/iTwin/iTwinUI-react",
   "keywords": [
@@ -23,24 +29,24 @@
     "ux"
   ],
   "scripts": {
-    "build": "yarn clean && yarn mkdirp lib/ && yarn copy-files && tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json",
-    "build:watch": "yarn clean && yarn mkdirp lib/ && yarn copy-files && concurrently \"tsc -p tsconfig.cjs.json --watch\" \"tsc -p tsconfig.esm.json --watch\"",
-    "clean": "yarn clean:coverage && yarn clean:lib",
+    "build": "yarn clean && yarn copy-files && tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json",
+    "build:watch": "yarn clean && yarn copy-files && concurrently \"tsc -p tsconfig.cjs.json --watch\" \"tsc -p tsconfig.esm.json --watch\"",
+    "clean": "yarn clean:coverage && rimraf esm && rimraf cjs",
     "clean:coverage": "rimraf coverage",
-    "clean:lib": "rimraf lib",
     "test": "jest",
     "test:watch": "jest --watch",
     "createComponent": "node scripts/createComponent.js",
-    "pretty": "prettier --config .prettierrc \"scripts/**/*\" src/{__tests__,core,style,utils}/**/*{tsx,ts,jsx,js,css,scss} --write",
-    "lint": "eslint */**/*.{js,ts,tsx} --max-warnings=0",
+    "format": "prettier --config .prettierrc **/*.{tsx,ts,js} --ignore-path .gitignore --write",
+    "lint": "eslint \"**/*.{js,ts,tsx}\" --max-warnings=0",
     "lint:fix": "yarn lint --fix && yarn lint:copyright --fix */**/*.{js,ts,tsx}",
     "lint:copyright": "node scripts/copyrightLinter.js",
-    "copy-files": "cpx package.json lib && cpx \"{README,LICENSE,CHANGELOG}.md \" lib",
+    "copy-files": "cpx \"../../{README,LICENSE}.md\" .",
     "storybook": "start-storybook -p 6006",
+    "dev": "yarn storybook",
     "build-storybook": "build-storybook"
   },
   "dependencies": {
-    "@itwin/itwinui-css": "^0.53.3",
+    "@itwin/itwinui-css": "^0.55.0",
     "@itwin/itwinui-icons-react": "^1.5.0",
     "@itwin/itwinui-illustrations-react": "^1.0.1",
     "@tippyjs/react": "^4.2.5",
@@ -73,18 +79,13 @@
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.3",
     "@types/react-transition-group": "^2.9.2",
-    "@typescript-eslint/eslint-plugin": "^4.31.1",
-    "@typescript-eslint/parser": "^4.31.1",
+    "@typescript-eslint/eslint-plugin": "^5.17.0",
+    "@typescript-eslint/parser": "^5.17.0",
     "babel-loader": "^8.2.2",
     "concurrently": "^5.3.0",
+    "configs": "*",
     "cpx": "^1.5.0",
     "creevey": "^0.8.0-beta.0",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.25.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-storybook": "^0.5.7",
     "fast-glob": "^3.2.5",
     "husky": "^4.0.0",
     "inquirer": "^6.2.2",
@@ -94,14 +95,13 @@
     "lint-staged": "^12.1.2",
     "markdown-to-jsx": "6.11.4",
     "mkdirp": "^1.0.4",
-    "prettier": "2.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "rimraf": "^2.6.2",
     "storybook-dark-mode": "^1.0.9",
     "tippy.js": "^6.3.1",
     "ts-jest": "^27.0.4",
-    "ts-loader": "^8.0.1",
+    "ts-loader": "^9.2.8",
     "ts-node": "^8.0.2",
     "typescript": "^4.4.3",
     "webpack": "5"
@@ -134,10 +134,11 @@
   "lint-staged": {
     "*.{tsx,ts,jsx,js}": [
       "prettier --write",
-      "eslint --fix",
+      "eslint --max-warnings=0 --fix",
       "yarn lint:copyright --fix"
     ]
   },
+  "prettier": "configs/prettier-config",
   "sideEffects": [
     "**/*.scss",
     "**/*.css"