@muraldevkit/ui-toolkit 2.55.0 → 2.57.0

package/dist/styles/MrlCallout/module.scss

@@ -0,0 +1,47 @@
+@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
+.MrlCallout {
+	&--content {
+		max-width: 17.5rem;
+	}
+	&--title {
+		font-size: var(--mrl-font-size-03);
+		margin-bottom: var(--mrl-spacing-02);
+		padding-right: var(--mrl-spacing-06);
+	}
+	&--eyebrow {
+		font-size: var(--mrl-font-size-01);
+		font-weight: var(--mrl-font-weight-04);
+		margin-bottom: var(--mrl-spacing-02);
+		padding-right: var(--mrl-spacing-06);
+	}
+	&--description {
+		p {
+			font-size: var(--mrl-font-size-02);
+			padding-right: var(--mrl-spacing-06);
+		}
+	}
+	&--image {
+		margin-top: var(--mrl-spacing-05);
+		img {
+			height: auto;
+			width: 100%;
+		}
+	}
+	&--footer {
+		display: flex;
+		justify-content: flex-start;
+		margin-top: var(--mrl-spacing-05);
+		:global(.mrlButton:last-child) {
+			margin-left: auto;
+		}
+	}
+	:global(.mrlButton:focus-visible) {
+		@include mrl-focus($is-inverse: 'true');
+	}
+}
+@media screen and (min-resolution: 384dpi) and (max-resolution: 399dpi),
+	(min-resolution: 4dppx) and (max-resolution: 3.99dppx) {
+	.MrlCallout > div:first-child {
+		min-height: 75px;
+	}
+}

package/dist/styles/MrlPopover/module.scss

@@ -7,7 +7,6 @@
 	box-shadow: var(--mrl-shadows-raised);
 	color: var(--mrl-popover-text-color);
 	flex-direction: column;
-	max-height: calc(100vh - 2 * var(--mrl-space-inset-large));
 	max-width: 600px;
 	opacity: 0;
 	overflow: visible;
@@ -28,6 +27,7 @@
 		position: absolute;
 		right: 4px;
 		top: 6px;
+		transition: none;
 		svg {
 			color: var(--mrl-popover-text-color);
 		}
@@ -39,13 +39,14 @@
 		display: flex;
 	}
 	&--scrolling {
-		padding-bottom: var(--mrl-spacing-04);
 		padding-right: 0;
-		padding-top: var(--mrl-spacing-03);
-		&--content {
-			overflow-x: hidden;
-			overflow-y: auto;
-			padding: var(--mrl-spacing-02) var(--mrl-spacing-04) var(--mrl-spacing-02) 0;
+	}
+	&--scrolling--content {
+		overflow-x: hidden;
+		overflow-y: auto;
+		padding-right: calc(var(--mrl-popover-padding) - 4px);
+		.MrlPopover--close {
+			right: 8px;
 		}
 	}
 	&--point {
@@ -97,3 +98,19 @@
 		}
 	}
 }
+.inverse {
+	.MrlPopover--scrolling--content {
+		&::-webkit-scrollbar {
+			background-color: var(--mrl-popover-background-color);
+			border-radius: 10px;
+			width: 12px;
+		}
+		&::-webkit-scrollbar-thumb {
+			background-clip: content-box;
+			background-color: var(--mrl-popover-text-color);
+			border: 3px solid transparent;
+			border-radius: 10px;
+			position: relative;
+		}
+	}
+}

package/dist/styles/MrlSmartTable/module.scss

@@ -11,3 +11,7 @@
 .MrlTableRow--selected > :global(.MrlTableCell) {
 	background-color: var(--mrl-table-row-background-selected);
 }
+.MrlTableRow--disabled,
+.MrlTableRow--disabled > :global(.MrlTableCell) {
+	color: var(--mrl-color-text-disabled);
+}

package/dist/styles/layers/layers.d.ts

@@ -0,0 +1,11 @@
+/**
+ * References to the different portal layers
+ */
+export declare const PORTAL_LAYERS: {
+    readonly ROOT: "mrl-root-portal";
+    readonly MENU: "mrl-menu-portal";
+    readonly POPOVER: "mrl-popover-portal";
+    readonly CALLOUT: "mrl-callout-portal";
+    readonly MODAL: "mrl-modal";
+    readonly TOOLTIP: "mrl-tooltip-portal";
+};

package/dist/utils/{findInteractiveElement/findInteractiveElement.d.ts → findAdjacentInteractiveElement/findAdjacentInteractiveElement.d.ts}

@@ -5,4 +5,4 @@
  * @param direction - The direction to search in
  * @returns The interactive element or null if none is found
  */
-export declare const findInteractiveElement: (ref: React.RefObject<HTMLElement> | undefined, direction?: 'next' | 'previous') => HTMLElement | null;
+export declare const findAdjacentInteractiveElement: (ref: React.RefObject<HTMLElement> | undefined, direction?: 'next' | 'previous') => HTMLElement | null;

package/dist/utils/findAdjacentInteractiveElement/index.d.ts

@@ -0,0 +1 @@
+export * from './findAdjacentInteractiveElement';

package/dist/utils/index.d.ts

@@ -1,5 +1,5 @@
 export * from './commonProps';
-export * from './findInteractiveElement';
+export * from './findAdjacentInteractiveElement';
 export * from './getCamelCase';
 export * from './isImagePath';
 export * from './isImageUri';

package/dist/utils/trapFocus/index.d.ts

@@ -17,7 +17,8 @@ export declare const getElementWithAutofocus: (containerElement: HTMLElement) =>
  * Adapted from https://hidde.blog/using-javascript-to-trap-focus-in-an-element/
  *
  * @param {HTMLElement} element // Element to trap focus in
+ * @param {boolean} disableAutofocus // Whether to disable autofocus
  * @returns {Function}          // Cleanup function to be run when component is
  *                              // removed from the DOM
  */
-export declare const trapFocus: (element: HTMLElement) => (() => void);
+export declare const trapFocus: (element: HTMLElement, disableAutofocus?: boolean) => (() => void);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@muraldevkit/ui-toolkit",
-	"version": "2.55.0",
+	"version": "2.57.0",
 	"description": "Mural's UI Toolkit",
 	"main": "./dist/index.js",
 	"module": "./dist/index.js",

package/dist/utils/findInteractiveElement/index.d.ts

@@ -1 +0,0 @@
-export * from './findInteractiveElement';