@mezzanine-ui/react 1.0.0-canary.2 → 1.0.0-canary.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/react",
-  "version": "1.0.0-canary.2",
+  "version": "1.0.0-canary.3",
   "description": "React components for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {
@@ -28,15 +28,15 @@
     "react-dom": ">=18"
   },
   "dependencies": {
+    "@floating-ui/dom": "^1.7.4",
+    "@floating-ui/react-dom": "^2.1.6",
     "@hello-pangea/dnd": "^18.0.1",
-    "@mezzanine-ui/core": "^1.0.0-canary.2",
-    "@mezzanine-ui/icons": "^1.0.0-canary.1",
-    "@mezzanine-ui/system": "^1.0.0-canary.1",
-    "@popperjs/core": "^2.11.8",
+    "@mezzanine-ui/core": "^1.0.0-canary.3",
+    "@mezzanine-ui/icons": "^1.0.0-canary.2",
+    "@mezzanine-ui/system": "^1.0.0-canary.2",
     "@types/react-transition-group": "^4.4.12",
     "clsx": "^2.1.1",
     "lodash": "^4.17.21",
-    "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
     "tslib": "^2.8.1"
   },
@@ -45,7 +45,7 @@
     "@types/moment": "^2.13.0",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
-    "dayjs": "^1.11.18",
+    "dayjs": "^1.11.19",
     "lodash": "^4.17.21",
     "luxon": "^3.7.2",
     "moment": "^2.30.1",

package/utils/get-css-variable-value.d.ts

@@ -0,0 +1 @@
+export declare function getCSSVariableValue(variableName: string): string;

package/utils/get-css-variable-value.js

@@ -0,0 +1,9 @@
+function getCSSVariableValue(variableName) {
+    return typeof document !== 'undefined'
+        ? getComputedStyle(document.documentElement)
+            .getPropertyValue(variableName)
+            .trim()
+        : '';
+}
+
+export { getCSSVariableValue };

package/Loading/Loading.d.ts

@@ -1,33 +0,0 @@
-import { IconProps } from '../Icon';
-import { OverlayProps } from '../Overlay';
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface LoadingProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
-    /**
-     * When set stretch=true, host container will stretch to width & height 100%
-     * @default false
-     */
-    stretch?: boolean;
-    /**
-     * Custom icon props
-     */
-    iconProps?: Omit<IconProps, 'icon' | 'spin'>;
-    /**
-     * Whether Loading is loading.
-     * @default false
-     */
-    loading?: boolean;
-    /**
-     * Custom overlay props (only display when nested children)
-     */
-    overlayProps?: Omit<OverlayProps, 'container' | 'open'>;
-    /**
-     * Customize description content
-     */
-    tip?: string;
-    /**
-     * Customize description content className
-     */
-    tipClassName?: string;
-}
-declare const Loading: import("react").ForwardRefExoticComponent<LoadingProps & import("react").RefAttributes<HTMLDivElement>>;
-export default Loading;

package/Loading/index.d.ts

@@ -1,2 +0,0 @@
-export type { LoadingProps } from './Loading';
-export { default } from './Loading';

package/Loading/index.js

@@ -1 +0,0 @@
-export { default } from './Loading.js';

package/Overlay/Overlay.js

@@ -1,31 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { overlayClasses } from '@mezzanine-ui/core/overlay';
-import Portal from '../Portal/Portal.js';
-import Fade from '../Transition/Fade.js';
-import cx from 'clsx';
-
-/**
- * The react component for `mezzanine` overlay.
- */
-const Overlay = forwardRef(function Overlay(props, ref) {
-    const { children, className, container, disableCloseOnBackdropClick = false, disablePortal, hideBackdrop = false, invisibleBackdrop = false, onBackdropClick, onClose, onSurface, open = false, ...rest } = props;
-    const fixedAtBody = Boolean(!container);
-    return (jsx(Portal, { container: container, disablePortal: disablePortal, children: jsxs("div", { ...rest, ref: ref, className: cx(overlayClasses.host, {
-                [overlayClasses.hostFixed]: fixedAtBody,
-                [overlayClasses.hostOpen]: open,
-            }, className), children: [hideBackdrop ? null : (jsx(Fade, { in: open, children: jsx("div", { "aria-hidden": true, className: cx(overlayClasses.backdrop, {
-                            [overlayClasses.backdropFixed]: fixedAtBody,
-                            [overlayClasses.invisible]: invisibleBackdrop,
-                            [overlayClasses.backdropOnSurface]: onSurface,
-                        }), onClick: (event) => {
-                            if (!disableCloseOnBackdropClick && onClose) {
-                                onClose();
-                            }
-                            if (onBackdropClick) {
-                                onBackdropClick(event);
-                            }
-                        } }) })), children] }) }));
-});
-
-export { Overlay as default };

package/Overlay/index.d.ts

@@ -1,2 +0,0 @@
-export type { OverlayProps } from './Overlay';
-export { default } from './Overlay';

package/Overlay/index.js

@@ -1 +0,0 @@
-export { default } from './Overlay.js';

package/Switch/Switch.d.ts

@@ -1,43 +0,0 @@
-import { ChangeEventHandler } from 'react';
-import { SwitchSize } from '@mezzanine-ui/core/switch';
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface SwitchProps extends Omit<NativeElementPropsWithoutKeyAndRef<'span'>, 'onChange'> {
-    /**
-     * Whether the switch is checked.
-     */
-    checked?: boolean;
-    /**
-     * Whether the switch is checked by default.
-     * Only used for uncontrolled.
-     */
-    defaultChecked?: boolean;
-    /**
-     * Whether the switch is disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Since at Mezzanine we use a host element to wrap our input, most derived props will be passed to the host element.
-     *  If you need direct control to the input element, use this prop to provide to it.
-     */
-    inputProps?: Omit<NativeElementPropsWithoutKeyAndRef<'input'>, 'checked' | 'defaultChecked' | 'disabled' | 'onChange' | 'placeholder' | 'type' | 'value' | `aria-${'disabled' | 'checked'}`>;
-    /**
-     * Whether the switch is loading.
-     * @default false
-     */
-    loading?: boolean;
-    /**
-     * Invoked by input change event.
-     */
-    onChange?: ChangeEventHandler<HTMLInputElement>;
-    /**
-     * The size of switch.
-     * @default 'medium'
-     */
-    size?: SwitchSize;
-}
-/**
- * The react component for `mezzanine` switch.
- */
-declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLSpanElement>>;
-export default Switch;

package/Switch/Switch.js

@@ -1,29 +0,0 @@
-'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext } from 'react';
-import { switchClasses, SwitchSpinnerIcon } from '@mezzanine-ui/core/switch';
-import { useSwitchControlValue } from '../Form/useSwitchControlValue.js';
-import { FormControlContext } from '../Form/FormControlContext.js';
-import Icon from '../Icon/Icon.js';
-import cx from 'clsx';
-
-/**
- * The react component for `mezzanine` switch.
- */
-const Switch = forwardRef(function Switch(props, ref) {
-    const { disabled: disabledFromFormControl } = useContext(FormControlContext) || {};
-    const { checked: checkedProp, className, defaultChecked, disabled: disabledProp = disabledFromFormControl, inputProps, loading = false, onChange: onChangeProp, size = 'medium', ...rest } = props;
-    const [checked, onChange] = useSwitchControlValue({
-        checked: checkedProp,
-        defaultChecked,
-        onChange: onChangeProp,
-    });
-    const disabled = loading || disabledProp;
-    return (jsxs("span", { ref: ref, ...rest, className: cx(switchClasses.host, {
-            [switchClasses.checked]: checked,
-            [switchClasses.disabled]: disabled,
-            [switchClasses.large]: size === 'large',
-        }, className), children: [jsx("span", { className: switchClasses.control, children: loading && jsx(Icon, { icon: SwitchSpinnerIcon, spin: true }) }), jsx("input", { ...inputProps, "aria-checked": checked, "aria-disabled": disabled, checked: checked, className: switchClasses.input, disabled: disabled, onChange: onChange, type: "checkbox" })] }));
-});
-
-export { Switch as default };

package/Switch/index.d.ts

@@ -1,3 +0,0 @@
-export type { SwitchSize } from '@mezzanine-ui/core/switch';
-export type { SwitchProps } from './Switch';
-export { default } from './Switch';

package/Switch/index.js

@@ -1 +0,0 @@
-export { default } from './Switch.js';

package/utils/scroll-lock.d.ts

@@ -1,2 +0,0 @@
-export declare function lockBodyScroll(): void;
-export declare function allowBodyScroll(): void;

package/utils/scroll-lock.js

@@ -1,24 +0,0 @@
-import { getScrollbarWidth } from './get-scrollbar-width.js';
-
-function lockBodyScroll() {
-    const { scrollY } = window;
-    // Calculate scroll bar width and use padding-right to remain layout width.
-    const scrollbarWidth = getScrollbarWidth();
-    document.body.style.position = 'fixed';
-    document.body.style.top = `-${scrollY}px`;
-    document.body.style.paddingRight = `${scrollbarWidth}px`;
-    document.body.style.overflow = 'hidden';
-}
-function allowBodyScroll() {
-    var _a, _b;
-    const scrollY = Number(((_b = (_a = document.body.style) === null || _a === void 0 ? void 0 : _a.top) !== null && _b !== void 0 ? _b : '0').replace(/px/gi, ''));
-    if (document.body.style.position === 'fixed') {
-        document.body.style.position = '';
-        document.body.style.top = '';
-        document.body.style.paddingRight = '';
-        document.body.style.overflow = '';
-        window.scrollTo(0, (scrollY || 0) * -1);
-    }
-}
-
-export { allowBodyScroll, lockBodyScroll };