@mattermost/compass-ui 0.1.0-alpha.0

package/dist/utils/anchoredPopupPlacement.d.ts

@@ -0,0 +1,76 @@
+export type PopupPlacement = 'above' | 'below';
+export declare const ANCHORED_POPUP_GAP = 4;
+export declare const ANCHORED_POPUP_VIEWPORT_MARGIN = 48;
+export declare const ANCHORED_POPUP_MIN_HEIGHT = 120;
+/** Default stacking above typical product chrome; hosts can override via zIndex. */
+export declare const ANCHORED_POPUP_Z_INDEX = 1000;
+export interface AnchoredPopupPlacementOptions {
+    /** Gap between trigger and popup. Default: 4. */
+    gap?: number;
+    /** Reserved space at the viewport edge. Default: 48. */
+    viewportMargin?: number;
+    /** Height used to decide whether the popup fits below. */
+    preferredHeight: number;
+    /** Cap for scrollable menus (e.g. Select/Combobox 280). */
+    maxHeightCap?: number;
+    /** Floor so short viewports still show a scrollable list. Default: 120. */
+    minHeight?: number;
+}
+export interface AnchoredPopupPlacementResult {
+    placement: PopupPlacement;
+    maxHeight: number;
+}
+/**
+ * Prefers opening below the anchor; flips above when there isn’t enough room
+ * below and there is more space above. Max-height is the available space in the
+ * chosen direction, optionally capped.
+ */
+export declare function computeAnchoredPopupPlacement(anchorRect: Pick<DOMRect, 'top' | 'bottom'>, viewportHeight: number, options: AnchoredPopupPlacementOptions & {
+    /** When set, flip/max-height use this box instead of the viewport. */
+    bounds?: Pick<DOMRect, 'top' | 'bottom'>;
+}): AnchoredPopupPlacementResult;
+export interface AnchoredPopupFixedStyle {
+    position: 'fixed' | 'absolute';
+    top?: number;
+    bottom?: number;
+    left: number;
+    width: number;
+    zIndex: number;
+}
+export type AnchoredPopupBounds = Pick<DOMRect, 'top' | 'bottom' | 'left' | 'width' | 'height'>;
+/** Mount element metrics for portaled absolute positioning. */
+export interface AnchoredPopupContainerFrame {
+    /** Visible viewport bounds used for flip/max-height. */
+    bounds: Pick<DOMRect, 'top' | 'bottom'>;
+    /** Maps a viewport anchor rect into mount padding-box coordinates. */
+    anchorInContainer: (anchorRect: Pick<DOMRect, 'top' | 'bottom' | 'left' | 'width'>) => {
+        left: number;
+        top: number;
+        bottom: number;
+        width: number;
+    };
+    /** Visible padding-box height used for above `bottom` anchoring. */
+    clientHeight: number;
+    /** Current vertical scroll offset of the mount. */
+    scrollTop: number;
+}
+export declare function getAnchoredPopupContainerFrame(mount: HTMLElement): AnchoredPopupContainerFrame;
+/**
+ * Fixed box coords for a portaled popup anchored to a trigger rect.
+ * Below: top edge sits `gap` px under the trigger bottom.
+ * Above: bottom edge sits `gap` px above the trigger top (uses `bottom` so
+ * height does not affect the gap).
+ *
+ * When `containerFrame` is provided, returns `absolute` coords in the mount
+ * padding box (accounts for scroll and client border offsets). Otherwise uses
+ * viewport `fixed` coords (document.body default).
+ */
+export declare function computeAnchoredPopupFixedStyle(anchorRect: Pick<DOMRect, 'top' | 'bottom' | 'left' | 'width'>, placement: PopupPlacement, options: {
+    gap?: number;
+    zIndex?: number;
+    /** Override width (defaults to trigger width). */
+    width?: number;
+    viewportHeight?: number;
+    containerFrame?: AnchoredPopupContainerFrame;
+}): AnchoredPopupFixedStyle;
+//# sourceMappingURL=anchoredPopupPlacement.d.ts.map

package/dist/utils/anchoredPopupPlacement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"anchoredPopupPlacement.d.ts","sourceRoot":"","sources":["../../src/utils/anchoredPopupPlacement.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,OAAO,CAAC;AAE/C,eAAO,MAAM,kBAAkB,IAAI,CAAC;AACpC,eAAO,MAAM,8BAA8B,KAAK,CAAC;AACjD,eAAO,MAAM,yBAAyB,MAAM,CAAC;AAC7C,oFAAoF;AACpF,eAAO,MAAM,sBAAsB,OAAO,CAAC;AAE3C,MAAM,WAAW,6BAA6B;IAC5C,iDAAiD;IACjD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wDAAwD;IACxD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0DAA0D;IAC1D,eAAe,EAAE,MAAM,CAAC;IACxB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2EAA2E;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,4BAA4B;IAC3C,SAAS,EAAE,cAAc,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;CACnB;AAED;;;;GAIG;AACH,wBAAgB,6BAA6B,CAC3C,UAAU,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,GAAG,QAAQ,CAAC,EAC3C,cAAc,EAAE,MAAM,EACtB,OAAO,EAAE,6BAA6B,GAAG;IACvC,sEAAsE;IACtE,MAAM,CAAC,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,GAAG,QAAQ,CAAC,CAAC;CAC1C,GACA,4BAA4B,CA6B9B;AAED,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,OAAO,GAAG,UAAU,CAAC;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,OAAO,EACP,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAC/C,CAAC;AAEF,+DAA+D;AAC/D,MAAM,WAAW,2BAA2B;IAC1C,wDAAwD;IACxD,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,GAAG,QAAQ,CAAC,CAAC;IACxC,sEAAsE;IACtE,iBAAiB,EAAE,CACjB,UAAU,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC,KAC3D;QACH,IAAI,EAAE,MAAM,CAAC;QACb,GAAG,EAAE,MAAM,CAAC;QACZ,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,oEAAoE;IACpE,YAAY,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,8BAA8B,CAC5C,KAAK,EAAE,WAAW,GACjB,2BAA2B,CA4B7B;AAED;;;;;;;;;GASG;AACH,wBAAgB,8BAA8B,CAC5C,UAAU,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC,EAC9D,SAAS,EAAE,cAAc,EACzB,OAAO,EAAE;IACP,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,2BAA2B,CAAC;CAC9C,GACA,uBAAuB,CA8CzB"}

package/dist/utils/string.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Converts a string to kebab-case.
+ * Used to map Figma-named prop values (e.g. "Do Not Disturb", "X-Small")
+ * to CSS modifier class name suffixes (e.g. "do-not-disturb", "x-small").
+ */
+export declare const toKebab: (s: string) => string;
+//# sourceMappingURL=string.d.ts.map

package/dist/utils/string.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"string.d.ts","sourceRoot":"","sources":["../../src/utils/string.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,OAAO,MAAO,MAAM,WAAyC,CAAC"}

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@mattermost/compass-ui",
+  "version": "0.1.0-alpha.0",
+  "description": "Compass design system UI components for Mattermost products",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles": {
+      "import": "./dist/compass-ui.css",
+      "default": "./dist/compass-ui.css"
+    },
+    "./styles/standalone": {
+      "import": "./dist/compass-ui-standalone.css",
+      "default": "./dist/compass-ui-standalone.css"
+    },
+    "./component-styles": {
+      "import": "./dist/index.css",
+      "default": "./dist/index.css"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build:sass": "sass src/styles/entry.scss dist/compass-ui.css --load-path=src/styles --no-source-map && sass src/styles/standalone-entry.scss dist/compass-ui-standalone.css --load-path=src/styles --no-source-map",
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "typecheck": "tsc -p tsconfig.build.json --noEmit",
+    "test": "vitest run",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "peerDependencies": {
+    "@mattermost/compass-icons": "^0.1.63",
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0",
+    "simplebar-react": "^3.3.2"
+  },
+  "peerDependenciesMeta": {
+    "simplebar-react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@fontsource/metropolis": "^5.2.5",
+    "@fontsource/open-sans": "^5.2.7",
+    "@mattermost/compass-icons": "^0.1.63",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-interactions": "^8.6.14",
+    "@storybook/react": "^8.6.14",
+    "@storybook/react-vite": "^8.6.14",
+    "@storybook/test": "^8.6.14",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "sass": "^1.83.4",
+    "simplebar-react": "^3.3.2",
+    "storybook": "^8.6.14",
+    "typescript": "~5.7.2",
+    "happy-dom": "^17.4.4",
+    "vitest": "^3.0.5",
+    "vite": "^6.0.5",
+    "vite-plugin-dts": "^4.5.3",
+    "vite-plugin-svgr": "^4.5.0",
+    "vite-plugin-lib-inject-css": "^2.2.1"
+  }
+}