@mezzanine-ui/react 0.15.0 → 0.15.1

package/Anchor/Anchor.d.ts

@@ -0,0 +1,30 @@
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface AnchorProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'onClick'> {
+    /** The current active anchor ID */
+    activeAnchorId?: string;
+    /** Whether apply ellipsis or not
+     * @default false
+     */
+    ellipsis?: boolean;
+    /**
+     * Anchor list.
+     */
+    list: {
+        id: string;
+        name: string;
+    }[];
+    /**
+     * The maximum width for anchor container. This might be useful when you need to set `ellipsis: true`.
+     */
+    maxWidth?: number;
+    /**
+     * Trigger when user click on any anchor.
+     */
+    onClick?: (nextAnchorId: string) => void;
+}
+/**
+ * The react component for `mezzanine` anchor.
+ * This component should always be full width of its parent.
+ */
+declare const Anchor: import("react").ForwardRefExoticComponent<AnchorProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Anchor;

package/Anchor/Anchor.js

@@ -0,0 +1,21 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { anchorClasses } from '@mezzanine-ui/core/anchor';
+import Typography from '../Typography/Typography.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` anchor.
+ * This component should always be full width of its parent.
+ */
+const Anchor = forwardRef(function Anchor(props, ref) {
+    const { activeAnchorId, className, children, ellipsis = false, list, maxWidth, onClick, style, ...rest } = props;
+    const resolvedStyle = {
+        ...(style || {}),
+        ...(maxWidth ? { maxWidth: `${maxWidth}px` } : {}),
+    };
+    return (jsxs("div", { ref: ref, className: cx(anchorClasses.host, className), style: resolvedStyle, ...rest, children: [jsx("div", { className: anchorClasses.bar }), list.map((anchor) => (jsx("button", { type: "button", onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(anchor.id), className: cx(anchorClasses.anchor, activeAnchorId === anchor.id && anchorClasses.anchorActive), children: jsx(Typography, { variant: "input3", color: "inherit", ellipsis: ellipsis, children: anchor.name }) }, anchor.id)))] }));
+});
+var Anchor$1 = Anchor;
+
+export { Anchor$1 as default };

package/Anchor/index.d.ts

@@ -0,0 +1 @@
+export { AnchorProps, default } from './Anchor';

package/Anchor/index.js

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

package/index.d.ts

@@ -87,6 +87,10 @@ export { PopconfirmProps, default as Popconfirm } from './Popconfirm';
 export { NotificationData, NotificationSeverity, default as Notification, } from './Notification';
 export { ProgressProps, ProgressType, ProgressStatus, ProgressTypes, ProgressStatuses, default as Progress, } from './Progress';
 export { SkeletonProps, default as Skeleton } from './Skeleton';
+/**
+ * Others
+ */
+export { AnchorProps, default as Anchor } from './Anchor';
 /**
  * Utility
  */

package/index.js

@@ -131,6 +131,7 @@ export { default as Popconfirm } from './Popconfirm/Popconfirm.js';
 export { default as Notification } from './Notification/Notification.js';
 export { default as Progress } from './Progress/Progress.js';
 export { default as Skeleton } from './Skeleton/Skeleton.js';
+export { default as Anchor } from './Anchor/Anchor.js';
 export { default as Overlay } from './Overlay/Overlay.js';
 export { default as Popover } from './Popover/Popover.js';
 export { default as Popper } from './Popper/Popper.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/react",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "description": "React components for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {
@@ -29,9 +29,9 @@
   },
   "dependencies": {
     "@hello-pangea/dnd": "^16.6.0",
-    "@mezzanine-ui/core": "^0.15.0",
-    "@mezzanine-ui/icons": "^0.15.0",
-    "@mezzanine-ui/system": "^0.15.0",
+    "@mezzanine-ui/core": "^0.15.1",
+    "@mezzanine-ui/icons": "^0.15.1",
+    "@mezzanine-ui/system": "^0.15.1",
     "@popperjs/core": "^2.11.6",
     "@types/react-transition-group": "^4.4.8",
     "clsx": "^2.1.1",

package/utils/scroll-lock.js

@@ -2,10 +2,10 @@ import { getScrollbarWidth } from './get-scrollbar-width.js';
 
 function lockBodyScroll() {
     const { scrollY } = window;
-    document.body.style.position = 'fixed';
-    document.body.style.top = `-${scrollY}px`;
     // 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';
 }