pixelize-design-library 2.3.1-beta.19 → 2.3.1-beta.20

package/.cursor/modules/utility-ui/MODULE.md

@@ -0,0 +1,15 @@
+# Utility UI
+
+## Purpose
+
+Generic standalone UI helpers: CopyButton, ScrollToTop, LazyWrapper, MoreItems, EmptyState, PdfViewer, FilePreview, FieldSelectModal, ProfilePhotoViewer, StageProgress.
+
+## Key paths
+
+- `src/Components/CopyButton/`, `ScrollToTop/`, `LazyWrapper/`, `MoreItems/`, `EmptyState/`, `PdfViewer/`, `FilePreview/`, `FieldSelectModal/`, `ProfilePhotoViewer/`, `StageProgress/`
+
+## Key rules
+
+- FilePreview also exports `FilePreviewTrigger`; StageProgress also exports `StageItem` (StepperStage is internal)
+- LazyWrapper wraps lazy/Suspense loading; ScrollToTop is a scroll-position helper — keep them framework-agnostic (props in, events out)
+- Single-file components (CopyButton, ScrollToTop, LazyWrapper, PdfViewer, FieldSelectModal) have no colocated Props file — types are inline

package/.cursor/modules/utils-hooks/MODULE.md

@@ -0,0 +1,13 @@
+# Utils & Hooks
+
+## Purpose
+
+Shared utilities and hooks: debounce, table helpers, preferences.
+
+## Key paths
+
+- `src/Utils/table.ts`, `src/Hooks/usePreferences.ts`, `src/services/feedback.ts`
+
+## Key rules
+
+- `debounce` exported from index.ts

package/.cursor/pixelize-task-statusline.sh

@@ -0,0 +1,64 @@
+#!/usr/bin/env bash
+# Local status line only — never sent to the model. See .cursor/TASK-SETUP.md
+set -euo pipefail
+
+STATE_FILE="${HOME}/.cursor/pixelize-skill-session-state.json"
+
+payload=$(cat)
+dir=$(echo "$payload" | jq -r ".cwd // .workspace.current_dir // empty")
+session_id=$(echo "$payload" | jq -r ".session_id // empty")
+base=$(basename "$dir")
+
+show_no_skill_warning=false
+if [[ -n "$session_id" && -f "$STATE_FILE" ]]; then
+  if jq -e --arg id "$session_id" '.[$id].chatting_without_skill == true' "$STATE_FILE" >/dev/null 2>&1; then
+    show_no_skill_warning=true
+  fi
+fi
+
+case "$base" in
+  account-frontend|account-service)
+    line1="/ → task  (Account FE + BE)"
+    line2=""
+    ;;
+  crm-frontend|crm-service)
+    line1="/ → task  (this repo)"
+    line2="/ → crm-task  (CRM FE + BE)"
+    ;;
+  social-frontend|social-service)
+    line1="/ → task  (this repo)"
+    line2="/ → social-task  (Social FE + BE)"
+    ;;
+  tickets-frontend)
+    line1="/ → task  (this repo)"
+    line2="/ → tickets-task"
+    ;;
+  crm-mobile)
+    line1="/ → task  (this repo)"
+    line2="/ → crm-mobile-task"
+    ;;
+  Micro-Components)
+    line1="/ → task  (this repo)"
+    line2="/ → design-task"
+    ;;
+  hrms)
+    line1="/ → task  (this repo)"
+    line2="/ → hrms-task  (HRMS FE + BE)"
+    ;;
+  *)
+    line1="Open a Pixelize repo root for / → task"
+    line2=""
+    ;;
+esac
+
+if [[ "$show_no_skill_warning" == "true" ]]; then
+  echo -e "\033[1;33m\033[7m  ⚠  CHATTING WITHOUT TASK SKILL — use / menu  ⚠  \033[0m"
+  echo -e "\033[1;33m━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\033[0m"
+fi
+
+echo -e "\033[1;33m━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\033[0m"
+echo -e "\033[1;33m  FEATURE WORK → $line1\033[0m"
+if [ -n "$line2" ]; then
+  echo -e "\033[1;33m  Full pipeline → $line2\033[0m"
+fi
+echo -e "\033[1;33m━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\033[0m"

package/.cursor/plans/current.md

@@ -0,0 +1,35 @@
+# Fix Dropdown menu viewport overflow
+
+## Goal
+
+When the Dropdown trigger sits near a screen edge (e.g. far right), the portaled menu currently renders off-screen. It should reposition to stay fully visible within the viewport.
+
+## Type
+
+fix
+
+## Scope
+
+- In scope: `src/Components/Dropdown/DropDown.tsx` positioning logic
+- Out of scope: visual restyle, new props API, other select components
+- Agents needed: fe-impl
+
+## Root cause
+
+`updateMenuPos` sets `top = r.bottom, left = r.left` with no viewport clamping. The `position="fixed"` portaled menu overflows when the trigger is near the right/bottom edge.
+
+## Tasks
+
+### Component (fe-impl)
+
+- [ ] Clamp horizontal position: right-align to trigger and clamp to viewport (8px gutter) when overflowing the right edge; clamp left edge too.
+- [ ] Clamp vertical position: flip above the trigger when the menu would overflow the bottom and there is more space above; otherwise clamp.
+- [ ] Measure the rendered menu (width/height) via the menu ref so clamping uses real dimensions; recompute on open, scroll, resize.
+
+### Tests
+
+- [ ] Jest test for Dropdown: opens, renders options, repositions left when trigger near right edge.
+
+## Risks / assumptions
+
+- Uses viewport (window.innerWidth/Height) — fixed positioning, correct for portal-to-body.

package/.cursor/rules

@@ -0,0 +1,31 @@
+## Session start
+- Always read CLAUDE.md before starting any task
+- Always read MODULE.md before touching a component family (`.cursor/modules/<domain>/MODULE.md`)
+- Read one similar existing component before implementing
+- Never invent a new pattern if one already exists
+
+## Implementation
+- Components live in `src/Components/<Name>/`
+- Public API via `src/index.ts` only
+- Demo pages in `src/Pages/` for playground — not published
+- Never add CRM/app-specific API calls to library components
+- Use theme tokens from `src/Theme/` — no hardcoded brand colors
+- Add Jest tests for new behavior (`*.test.tsx`)
+- Keep changes minimal — no scope creep
+
+## Output quality
+- Never create placeholder files unless explicitly asked
+- Never use fake data, lorem ipsum, example.com, or demo seeds
+- Never leave TODO comments — implement fully or report blocked
+- Production-ready components with loading/error states where applicable
+
+## Branch rules
+- Always branch from **develop** — never from main
+- Feature work: `feature/<domain>-<short-description>`
+- Bug fixes: `fix/<domain>-<short-description>`
+- Never commit directly to main
+
+## Commit rules
+- Never commit without explicit user confirmation
+- Never run git push under any condition
+- Never add Cursor co-author lines

package/.cursor/skills/task/SKILL.md

@@ -0,0 +1,167 @@
+---
+name: task
+description: >-
+  Runs the Pixelize Design Library dev pipeline: task-plan → fe-impl → test-create → test-exec → review gate → commit. Use when the user invokes @task, /task, or requests component library delivery.
+disable-model-invocation: true
+---
+
+# Task Pipeline — Pixelize Design Library
+
+Single library repo **Micro-Components** (`pixelize-design-library`). Module docs: `.cursor/modules/<domain>/MODULE.md`.
+
+Run phases in order. Do not skip unless user opts out.
+
+```
+- [ ] 1. Task plan       (agent: task-plan)
+- [ ] 2. Implementation  (agents: fe-impl + be-impl, parallel when both needed)
+- [ ] 3a. Test creation  (agent: test-create)
+- [ ] 3b. Test execution (agent: test-exec)
+- [ ] 4. Review gate     (orchestrator — show diff, wait for user)
+- [ ] 5. Commit          (orchestrator only)
+```
+
+---
+
+## Before Starting
+
+1. Read CLAUDE.md
+2. Confirm user goal — feat / fix / refactor / chore
+3. Tell user which phases apply
+
+---
+
+## Phase 1 — Task Plan
+
+Agent: task-plan → `.cursor/agents/task-plan.md`
+
+- Read `.cursor/modules/<domain>/MODULE.md` for touched component families
+- Plan saved to `.cursor/plans/current.md`
+- If current.md already exists — read it first, user may be resuming
+
+Gate: do not start phase 2 until plan has concrete tasks.
+
+---
+
+## Phase 2 — Implementation
+
+| Plan says | Action |
+|-----------|--------|
+| Library only | Invoke fe-impl only |
+| Both | Rare — fe-impl + test agents |
+
+Pass `.cursor/plans/current.md` to each agent.
+
+If blocked mid-task:
+- Save progress to `.cursor/plans/blocked/<task-name>.md` with exact blocker details
+- Stop pipeline and report to user
+
+Gate: all required agents must report Done or Blocked before phase 3.
+
+---
+
+## Phase 3 — Tests
+
+3a: test-create → `.cursor/agents/test-create.md`
+3b: test-exec → `.cursor/agents/test-exec.md`
+
+Jest: `npm test` from repo root.
+
+Gate: do not proceed to review if tests failed and not explicitly waived by user.
+
+---
+
+## Phase 4 — Review Gate
+
+```bash
+git status
+git diff
+git diff --staged
+git log -5 --oneline
+```
+
+Run git status/diff. STOP and wait for user approval.
+
+```
+CHANGES READY TO COMMIT
+
+Backend:
+- path/to/file — what changed
+
+Frontend:
+- path/to/component — what changed
+
+Tests:
+- path/to/test — what it covers
+
+MODULE.md updates:
+- path/to/MODULE.md
+
+Excluded:
+- none
+```
+
+STOP. Wait for: "yes" / "commit" / "looks good" / "go ahead"
+
+
+## Phase 5 — Commit
+
+### Commit message format
+
+```
+<type>(<module>): <concise imperative title>
+
+Backend:
+- <specific change — file context>
+
+Frontend:
+- <specific change — file context>
+
+Tests:
+- <what is covered and where>
+
+Config:
+- <migrations, registry changes, config updates>
+```
+
+### Commit steps
+
+1. Scan diff — if .env or secrets found, warn user and ask if they want to include. Commit only on confirmation.
+2. git add relevant files — state any exclusions clearly
+3. git commit using HEREDOC — never add Cursor attribution lines
+4. If Cursor injects co-author lines — amend immediately if unpushed
+5. Verify: git status + git log -1 --format=full
+6. Show commit hash to user
+7. Move `.cursor/plans/current.md` → `.cursor/plans/done/<YYYY-MM-DD>-<title>.md`
+
+Never run git push under any condition.
+
+### Commit safety
+
+- Never --no-verify unless user explicitly requests
+- Never force-push any branch
+- Nothing staged → skip commit, report clearly
+
+---
+
+## Final Report
+
+| Phase    | Status         | Notes                             |
+| -------- | -------------- | --------------------------------- |
+| 1 Plan   | done / skipped | saved to .cursor/plans/current.md |
+| 2 Impl   | fe / be / both | done / blocked                    |
+| 3 Tests  | create / exec  | pass / fail / blocked             |
+| 4 Review | approved       | confirmed by user                 |
+| 5 Commit | done / skipped | hash if committed                 |
+
+---
+
+## User Opt-outs
+
+| User says     | Effect                                    |
+| ------------- | ----------------------------------------- |
+| "plan only"   | Stop after phase 1                        |
+| "no tests"    | Skip phase 3 — confirm with user first    |
+| "no commit"   | Stop after phase 4 review                 |
+| "commit only" | Phase 4+5 only — still show diff and wait |
+| "skip review" | Go straight to commit — confirm with user |
+

package/CLAUDE.md

@@ -0,0 +1,122 @@
+# Pixelize Design Library — Agent Guide
+
+Rules for AI assistants working in **Micro-Components** (npm: `pixelize-design-library`).
+
+## 1. App name and purpose
+
+**Pixelize Design Library** — shared React UI component library and theme system for all Pixelize frontends. Published to npm; local Vite playground demos components in `src/Pages/`.
+
+## 2. Stack
+
+| Layer         | Technology                          | Version        |
+| ------------- | ----------------------------------- | -------------- |
+| Framework     | React + TypeScript                  | 18.3.1 / 5.9.3 |
+| UI base       | Chakra UI + Emotion + Framer Motion | 2.8.2          |
+| Build         | `tsc` → `dist/` + CSS copy          | —              |
+| Dev           | Vite playground                     | 6.2.0          |
+| Styling       | Tailwind + global CSS               | 3.4.17         |
+| Tests         | Jest + Testing Library              | 29.7.0         |
+| Package       | `pixelize-design-library`           | 2.2.x          |
+
+Not a monorepo — single package, one `package.json`.
+
+## 3. Repo relationship
+
+| Repo / package              | Role                                              |
+| --------------------------- | ------------------------------------------------- |
+| **Micro-Components** (here) | Source of `pixelize-design-library` npm package   |
+| **crm-frontend**            | Consumer — `npm run pixelize` to update           |
+| **account-frontend**        | Consumer                                          |
+| **social-frontend**         | Consumer                                          |
+| **tickets-frontend**        | Consumer                                          |
+| **crm-mobile**              | Consumer (native-base overlap — check mobile)     |
+| **pixelize-authenticator**  | Companion auth UI package (separate repo)         |
+
+No backend API in this repo. Demo pages may call dev APIs for playground only.
+
+## 4. Folder structure (2 levels)
+
+```
+Micro-Components/
+├── package.json, tsconfig.json, vite.config.ts
+├── src/
+│   ├── index.ts              public exports (~80)
+│   ├── withTheme.tsx         HOC wrapper
+│   ├── Components/           73 component families
+│   ├── Theme/                8 brand presets + useCustomTheme
+│   ├── Pages/                49 Vite demo/playground pages
+│   ├── Utils/, Hooks/, services/, types/
+│   └── App.tsx, Layout.tsx   playground shell
+├── dist/                     publish output (gitignored)
+└── .cursor/modules/          MODULE.md per component domain (22 domains)
+```
+
+## 5. Dev commands
+
+```bash
+npm start              # Vite playground
+npm run build          # tsc + copy CSS → dist/
+npm test               # Jest
+npm run test:watch
+npm run remove         # strip dev artifacts from dist before publish
+npm run package        # version patch + build + publish
+```
+
+## 6. Module / component pattern
+
+Follow the **Table** or **KanbanBoard** pattern for complex components:
+
+| Step | Path |
+| ---- | ---- |
+| Component | `src/Components/<Name>/` |
+| Subcomponents | `src/Components/<Name>/Components/` or nested folders |
+| Props/types | `<Name>Props.ts` or colocated types |
+| Tests | `*.test.tsx` next to component |
+| Stories | `*.stories.tsx` (where present) |
+| Demo page | `src/Pages/<name>.tsx` |
+| Public export | add to `src/index.ts` |
+| Module doc | `.cursor/modules/<domain>/MODULE.md` |
+
+Read `.cursor/modules/<domain>/MODULE.md` before touching a component family.
+
+## 7. Publishing integration
+
+- **Exports:** every public component must be exported from `src/index.ts`
+- **Peers:** React 18, Chakra, Emotion — consumers install alongside library
+- **Build:** `npm run build` compiles to `dist/`; never edit `dist/` directly
+- **Version:** patch releases via `npm run package`; CI publishes on merge to `develop`
+- **Breaking changes:** require version bump + consumer update in frontends
+
+## 8. Checklist — adding a new component
+
+1. Read similar component + `.cursor/modules/<domain>/MODULE.md`
+2. Create `src/Components/<Name>/` with component + props
+3. Add demo page in `src/Pages/` if needed
+4. Export from `src/index.ts`
+5. Add Jest tests (`*.test.tsx`)
+6. Update `.cursor/modules/<domain>/MODULE.md`
+7. Verify playground: `npm start`
+8. After merge to develop: consumers run `npm run pixelize` in their frontend
+
+## 9. Do
+
+- Match existing Chakra + design token patterns in `src/Theme/`
+- Keep components framework-agnostic where possible (props in, events out)
+- Add tests for new behavior
+- Use `useCustomTheme` / theme tokens — no hardcoded brand colors
+- Branch from **feature/cursor-ai-setup** or **develop**
+
+## 10. Don't
+
+- Don't add app-specific business logic (CRM entities, API calls) to library components
+- Don't break existing exports without semver major bump
+- Don't edit `dist/` — always change `src/` and rebuild
+- Don't skip `index.ts` export for public components
+- Don't introduce a second component pattern without team agreement
+- Don't commit npm tokens or `.env` secrets
+
+## Task pipeline
+
+- **Feature work:** invoke via **`/` menu → `task`** (not by typing `/task` in the message).
+- Cross-repo: **`/ → design-task**`.
+- One-time status line + hook details: [.cursor/TASK-SETUP.md](.cursor/TASK-SETUP.md).

package/dist/Components/Card/PaymentCard/PaymentCard.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { PaymentCardProps } from "./PaymentCardProps";
-declare const PaymentCard: ({ plan, isActive, isNextUpgrade, billingCycle, onSelect, onHover, buttonLoading, isLoading, }: PaymentCardProps) => React.JSX.Element;
+declare const PaymentCard: ({ plan, isActive, isNextUpgrade, billingCycle, onSelect, onHover, buttonLoading, isLoading, isRenewal, }: PaymentCardProps) => React.JSX.Element;
 export default PaymentCard;

package/dist/Components/Card/PaymentCard/PaymentCard.js

@@ -52,9 +52,9 @@ var getCardStyles = function (isActive, isNextUpgrade, popular, theme) {
     };
 };
 var PaymentCard = function (_a) {
-    var plan = _a.plan, _b = _a.isActive, isActive = _b === void 0 ? false : _b, _c = _a.isNextUpgrade, isNextUpgrade = _c === void 0 ? false : _c, billingCycle = _a.billingCycle, onSelect = _a.onSelect, onHover = _a.onHover, buttonLoading = _a.buttonLoading, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d;
+    var plan = _a.plan, _b = _a.isActive, isActive = _b === void 0 ? false : _b, _c = _a.isNextUpgrade, isNextUpgrade = _c === void 0 ? false : _c, billingCycle = _a.billingCycle, onSelect = _a.onSelect, onHover = _a.onHover, buttonLoading = _a.buttonLoading, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, _e = _a.isRenewal, isRenewal = _e === void 0 ? false : _e;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _e = getCardStyles(isActive, isNextUpgrade, !!plan.popular, theme), badgeText = _e.badgeText, badgeColor = _e.badgeColor, buttonColor = _e.buttonColor, buttonColor50 = _e.buttonColor50;
+    var _f = getCardStyles(isActive, isNextUpgrade, !!plan.popular, theme), badgeText = _f.badgeText, badgeColor = _f.badgeColor, buttonColor = _f.buttonColor, buttonColor50 = _f.buttonColor50;
     var variantStyles = plan.buttonVariant === "outline"
         ? {
             borderColor: buttonColor,
@@ -93,7 +93,7 @@ var PaymentCard = function (_a) {
                         react_1.default.createElement(react_2.Text, { fontSize: "0.7rem", fontWeight: "normal", color: theme.colors.gray[600] }, plan.tax)))),
                 plan.priceDescription && (react_1.default.createElement(react_2.Text, { color: theme.colors.green[800], mt: 2 }, plan === null || plan === void 0 ? void 0 : plan.priceDescription)),
                 react_1.default.createElement(react_2.Text, { color: theme.colors.gray[600], mt: 2 }, plan.description)),
-            !isActive && plan.buttonText && (react_1.default.createElement(Button_1.default, __assign({ isLoading: plan.plan_id === buttonLoading, loadingText: plan.buttonLoadingText, width: "full", variant: plan.buttonVariant, size: "lg", onClick: function () { return onSelect === null || onSelect === void 0 ? void 0 : onSelect(plan.plan_id); }, onMouseEnter: function () { return onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", true); }, onMouseLeave: function () { return onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", false); } }, variantStyles), plan.buttonText)),
+            ((!isActive && plan.buttonText) || isRenewal) && (react_1.default.createElement(Button_1.default, __assign({ isLoading: plan.plan_id === buttonLoading, loadingText: plan.buttonLoadingText, width: "full", variant: plan.buttonVariant, size: "lg", onClick: function () { return onSelect === null || onSelect === void 0 ? void 0 : onSelect(plan.plan_id); }, onMouseEnter: function () { return onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", true); }, onMouseLeave: function () { return onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", false); } }, variantStyles), plan.buttonText)),
             react_1.default.createElement(react_2.VStack, { align: "start", spacing: 3, mt: 6 }, plan.features.map(function (feature, i) { return (react_1.default.createElement(react_2.Flex, { key: i, align: "center" },
                 react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Check, color: theme.colors.green[500], mr: 2 }),
                 react_1.default.createElement(react_2.Text, { fontSize: "sm" }, feature))); })))))));

package/dist/Components/Card/PaymentCard/PaymentCardProps.d.ts

@@ -7,6 +7,7 @@ export type PaymentCardProps = {
     onHover?: (planId: number, type: "card" | "button", state: boolean) => void;
     buttonLoading?: number;
     isLoading?: boolean;
+    isRenewal?: boolean;
 };
 export type Plan = {
     plan_id: number;

package/dist/Components/Dropdown/DropDown.js

@@ -72,12 +72,35 @@ var Dropdown = (0, react_1.forwardRef)(function (_a, ref) {
         handleOptionSelect(optionId, optionLabel);
     };
     // The menu is portaled to <body> (so it sits above everything). Anchor it to
-    // the trigger and keep it anchored while the page/ancestors scroll or resize.
+    // the trigger, then clamp to the viewport so it never overflows off-screen
+    // (e.g. when the trigger sits near the right or bottom edge).
     var updateMenuPos = (0, react_1.useCallback)(function () {
+        var _a, _b;
         if (!dropdownRef.current)
             return;
         var r = dropdownRef.current.getBoundingClientRect();
-        setMenuPos({ top: r.bottom, left: r.left, width: r.width });
+        var gutter = 8;
+        var vw = window.innerWidth;
+        var vh = window.innerHeight;
+        // Use the rendered menu size when available; fall back to trigger width.
+        var menuW = ((_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || r.width;
+        var menuH = ((_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0;
+        // Horizontal: prefer left-aligned to trigger; if it overflows the right
+        // edge, right-align to the trigger, then clamp within [gutter, vw-gutter].
+        var left = r.left;
+        if (left + menuW > vw - gutter)
+            left = r.right - menuW;
+        left = Math.min(Math.max(left, gutter), Math.max(gutter, vw - menuW - gutter));
+        // Vertical: prefer below the trigger; flip above when it would overflow the
+        // bottom and there is more room above. Clamp within the viewport.
+        var top = r.bottom;
+        var spaceBelow = vh - r.bottom;
+        var spaceAbove = r.top;
+        if (menuH && top + menuH > vh - gutter && spaceAbove > spaceBelow) {
+            top = r.top - menuH;
+        }
+        top = Math.min(Math.max(top, gutter), Math.max(gutter, vh - menuH - gutter));
+        setMenuPos({ top: top, left: left, width: r.width });
     }, []);
     (0, react_1.useEffect)(function () {
         if (!isOpen)
@@ -112,6 +135,9 @@ var Dropdown = (0, react_1.forwardRef)(function (_a, ref) {
             ref(node);
         else if (ref)
             ref.current = node;
+        // Recompute once the menu has mounted so clamping uses its real size.
+        if (node)
+            updateMenuPos();
     };
     var Chevron = isVisibleIconShow ? (react_1.default.createElement(react_2.Box, { as: "span", display: "inline-flex", transition: "transform 0.2s ease", transform: isOpen ? "rotate(180deg)" : "rotate(0deg)" },
         react_1.default.createElement(lucide_react_1.ChevronDown, { size: s.chevron }))) : undefined;

package/dist/Components/Dropdown/Dropdown.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/Components/Dropdown/Dropdown.test.js

@@ -0,0 +1,102 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var react_3 = require("@chakra-ui/react");
+var DropDown_1 = __importDefault(require("./DropDown"));
+jest.mock("../../Theme/useCustomTheme", function () { return ({
+    useCustomTheme: function () { return ({
+        colors: {
+            white: "#ffffff",
+            gray: { 100: "#f0f0f0", 200: "#e2e8f0", 300: "#cbd5e1", 400: "#94a3b8", 500: "#64748b", 700: "#334155" },
+            primary: { 600: "#4f46e5", 700: "#4338ca", opacity: { 8: "rgba(99,102,241,0.08)" } },
+            boxborder: { 100: "#eef2f6", 200: "#e2e8f0" },
+            text: { 700: "#334155" },
+        },
+        shadows: { lg: "0 10px 15px rgba(0,0,0,0.1)" },
+    }); },
+}); });
+beforeAll(function () {
+    Object.defineProperty(window, "matchMedia", {
+        writable: true,
+        configurable: true,
+        value: jest.fn().mockImplementation(function (query) { return ({
+            matches: false,
+            media: query,
+            onchange: null,
+            addListener: jest.fn(),
+            removeListener: jest.fn(),
+            addEventListener: jest.fn(),
+            removeEventListener: jest.fn(),
+            dispatchEvent: jest.fn(),
+        }); }),
+    });
+    Object.defineProperty(window, "innerWidth", { writable: true, configurable: true, value: 1000 });
+    Object.defineProperty(window, "innerHeight", { writable: true, configurable: true, value: 800 });
+});
+var options = [
+    { id: 1, label: "Upload file" },
+    { id: 2, label: "Documents" },
+];
+var renderWithChakra = function (ui) {
+    return (0, react_2.render)(react_1.default.createElement(react_3.ChakraProvider, null, ui));
+};
+describe("Dropdown", function () {
+    it("renders the trigger and opens the menu on click", function () {
+        var onSelect = jest.fn();
+        renderWithChakra(react_1.default.createElement(DropDown_1.default, { ButtonText: "Actions", options: options, handleOptionSelect: onSelect }));
+        var trigger = react_2.screen.getByRole("button", { name: /actions/i });
+        expect(trigger).toBeInTheDocument();
+        expect(react_2.screen.queryByText("Upload file")).not.toBeInTheDocument();
+        react_2.fireEvent.click(trigger);
+        expect(react_2.screen.getByText("Upload file")).toBeInTheDocument();
+        expect(react_2.screen.getByText("Documents")).toBeInTheDocument();
+    });
+    it("calls handleOptionSelect with the chosen option", function () {
+        var onSelect = jest.fn();
+        renderWithChakra(react_1.default.createElement(DropDown_1.default, { ButtonText: "Actions", options: options, handleOptionSelect: onSelect }));
+        react_2.fireEvent.click(react_2.screen.getByRole("button", { name: /actions/i }));
+        react_2.fireEvent.click(react_2.screen.getByText("Documents"));
+        expect(onSelect).toHaveBeenCalledWith(2, "Documents");
+    });
+    it("clamps the menu within the viewport when the trigger is near the right edge", function () {
+        var onSelect = jest.fn();
+        var container = renderWithChakra(react_1.default.createElement(DropDown_1.default, { ButtonText: "Actions", options: options, handleOptionSelect: onSelect })).container;
+        var trigger = react_2.screen.getByRole("button", { name: /actions/i });
+        var anchor = container.querySelector("div");
+        // Trigger sits flush against the right edge (viewport width = 1000).
+        jest
+            .spyOn(anchor, "getBoundingClientRect")
+            .mockReturnValue({
+            top: 100,
+            bottom: 140,
+            left: 960,
+            right: 1000,
+            width: 40,
+            height: 40,
+            x: 960,
+            y: 100,
+            toJSON: function () { return ({}); },
+        });
+        react_2.fireEvent.click(trigger);
+        // Walk up from the rendered option to the fixed-position menu container.
+        var node = react_2.screen.getByText("Upload file");
+        var menu = null;
+        while (node) {
+            if (getComputedStyle(node).position === "fixed") {
+                menu = node;
+                break;
+            }
+            node = node.parentElement;
+        }
+        expect(menu).toBeTruthy();
+        var left = parseFloat(getComputedStyle(menu).left);
+        // Must be pulled left of the trigger so it does not overflow the right edge.
+        expect(left).toBeLessThan(960);
+        expect(left).toBeGreaterThanOrEqual(8);
+    });
+});

package/dist/Components/SideBar/components/OtherApps.test.js

@@ -78,10 +78,11 @@ describe("OtherApps", function () {
     beforeEach(function () {
         jest.clearAllMocks();
     });
-    it("does not render flyout copy when expanded", function () {
+    it("renders the section header and inline labels when expanded", function () {
         renderWithChakra(react_1.default.createElement(OtherApps_1.default, { toggle: false, otherApps: sampleApps }));
-        expect(react_2.screen.getByText("Other Apps")).toBeInTheDocument();
+        expect(react_2.screen.getByText("Switch app")).toBeInTheDocument();
         expect(react_2.screen.getByText("Billing")).toBeInTheDocument();
+        expect(react_2.screen.getByText("Tickets")).toBeInTheDocument();
         expect(react_2.screen.queryAllByRole("tooltip")).toHaveLength(0);
     });
     it("shows flyout with Open label on hover when collapsed", function () { return __awaiter(void 0, void 0, void 0, function () {