@itwin/itwinui-react 3.14.1 → 3.15.0

package/cjs/core/DropdownMenu/DropdownMenu.d.ts

@@ -16,6 +16,17 @@ export type DropdownMenuProps = {
      * Child element to wrap dropdown with.
      */
     children: React.ReactNode;
+    /**
+     * Middleware options.
+     *
+     * By default, `hide` is enabled. If the menu gets hidden even when it shouldn't (e.g. some custom styles interfering
+     * with the trigger's hide detection) consider disabling the `hide` middleware.
+     *
+     * @see https://floating-ui.com/docs/middleware
+     */
+    middleware?: {
+        hide?: boolean;
+    };
 } & Pick<Parameters<typeof usePopover>[0], 'visible' | 'onVisibleChange' | 'placement' | 'matchWidth'> & Pick<PortalProps, 'portal'>;
 /**
  * Dropdown menu component.

package/cjs/core/DropdownMenu/DropdownMenu.js

@@ -33,6 +33,7 @@ const DropdownMenuContent = _react.forwardRef((props, forwardedRef) => {
     matchWidth = false,
     onVisibleChange,
     portal = true,
+    middleware,
     ...rest
   } = props;
   let [visible, setVisible] = (0, _index.useControlledState)(
@@ -46,28 +47,28 @@ const DropdownMenuContent = _react.forwardRef((props, forwardedRef) => {
     return menuItems;
   }, [menuItems, setVisible]);
   return _react.createElement(
-    _react.Fragment,
-    null,
-    _react.createElement(
-      _Menu.Menu,
-      {
-        trigger: children,
-        onKeyDown: (0, _index.mergeEventHandlers)(props.onKeyDown, (e) => {
-          if (e.defaultPrevented) return;
-          if ('Tab' === e.key) setVisible(false);
-        }),
-        role: role,
-        ref: forwardedRef,
-        portal: portal,
-        popoverProps: {
+    _Menu.Menu,
+    {
+      trigger: children,
+      onKeyDown: (0, _index.mergeEventHandlers)(props.onKeyDown, (e) => {
+        if (e.defaultPrevented) return;
+        if ('Tab' === e.key) setVisible(false);
+      }),
+      role: role,
+      ref: forwardedRef,
+      portal: portal,
+      popoverProps: _react.useMemo(
+        () => ({
           placement,
           matchWidth,
           visible,
           onVisibleChange: setVisible,
-        },
-        ...rest,
-      },
-      menuContent,
-    ),
+          middleware,
+        }),
+        [matchWidth, middleware, placement, setVisible, visible],
+      ),
+      ...rest,
+    },
+    menuContent,
   );
 });

package/cjs/core/Footer/Footer.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import type { CommonProps } from '../../utils/index.js';
 export type TitleTranslations = {
-    termsOfService: string;
-    privacy: string;
-    termsOfUse: string;
-    cookies: string;
-    legalNotices: string;
+    termsOfService?: string;
+    privacy?: string;
+    termsOfUse?: string;
+    cookies?: string;
+    legalNotices?: string;
 };
 type FooterProps = {
     /**

package/cjs/core/Footer/Footer.js

@@ -26,7 +26,7 @@ const _FooterItem = require('./FooterItem.js');
 const _FooterSeparator = require('./FooterSeparator.js');
 const _FooterList = require('./FooterList.js');
 const _Anchor = require('../Typography/Anchor.js');
-const footerTranslations = {
+const defaultTranslatedTitles = {
   cookies: 'Cookies',
   legalNotices: 'Legal notices',
   privacy: 'Privacy',
@@ -40,27 +40,27 @@ const defaultFooterElements = [
   },
   {
     key: 'termsOfService',
-    title: footerTranslations.termsOfService,
+    title: defaultTranslatedTitles.termsOfService,
     url: 'https://connect-agreementportal.bentley.com/AgreementApp/Home/Eula/view/readonly/BentleyConnect',
   },
   {
     key: 'privacy',
-    title: footerTranslations.privacy,
+    title: defaultTranslatedTitles.privacy,
     url: 'https://www.bentley.com/en/privacy-policy',
   },
   {
     key: 'termsOfUse',
-    title: footerTranslations.termsOfUse,
+    title: defaultTranslatedTitles.termsOfUse,
     url: 'https://www.bentley.com/en/terms-of-use-and-select-online-agreement',
   },
   {
     key: 'cookies',
-    title: footerTranslations.cookies,
+    title: defaultTranslatedTitles.cookies,
     url: 'https://www.bentley.com/en/cookie-policy',
   },
   {
     key: 'legalNotices',
-    title: footerTranslations.legalNotices,
+    title: defaultTranslatedTitles.legalNotices,
     url: 'https://connect.bentley.com/Legal',
   },
 ];
@@ -69,7 +69,7 @@ const Footer = Object.assign(
     let { children, customElements, translatedTitles, className, ...rest } =
       props;
     let titles = {
-      ...footerTranslations,
+      ...defaultTranslatedTitles,
       ...translatedTitles,
     };
     let translatedElements = defaultFooterElements.map((element) => {

package/cjs/core/Overlay/Overlay.js

@@ -25,7 +25,6 @@ const OverlayComponent = _react.forwardRef((props, forwardedRef) => {
 });
 const OverlayHiddenContent = _react.forwardRef((props, ref) => {
   let { children, ...rest } = props;
-  useInertPolyfill();
   return _react.createElement(
     _index.Box,
     {
@@ -43,20 +42,3 @@ const Overlay = Object.assign(OverlayComponent, {
   HiddenContent: OverlayHiddenContent,
   Overlay: OverlayOverlay,
 });
-const useInertPolyfill = () => {
-  let loaded = _react.useRef(false);
-  let modulePath =
-    'https://cdn.jsdelivr.net/npm/wicg-inert@3.1.2/dist/inert.min.js';
-  _react.useEffect(() => {
-    (async () => {
-      if (
-        !HTMLElement.prototype.hasOwnProperty('inert') &&
-        !loaded.current &&
-        !_index.isUnitTest
-      ) {
-        await new Function('url', 'return import(url)')(modulePath);
-        loaded.current = true;
-      }
-    })();
-  }, []);
-};

package/cjs/core/Popover/Popover.d.ts

@@ -26,7 +26,10 @@ type PopoverOptions = {
     /**
      * Middleware options.
      *
-     * By default, `flip`, `shift` and `size` are enabled.
+     * By default, `flip`, `shift`, `size`, and `hide` are enabled.
+     *
+     * If the floating content gets hidden even when it shouldn't (e.g. some custom styles interfering with the trigger's
+     * hide detection) consider disabling the `hide` middleware.
      *
      * @see https://floating-ui.com/docs/middleware
      */

package/cjs/core/Popover/Popover.js

@@ -42,21 +42,22 @@ const usePopover = (options) => {
   } = options;
   let mergedInteractions = _react.useMemo(
     () => ({
-      click: true,
-      dismiss: true,
-      hover: false,
-      focus: false,
       ...interactionsProp,
+      click: interactionsProp?.click ?? true,
+      dismiss: interactionsProp?.dismiss ?? true,
+      hover: interactionsProp?.hover ?? false,
+      focus: interactionsProp?.focus ?? false,
     }),
     [interactionsProp],
   );
   let tree = (0, _react1.useFloatingTree)();
   let middleware = _react.useMemo(
     () => ({
-      flip: true,
-      shift: true,
-      size: true,
       ...options.middleware,
+      flip: options.middleware?.flip ?? true,
+      shift: options.middleware?.shift ?? true,
+      size: options.middleware?.size ?? true,
+      hide: options.middleware?.hide || !_index.isUnitTest,
     }),
     [options.middleware],
   );
@@ -164,17 +165,23 @@ const usePopover = (options) => {
                 maxInlineSize: `min(${2 * referenceWidth}px, 90vw)`,
               }
             : {}),
+          ...(middleware.hide &&
+            floating.middlewareData.hide?.referenceHidden && {
+              visibility: 'hidden',
+            }),
           ...userProps?.style,
         },
       }),
     [
-      floating.floatingStyles,
       interactions,
-      matchWidth,
-      referenceWidth,
+      floating.floatingStyles,
+      floating.middlewareData.hide?.referenceHidden,
       middleware.size,
+      middleware.hide,
       availableHeight,
       maxHeight,
+      matchWidth,
+      referenceWidth,
     ],
   );
   let getReferenceProps = _react.useCallback(

package/cjs/core/Select/Select.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { CommonProps } from '../../utils/index.js';
+import type { CommonProps, PortalProps } from '../../utils/index.js';
 import { usePopover } from '../Popover/Popover.js';
 /**
  * Select component to select value from options.
@@ -182,7 +182,19 @@ export type CustomSelectProps<T> = SelectCommonProps & {
     /**
      * Props to customize Popover behavior.
      */
-    popoverProps?: Pick<Parameters<typeof usePopover>[0], 'visible' | 'onVisibleChange' | 'placement' | 'matchWidth' | 'closeOnOutsideClick'>;
+    popoverProps?: Pick<Parameters<typeof usePopover>[0], 'visible' | 'onVisibleChange' | 'placement' | 'matchWidth' | 'closeOnOutsideClick'> & {
+        /**
+         * Middleware options.
+         *
+         * By default, `hide` is enabled. If the floating options get hidden even when they shouldn't (e.g. some custom
+         * styles interfering with the trigger's hide detection) consider disabling the `hide` middleware.
+         *
+         * @see https://floating-ui.com/docs/middleware
+         */
+        middleware?: {
+            hide?: boolean;
+        };
+    } & Pick<PortalProps, 'portal'>;
     /**
      * Props to pass to the select button (trigger) element.
      */

package/cjs/core/Select/Select.js

@@ -116,7 +116,7 @@ const CustomSelect = _react.forwardRef((props, forwardedRef) => {
     multiple = false,
     triggerProps,
     status,
-    popoverProps,
+    popoverProps: { portal = true, ...popoverProps } = {},
     styleType,
     ...rest
   } = props;
@@ -313,7 +313,9 @@ const CustomSelect = _react.forwardRef((props, forwardedRef) => {
     popover.open &&
       _react.createElement(
         _index.Portal,
-        null,
+        {
+          portal: portal,
+        },
         _react.createElement(
           SelectListbox,
           {

package/cjs/core/Table/Table.js

@@ -31,6 +31,7 @@ const _index1 = require('./hooks/index.js');
 const _index2 = require('./actionHandlers/index.js');
 const _index3 = require('./columns/index.js');
 const _ColumnHeader = require('./ColumnHeader.js');
+const _TableExpandableContentMemoized = require('./TableExpandableContentMemoized.js');
 const singleRowSelectedAction = 'singleRowSelected';
 const shiftRowSelectedAction = 'shiftRowSelected';
 const tableResizeStartAction = 'tableResizeStart';
@@ -224,6 +225,17 @@ const Table = (props) => {
       ),
     [data, getSubRows],
   );
+  let [rowHasParent] = _react.useState(() => new WeakSet());
+  let getSubRowsWithSubComponents = _react.useCallback(
+    (originalRow) => {
+      if (!rowHasParent.has(originalRow)) {
+        rowHasParent.add(originalRow);
+        return [originalRow];
+      }
+      return originalRow.subRows || [];
+    },
+    [rowHasParent],
+  );
   let instance = (0, _reacttable.useTable)(
     {
       manualPagination: !paginatorRenderer,
@@ -236,7 +248,7 @@ const Table = (props) => {
       filterTypes,
       selectSubRows,
       data,
-      getSubRows,
+      getSubRows: subComponent ? getSubRowsWithSubComponents : getSubRows,
       initialState: {
         pageSize,
         ...props.initialState,
@@ -433,39 +445,54 @@ const Table = (props) => {
   (0, _index.useLayoutEffect)(() => {
     if (scrollToIndex)
       virtualizer.scrollToIndex(scrollToIndex, {
-        align: 'center',
+        align: 'start',
       });
   }, [virtualizer, scrollToIndex]);
   let getPreparedRow = _react.useCallback(
     (index, virtualItem, virtualizer) => {
       let row = page[index];
       prepareRow(row);
-      return _react.createElement(_TableRowMemoized.TableRowMemoized, {
-        row: row,
-        rowProps: rowProps,
-        isLast: index === page.length - 1,
-        onRowInViewport: onRowInViewportRef,
-        onBottomReached: onBottomReachedRef,
-        intersectionMargin: intersectionMargin,
-        state: state,
-        key: row.getRowProps().key,
-        onClick: onRowClickHandler,
-        subComponent: subComponent,
-        isDisabled: !!isRowDisabled?.(row.original),
-        tableHasSubRows: hasAnySubRows,
-        tableInstance: instance,
-        expanderCell: expanderCell,
-        scrollContainerRef: tableRef.current,
-        tableRowRef: enableVirtualization ? void 0 : tableRowRef(row),
-        density: density,
-        virtualItem: virtualItem,
-        virtualizer: virtualizer,
-      });
+      if (row.subRows.length > 0 || !subComponent)
+        return _react.createElement(_TableRowMemoized.TableRowMemoized, {
+          row: row,
+          rowProps: rowProps,
+          isLast: index === page.length - 1,
+          onRowInViewport: onRowInViewportRef,
+          onBottomReached: onBottomReachedRef,
+          intersectionMargin: intersectionMargin,
+          state: state,
+          key: row.getRowProps().key,
+          onClick: onRowClickHandler,
+          subComponent: subComponent,
+          isDisabled: !!isRowDisabled?.(row.original),
+          tableHasSubRows: hasAnySubRows,
+          tableInstance: instance,
+          expanderCell: expanderCell,
+          scrollContainerRef: tableRef.current,
+          tableRowRef: enableVirtualization ? void 0 : tableRowRef(row),
+          density: density,
+          virtualItem: virtualItem,
+          virtualizer: virtualizer,
+        });
+      return _react.createElement(
+        _TableExpandableContentMemoized.TableExpandableContentMemoized,
+        {
+          key: row.getRowProps().key,
+          virtualItem: virtualItem,
+          ref: enableVirtualization
+            ? virtualizer?.measureElement
+            : tableRowRef(row),
+          isDisabled: !!isRowDisabled?.(row.original),
+        },
+        subComponent(row),
+      );
     },
     [
       page,
       prepareRow,
       rowProps,
+      onRowInViewportRef,
+      onBottomReachedRef,
       intersectionMargin,
       state,
       onRowClickHandler,
@@ -477,8 +504,6 @@ const Table = (props) => {
       enableVirtualization,
       tableRowRef,
       density,
-      onBottomReachedRef,
-      onRowInViewportRef,
     ],
   );
   let updateStickyState = () => {
@@ -510,7 +535,7 @@ const Table = (props) => {
   return _react.createElement(
     _utils.TableColumnsContext.Provider,
     {
-      value: columns,
+      value: instance.columns,
     },
     _react.createElement(
       _index.Box,

package/cjs/core/Table/TableExpandableContentMemoized.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
+import type { VirtualItem } from '@tanstack/react-virtual';
+type TableExpandableContentProps = {
+    children: React.ReactNode;
+    virtualItem?: VirtualItem<Element>;
+    isDisabled?: boolean;
+};
+export declare const TableExpandableContentMemoized: React.MemoExoticComponent<PolymorphicForwardRefComponent<"div", TableExpandableContentProps>>;
+export {};

package/cjs/core/Table/TableExpandableContentMemoized.js

@@ -0,0 +1,47 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+Object.defineProperty(exports, 'TableExpandableContentMemoized', {
+  enumerable: true,
+  get: function () {
+    return TableExpandableContentMemoized;
+  },
+});
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _classnames = _interop_require_default._(require('classnames'));
+const _react = _interop_require_wildcard._(require('react'));
+const _index = require('../../utils/index.js');
+const TableExpandableContent = _react.forwardRef((props, ref) => {
+  let { children, className, style, isDisabled, virtualItem, ...rest } = props;
+  return _react.createElement(
+    _index.Box,
+    {
+      className: (0, _classnames.default)(
+        'iui-table-row',
+        'iui-table-expanded-content',
+        className,
+      ),
+      style: {
+        flex: '0 0 auto',
+        minWidth: '100%',
+        ...(null != virtualItem
+          ? {
+              transform: `translateY(${virtualItem.start}px)`,
+            }
+          : {}),
+        ...style,
+      },
+      'aria-disabled': isDisabled,
+      'data-iui-index': virtualItem?.index,
+      ...(null != virtualItem && {
+        'data-iui-virtualizer': 'item',
+      }),
+      ref: ref,
+      ...rest,
+    },
+    children,
+  );
+});
+const TableExpandableContentMemoized = _react.memo(TableExpandableContent);

package/cjs/core/Table/TableRowMemoized.js

@@ -122,24 +122,6 @@ const TableRow = (props) => {
         }),
       ),
     ),
-    subComponent &&
-      _react.createElement(
-        _index.WithCSSTransition,
-        {
-          in: row.isExpanded,
-        },
-        _react.createElement(
-          _index.Box,
-          {
-            className: (0, _classnames.default)(
-              'iui-table-row',
-              'iui-table-expanded-content',
-            ),
-            'aria-disabled': isDisabled,
-          },
-          subComponent(row),
-        ),
-      ),
   );
 };
 const hasAnySelectedSubRow = (row, selectedRowIds) => {

package/cjs/core/Table/cells/DefaultCell.js

@@ -11,17 +11,17 @@ Object.defineProperty(exports, 'DefaultCell', {
 const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = _interop_require_wildcard._(require('react'));
+const _reacttable = require('react-table');
 const _classnames = _interop_require_default._(require('classnames'));
 const _index = require('../../../utils/index.js');
 const _utils = require('../utils.js');
 const DefaultCell = (props) => {
-  let columnsProp = _react.useContext(_utils.TableColumnsContext);
+  let instanceColumns = _react.useContext(_utils.TableColumnsContext);
   let isCustomCell = _react.useMemo(
     () =>
-      columnsProp
-        .find(({ id }) => props.cellProps.column.id === id)
-        ?.hasOwnProperty('Cell'),
-    [props.cellProps.column.id, columnsProp],
+      instanceColumns.find(({ id }) => props.cellProps.column.id === id)
+        ?.Cell !== _reacttable.defaultColumn.Cell,
+    [instanceColumns, props.cellProps.column.id],
   );
   let {
     cellElementProps: {

package/cjs/core/Table/hooks/useColumnDragAndDrop.js

@@ -10,6 +10,8 @@ Object.defineProperty(exports, 'useColumnDragAndDrop', {
 });
 const _reacttable = require('react-table');
 const _styles = require('../../../styles.js');
+const leftClassName = _styles.styles['iui-table-reorder-column-left'];
+const rightClassName = _styles.styles['iui-table-reorder-column-right'];
 const REORDER_ACTIONS = {
   columnDragStart: 'columnDragStart',
   columnDragEnd: 'columnDragEnd',
@@ -31,20 +33,16 @@ const defaultGetDragAndDropProps =
     };
     let setOnDragColumnStyle = (event, position) => {
       let columnElement = event.currentTarget;
-      columnElement.classList.remove(
-        _styles.styles['iui-table-reorder-column-right'],
-      );
-      columnElement.classList.remove(
-        _styles.styles['iui-table-reorder-column-left'],
-      );
-      if ('left' === position)
-        columnElement.classList.add(
-          _styles.styles['iui-table-reorder-column-left'],
-        );
-      else if ('right' === position)
-        columnElement.classList.add(
-          _styles.styles['iui-table-reorder-column-right'],
-        );
+      if ('left' === position) {
+        columnElement.classList.remove(rightClassName);
+        columnElement.classList.add(leftClassName);
+      } else if ('right' === position) {
+        columnElement.classList.remove(leftClassName);
+        columnElement.classList.add(rightClassName);
+      } else {
+        columnElement.classList.remove(leftClassName);
+        columnElement.classList.remove(rightClassName);
+      }
     };
     let reorderColumns = (tableColumns, srcIndex, dstIndex) => {
       let newTableColumns = [...tableColumns];

package/cjs/core/Table/utils.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ColumnInstance, Column } from '../../react-table/react-table.js';
+import type { ColumnInstance } from '../../react-table/react-table.js';
 export declare const getCellStyle: <T extends Record<string, unknown>>(column: ColumnInstance<T>, isTableResizing: boolean) => React.CSSProperties | undefined;
 export declare const getStickyStyle: <T extends Record<string, unknown>>(column: ColumnInstance<T>, columnList: ColumnInstance<T>[]) => React.CSSProperties;
 export declare const getSubRowStyle: ({ density, depth }: {
@@ -8,4 +8,4 @@ export declare const getSubRowStyle: ({ density, depth }: {
 }) => {
     paddingInlineStart: number;
 };
-export declare const TableColumnsContext: React.Context<Column<Record<string, unknown>>[]>;
+export declare const TableColumnsContext: React.Context<ColumnInstance<{}>[]>;

package/cjs/core/ThemeProvider/ThemeProvider.js

@@ -30,6 +30,7 @@ const ThemeProvider = _react.forwardRef((props, forwardedRef) => {
     includeCss = 'inherit' === themeProp,
     ...rest
   } = props;
+  useInertPolyfill();
   let [rootElement, setRootElement] = _react.useState(null);
   let parent = useParentThemeAndContext(rootElement);
   let theme = 'inherit' === themeProp ? parent.theme || 'light' : themeProp;
@@ -246,7 +247,7 @@ const FallbackStyles = ({ root }) => {
       } catch (error) {
         console.log('Error loading styles.css locally', error);
         let css = await (0, _index.importCss)(
-          'https://cdn.jsdelivr.net/npm/@itwin/itwinui-react@3/styles.css',
+          `https://cdn.jsdelivr.net/npm/@itwin/itwinui-react@${_meta.meta.version}/styles.css`,
         );
         document.adoptedStyleSheets = [
           ...document.adoptedStyleSheets,
@@ -267,3 +268,20 @@ const useIuiDebugRef = () => {
   var version, version1;
   _globalThis1.__iui.versions.add(JSON.stringify(_meta.meta));
 };
+const useInertPolyfill = () => {
+  let loaded = _react.useRef(false);
+  let modulePath =
+    'https://cdn.jsdelivr.net/npm/wicg-inert@3.1.2/dist/inert.min.js';
+  _react.useEffect(() => {
+    (async () => {
+      if (
+        !HTMLElement.prototype.hasOwnProperty('inert') &&
+        !loaded.current &&
+        !_index.isUnitTest
+      ) {
+        await new Function('url', 'return import(url)')(modulePath);
+        loaded.current = true;
+      }
+    })();
+  }, []);
+};

package/cjs/core/Toast/Toast.js

@@ -25,10 +25,6 @@ const _classnames = _interop_require_default._(require('classnames'));
 const _index = require('../../utils/index.js');
 const _IconButton = require('../Buttons/IconButton.js');
 const _Toaster = require('./Toaster.js');
-const isMotionOk = () =>
-  (0, _index.getWindow)()?.matchMedia?.(
-    '(prefers-reduced-motion: no-preference)',
-  )?.matches;
 const Toast = (props) => {
   let {
     content,
@@ -52,6 +48,9 @@ const Toast = (props) => {
   let [height, setHeight] = _react.useState(0);
   let thisElement = _react.useRef(null);
   let [margin, setMargin] = _react.useState(0);
+  let motionOk = (0, _index.useMediaQuery)(
+    '(prefers-reduced-motion: no-preference)',
+  );
   let marginStyle = () => {
     if ('top' === placementPosition)
       return {
@@ -116,16 +115,16 @@ const Toast = (props) => {
       appear: true,
       unmountOnExit: true,
       onEnter: (node) => {
-        if (isMotionOk()) {
+        if (motionOk) {
           node.style.transform = 'translateY(15%)';
           node.style.transitionTimingFunction = 'ease';
         }
       },
       onEntered: (node) => {
-        if (isMotionOk()) node.style.transform = 'translateY(0)';
+        if (motionOk) node.style.transform = 'translateY(0)';
       },
       onExiting: (node) => {
-        if (isMotionOk()) {
+        if (motionOk) {
           let { translateX, translateY } = calculateOutAnimation(node);
           node.style.transform = animateOutTo
             ? `scale(0.9) translate(${translateX}px,${translateY}px)`