@muraldevkit/ui-toolkit 2.68.0-dev.3 → 2.68.0

package/dist/styles/MrlButton/global.scss

@@ -13,6 +13,10 @@
 	text-align: center;
 	vertical-align: middle;
 	white-space: nowrap;
+	.mrl-tooltip-trigger-content {
+		align-items: center;
+		display: inline-flex;
+	}
 	&.mrlButton--small {
 		@include mrl-text-interactive('xsmall');
 		@include mrl-button-size('small');

package/dist/styles/MrlEditableTextInput/module.scss

@@ -73,4 +73,14 @@
 }
 .MrlEditableTextInput-focus-wrapper {
 	font-size: var(--mrl-type-size-text-small);
+	.MrlEditableTextInput-hover-button {
+		opacity: 0;
+	}
+	&:hover,
+	&:focus-within {
+		.MrlEditableTextInput-hover-button {
+			opacity: 1;
+			transition: opacity var(--mrl-duration-03) var(--mrl-timing-m2);
+		}
+	}
 }

package/dist/styles/MrlModal/module.scss

@@ -37,7 +37,6 @@
 	flex-direction: column;
 	flex-grow: 1;
 	height: 100vh;
-	overflow: auto;
 	position: relative;
 	width: 100vw;
 }

package/dist/styles/MrlModalContent/module.scss

@@ -5,7 +5,7 @@
 	display: flex;
 	flex-direction: column;
 	flex-grow: 1;
-	overflow: auto;
+	overflow-y: auto;
 	padding: var(--mrl-modal-padding-vertical-content) var(--mrl-modal-padding-horizontal);
 	:global(.mrl-native-modal) &,
 	:global(.mrl-display-modal) & {

package/dist/styles/MrlSelectMenu/module.scss

@@ -4,6 +4,7 @@
 $affordance: var(--mrl-select-item-text-affordance);
 $item-padding: var(--mrl-select-item-padding-vertical);
 $space: var(--mrl-select-item-spacing-stack);
+$mrl-selectItem-height: 20px;
 .mrl-selectMenu {
 	$mrl-selectItem-height: calc($affordance + ($item-padding * 2) + $space);
 	background: var(--mrl-color-background);
@@ -11,7 +12,7 @@ $space: var(--mrl-select-item-spacing-stack);
 	box-shadow: var(--mrl-shadow-01);
 	display: none;
 	left: 0;
-	max-height: calc($mrl-selectItem-height * 6);
+	max-height: calc(var(--mrl-select-item-height) * 6);
 	overflow-y: auto;
 	padding: var(--mrl-spacing-03);
 	position: absolute;

package/dist/styles/MrlSelectMenu/variables.scss

@@ -1,3 +1,4 @@
 
 .mrl-selectMenu {
+	--mrl-select-item-height: 34px;
 }

package/package.json

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

package/dist/components/toolbar/MrlToolbar/MrlToolbar.d.ts

@@ -1,35 +0,0 @@
-import React, { ComponentPropsWithRef } from 'react';
-import { MrlIconButtonProps, MrlMenuProps } from '../../../';
-/**
- * Props for the MrlToolbar component.
- */
-export interface MrlToolbarProps extends ComponentPropsWithRef<'div'> {
-    children?: React.ReactNode;
-    kind?: 'default' | 'inverse' | 'ghost' | 'skeleton';
-    /**
-     * An optional prop to apply an aria-label to the MrlToobar
-     */
-    label?: string;
-    lastToolbarInRow?: boolean;
-    /**
-     * An optional prop to set the maximum number of visible items in a toolbar.
-     * Additional items will appear in a menu.
-     */
-    maxVisibleItems?: number;
-    menuButtonProps?: MrlIconButtonProps;
-    menuProps?: MrlMenuProps;
-    orientation?: 'horizontal' | 'vertical';
-    /**
-     * A boolean prop that sets RovingTabindex in the MrlToolbar
-     */
-    shouldUseRti?: boolean;
-    size?: 'xsmall' | 'small' | 'medium';
-    spaced?: boolean;
-}
-/**
- * MrlToolbar component.
- *
- * @param props The MrlToolbar component properties.
- * @returns The MrlToolbar component.
- */
-export declare const MrlToolbar: (props: MrlToolbarProps) => JSX.Element;

package/dist/components/toolbar/MrlToolbar/index.d.ts

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

package/dist/components/toolbar/MrlToolbarButton/MrlToolbarButton.d.ts

@@ -1,40 +0,0 @@
-import React from 'react';
-import { MrlIconButtonProps, MrlMenuItemProps } from '../../../';
-/**
- * Props for the MrlToolbarButton component.
- */
-export interface MrlToolbarButtonProps {
-    /**
-     * The icon that will be rendered.
-     */
-    icon: React.ReactElement;
-    includeInRoving?: boolean;
-    /**
-     * A prop used to set a toolbar button to never move into the menu.
-     */
-    lockedInToolbar?: boolean;
-    /**
-     * onClick event for the button.
-     */
-    onClick?: (e?: React.MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Props used to control the display of the button in the menu.
-     */
-    menuItemProps?: Omit<MrlMenuItemProps, 'onClick'>;
-    /**
-     * A prop used to render the item in the menu instead of the toolbar.
-     */
-    renderInMenu?: boolean;
-    text: string;
-    /**
-     * Props used to control the display of the button in the toolbar.
-     */
-    toolbarButtonProps?: Omit<MrlIconButtonProps, 'onClick'>;
-}
-/**
- * MrlToolbarButton component.
- *
- * @param props The MrlToolbarButton component properties.
- * @returns The MrlToolbarButton component.
- */
-export declare const MrlToolbarButton: (props: MrlToolbarButtonProps) => JSX.Element;

package/dist/components/toolbar/MrlToolbarButton/index.d.ts

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

package/dist/components/toolbar/MrlToolbarItem/MrlToolbarItem.d.ts

@@ -1,30 +0,0 @@
-/// <reference types="react" />
-/**
- * Props for the MrlToolbarItem component.
- */
-export interface MrlToolbarItemProps {
-    /**
-     * A prop used to set a toolbar button to never move into the menu.
-     */
-    lockedInToolbar?: boolean;
-    /**
-     * The rendered component in the overflow menu.
-     * If nothing is passed, the toolbarItem will be rendered in the menu.
-     */
-    menuItem?: JSX.Element;
-    /**
-     * A prop used to render the item in the menu instead of the toolbar.
-     */
-    renderInMenu?: boolean;
-    /**
-     * The rendered markup in the toolbar.
-     */
-    toolbarItem: JSX.Element;
-}
-/**
- * MrlToolbarItem component.
- *
- * @param props The MrlToolbarItem component properties.
- * @returns The MrlToolbarItem component.
- */
-export declare const MrlToolbarItem: (props: MrlToolbarItemProps) => JSX.Element | null;

package/dist/components/toolbar/MrlToolbarItem/index.d.ts

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

package/dist/components/toolbar/index.d.ts

@@ -1,3 +0,0 @@
-export * from './MrlToolbar';
-export * from './MrlToolbarButton';
-export * from './MrlToolbarItem';

package/dist/styles/MrlToolbar/module.scss

@@ -1,63 +0,0 @@
-
-$medium-size: 3.5rem;
-$small-size: 3rem;
-$xsmall-size: 2rem;
-.MrlToolbar {
-	align-items: center;
-	background: var(--mrl-color-background);
-	border-radius: var(--mrl-border-radius-container);
-	box-shadow: var(--mrl-shadows-lifted);
-	cursor: default;
-	display: flex;
-	gap: var(--mrl-spacing-02);
-	min-height: $medium-size;
-	padding: var(--mrl-spacing-03);
-	pointer-events: all;
-	transition: opacity var(--mrl-duration-03) var(--mrl-timing-m3);
-}
-.MrlToolbarRTIContainer {
-	align-items: center;
-	display: flex;
-	gap: var(--mrl-spacing-02);
-}
-.MrlToolbar-inverse {
-	background: var(--mrl-color-background-inverse);
-	box-shadow: none;
-	color: var(--mrl-color-text-inverse);
-}
-.MrlToolbar-ghost {
-	background: none;
-	border-radius: 0;
-	box-shadow: none;
-}
-.MrlToolbar-skeleton.MrlToolbar-vertical {
-	background-color: rgba(var(--mrl-gray-30), 1);
-}
-.MrlToolbar-small {
-	min-height: $small-size;
-}
-.MrlToolbar-xsmall {
-	min-height: $xsmall-size;
-	padding: 0;
-}
-.MrlToolbar-vertical {
-	flex-direction: column;
-	min-height: 0;
-	min-width: $medium-size;
-	&.MrlToolbar-small {
-		min-width: $small-size;
-	}
-	&.MrlToolbar-xsmall {
-		min-width: $xsmall-size;
-	}
-	.MrlToolbarRTIContainer {
-		flex-direction: column;
-	}
-}
-.MrlToolbar-spaced {
-	gap: var(--mrl-spacing-05);
-	padding-left: var(--mrl-spacing-05);
-	.mrlButton + .mrlButton {
-		margin-left: calc(var(--mrl-spacing-03) / 2 * -1);
-	}
-}

package/dist/styles/MrlToolbarButton/module.scss

@@ -1,3 +0,0 @@
-.MrlToolbarButtonIcon {
-	margin-right: var(--mrl-spacing-03);
-}