@drivy/cobalt 2.24.0 → 3.0.1

package/components/Popover/useDesktopPopoverCore.js

@@ -5,13 +5,14 @@ import { useRef, useEffect } from 'react';
 import { zIndexes } from '../../tokens/index.js';
 
 const ANIMATION_TRANSITION_DISTANCE_PX = 4;
-function useDesktopPopoverCore({ isOpen, onOpenChange, referenceElement, placement = "top", flip: flip$1 = true, tooltip = false, arrow: showArrow = true, theme = "", zIndex = zIndexes.dropdown, appendToBody = true, fitContent = true, withBorder = false, trigger = "click", interactive = false, delay = 0, offset: offset$1, bodySpacing = false, ariaLabel, onShow, onHidden, getFloatingExtraProps, }) {
+function useDesktopPopoverCore({ isOpen, onOpenChange, referenceElement, placement = "top", flip: flip$1 = true, tooltip = false, arrow: showArrow = true, theme = "", zIndex = zIndexes.dropdown, appendToBody = true, fixed = false, fitContent = true, withBorder = false, trigger = "click", interactive = false, delay = 0, offset: offset$1, bodySpacing = false, ariaLabel, onShow, onHidden, getFloatingExtraProps, }) {
     const arrowRef = useRef(null);
     const [crossAxis, mainAxis] = offset$1 !== null && offset$1 !== void 0 ? offset$1 : [0, showArrow ? 12 : 8];
     const { refs, floatingStyles, context } = useFloating({
         open: isOpen,
         onOpenChange,
         placement,
+        strategy: fixed ? "fixed" : "absolute",
         transform: false,
         middleware: [
             shift({ padding: 8 }),

package/components/Popover/useDesktopPopoverCore.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDesktopPopoverCore.js","sources":["../../../src/components/Popover/useDesktopPopoverCore.tsx"],"sourcesContent":["import {\n  arrow,\n  autoUpdate,\n  FloatingArrow,\n  FloatingPortal,\n  flip as flipMiddleware,\n  offset as offsetMiddleware,\n  type Placement,\n  safePolygon,\n  shift as shiftMiddleware,\n  useClick,\n  useDismiss,\n  useFloating,\n  useHover,\n  useInteractions,\n  useRole,\n  useTransitionStyles,\n} from \"@floating-ui/react\"\nimport classNames from \"classnames\"\nimport type React from \"react\"\nimport { useEffect, useRef } from \"react\"\nimport { zIndexes } from \"../../tokens\"\n\nconst ANIMATION_TRANSITION_DISTANCE_PX = 4\n\nexport type PopoverConfig = {\n  placement?: Placement\n  flip?: boolean\n  arrow?: boolean\n  theme?: string\n  tooltip?: boolean\n  lightMode?: boolean\n  zIndex?: number\n  appendToBody?: boolean\n  withBorder?: boolean\n  fitContent?: boolean\n  trigger?: \"click\" | \"mouseenter\"\n  interactive?: boolean\n  delay?: number | { open?: number; close?: number }\n  offset?: [number, number]\n  bodySpacing?: boolean\n  onShow?: () => void\n  onHidden?: () => void\n}\n\nexport type UseDesktopPopoverCoreOptions = Omit<PopoverConfig, \"trigger\"> & {\n  isOpen: boolean\n  onOpenChange?: (open: boolean) => void\n  referenceElement: Element | null\n  trigger?: \"click\" | \"mouseenter\" | \"manual\"\n  ariaLabel?: string\n  getFloatingExtraProps?: () => React.HTMLAttributes<HTMLElement>\n}\n\nexport type DesktopPopoverCoreRefs = {\n  setReference: (node: Element | null) => void\n  setFloating: (node: HTMLElement | null) => void\n}\n\ntype UseDesktopPopoverCoreReturnType = {\n  refs: DesktopPopoverCoreRefs\n  getReferenceProps: ReturnType<\n    typeof import(\"@floating-ui/react\").useInteractions\n  >[\"getReferenceProps\"]\n  renderFloating: (content: React.ReactNode) => React.ReactNode\n  isMounted: boolean\n}\n\nexport function useDesktopPopoverCore({\n  isOpen,\n  onOpenChange,\n  referenceElement,\n  placement = \"top\",\n  flip = true,\n  tooltip = false,\n  arrow: showArrow = true,\n  theme = \"\",\n  zIndex = zIndexes.dropdown,\n  appendToBody = true,\n  fitContent = true,\n  withBorder = false,\n  trigger = \"click\",\n  interactive = false,\n  delay = 0,\n  offset,\n  bodySpacing = false,\n  ariaLabel,\n  onShow,\n  onHidden,\n  getFloatingExtraProps,\n}: UseDesktopPopoverCoreOptions): UseDesktopPopoverCoreReturnType {\n  const arrowRef = useRef<SVGSVGElement | null>(null)\n\n  const [crossAxis, mainAxis] = offset ?? [0, showArrow ? 12 : 8]\n\n  const { refs, floatingStyles, context } = useFloating({\n    open: isOpen,\n    onOpenChange,\n    placement,\n    transform: false,\n    middleware: [\n      shiftMiddleware({ padding: 8 }),\n      offsetMiddleware({ mainAxis, crossAxis }),\n      ...(flip ? [flipMiddleware()] : []),\n      ...(showArrow ? [arrow({ element: arrowRef })] : []),\n    ],\n    whileElementsMounted: autoUpdate,\n    elements: { reference: referenceElement },\n  })\n\n  const isHover = trigger === \"mouseenter\"\n  const isClick = trigger === \"click\"\n\n  const hover = useHover(context, {\n    enabled: isHover,\n    move: false,\n    delay,\n    handleClose: isHover && interactive ? safePolygon() : undefined,\n  })\n\n  const click = useClick(context, {\n    enabled: isClick,\n  })\n\n  const dismiss = useDismiss(context)\n  const role = useRole(context, { role: \"dialog\" })\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    hover,\n    click,\n    dismiss,\n    role,\n  ])\n\n  const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {\n    duration: { open: 200, close: 150 },\n    initial: ({ side }) => ({\n      opacity: 0,\n      transform:\n        side === \"top\"\n          ? `translateY(${ANIMATION_TRANSITION_DISTANCE_PX}px)`\n          : side === \"bottom\"\n            ? `translateY(-${ANIMATION_TRANSITION_DISTANCE_PX}px)`\n            : side === \"left\"\n              ? `translateX(${ANIMATION_TRANSITION_DISTANCE_PX}px)`\n              : `translateX(-${ANIMATION_TRANSITION_DISTANCE_PX}px)`,\n    }),\n  })\n\n  const prevMountedRef = useRef(false)\n\n  useEffect(() => {\n    if (isMounted && !prevMountedRef.current) onShow?.()\n    if (!isMounted && prevMountedRef.current) onHidden?.()\n    prevMountedRef.current = isMounted\n  }, [isMounted, onShow, onHidden])\n\n  const renderFloating = (content: React.ReactNode) => {\n    if (!isMounted) return null\n\n    const body = bodySpacing ? (\n      <div className=\"cobalt-popover--bodySpacing\">{content}</div>\n    ) : (\n      content\n    )\n\n    const extraFloatingProps = getFloatingExtraProps?.() ?? {}\n    const { onMouseEnter, onMouseLeave, ...restExtraFloatingProps } =\n      extraFloatingProps\n\n    const node = (\n      <div\n        ref={refs.setFloating}\n        style={{\n          ...floatingStyles,\n          ...transitionStyles,\n          zIndex,\n        }}\n        className={classNames(\"cobalt-popover\", {\n          \"cobalt-popover--withArrow\": showArrow,\n          \"cobalt-popover--fitContent\": fitContent,\n          \"cobalt-popover--withBorder\": withBorder,\n        })}\n        data-placement={context.placement}\n        data-theme={classNames(theme, {\n          tooltip: tooltip,\n        })}\n        {...getFloatingProps({\n          \"aria-label\": ariaLabel,\n          ...restExtraFloatingProps,\n          onMouseEnter,\n          onMouseLeave,\n        })}\n      >\n        {showArrow && (\n          <FloatingArrow\n            ref={arrowRef}\n            context={context}\n            className=\"cobalt-popover__arrow\"\n          />\n        )}\n        {body}\n      </div>\n    )\n\n    return appendToBody ? <FloatingPortal>{node}</FloatingPortal> : node\n  }\n\n  return {\n    refs: {\n      setReference: refs.setReference,\n      setFloating: refs.setFloating,\n    },\n    getReferenceProps,\n    renderFloating,\n    isMounted,\n  }\n}\n"],"names":["flip","offset","shiftMiddleware","offsetMiddleware","flipMiddleware","_jsx","_jsxs","classNames"],"mappings":"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"}
+{"version":3,"file":"useDesktopPopoverCore.js","sources":["../../../src/components/Popover/useDesktopPopoverCore.tsx"],"sourcesContent":["import {\n  arrow,\n  autoUpdate,\n  FloatingArrow,\n  FloatingPortal,\n  flip as flipMiddleware,\n  offset as offsetMiddleware,\n  type Placement,\n  safePolygon,\n  shift as shiftMiddleware,\n  useClick,\n  useDismiss,\n  useFloating,\n  useHover,\n  useInteractions,\n  useRole,\n  useTransitionStyles,\n} from \"@floating-ui/react\"\nimport classNames from \"classnames\"\nimport type React from \"react\"\nimport { useEffect, useRef } from \"react\"\nimport { zIndexes } from \"../../tokens\"\n\nconst ANIMATION_TRANSITION_DISTANCE_PX = 4\n\nexport type PopoverConfig = {\n  placement?: Placement\n  flip?: boolean\n  arrow?: boolean\n  theme?: string\n  tooltip?: boolean\n  lightMode?: boolean\n  zIndex?: number\n  appendToBody?: boolean\n  fixed?: boolean\n  withBorder?: boolean\n  fitContent?: boolean\n  trigger?: \"click\" | \"mouseenter\"\n  interactive?: boolean\n  delay?: number | { open?: number; close?: number }\n  offset?: [number, number]\n  bodySpacing?: boolean\n  onShow?: () => void\n  onHidden?: () => void\n}\n\nexport type UseDesktopPopoverCoreOptions = Omit<PopoverConfig, \"trigger\"> & {\n  isOpen: boolean\n  onOpenChange?: (open: boolean) => void\n  referenceElement: Element | null\n  trigger?: \"click\" | \"mouseenter\" | \"manual\"\n  ariaLabel?: string\n  getFloatingExtraProps?: () => React.HTMLAttributes<HTMLElement>\n}\n\nexport type DesktopPopoverCoreRefs = {\n  setReference: (node: Element | null) => void\n  setFloating: (node: HTMLElement | null) => void\n}\n\ntype UseDesktopPopoverCoreReturnType = {\n  refs: DesktopPopoverCoreRefs\n  getReferenceProps: ReturnType<\n    typeof import(\"@floating-ui/react\").useInteractions\n  >[\"getReferenceProps\"]\n  renderFloating: (content: React.ReactNode) => React.ReactNode\n  isMounted: boolean\n}\n\nexport function useDesktopPopoverCore({\n  isOpen,\n  onOpenChange,\n  referenceElement,\n  placement = \"top\",\n  flip = true,\n  tooltip = false,\n  arrow: showArrow = true,\n  theme = \"\",\n  zIndex = zIndexes.dropdown,\n  appendToBody = true,\n  fixed = false,\n  fitContent = true,\n  withBorder = false,\n  trigger = \"click\",\n  interactive = false,\n  delay = 0,\n  offset,\n  bodySpacing = false,\n  ariaLabel,\n  onShow,\n  onHidden,\n  getFloatingExtraProps,\n}: UseDesktopPopoverCoreOptions): UseDesktopPopoverCoreReturnType {\n  const arrowRef = useRef<SVGSVGElement | null>(null)\n\n  const [crossAxis, mainAxis] = offset ?? [0, showArrow ? 12 : 8]\n\n  const { refs, floatingStyles, context } = useFloating({\n    open: isOpen,\n    onOpenChange,\n    placement,\n    strategy: fixed ? \"fixed\" : \"absolute\",\n    transform: false,\n    middleware: [\n      shiftMiddleware({ padding: 8 }),\n      offsetMiddleware({ mainAxis, crossAxis }),\n      ...(flip ? [flipMiddleware()] : []),\n      ...(showArrow ? [arrow({ element: arrowRef })] : []),\n    ],\n    whileElementsMounted: autoUpdate,\n    elements: { reference: referenceElement },\n  })\n\n  const isHover = trigger === \"mouseenter\"\n  const isClick = trigger === \"click\"\n\n  const hover = useHover(context, {\n    enabled: isHover,\n    move: false,\n    delay,\n    handleClose: isHover && interactive ? safePolygon() : undefined,\n  })\n\n  const click = useClick(context, {\n    enabled: isClick,\n  })\n\n  const dismiss = useDismiss(context)\n  const role = useRole(context, { role: \"dialog\" })\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    hover,\n    click,\n    dismiss,\n    role,\n  ])\n\n  const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {\n    duration: { open: 200, close: 150 },\n    initial: ({ side }) => ({\n      opacity: 0,\n      transform:\n        side === \"top\"\n          ? `translateY(${ANIMATION_TRANSITION_DISTANCE_PX}px)`\n          : side === \"bottom\"\n            ? `translateY(-${ANIMATION_TRANSITION_DISTANCE_PX}px)`\n            : side === \"left\"\n              ? `translateX(${ANIMATION_TRANSITION_DISTANCE_PX}px)`\n              : `translateX(-${ANIMATION_TRANSITION_DISTANCE_PX}px)`,\n    }),\n  })\n\n  const prevMountedRef = useRef(false)\n\n  useEffect(() => {\n    if (isMounted && !prevMountedRef.current) onShow?.()\n    if (!isMounted && prevMountedRef.current) onHidden?.()\n    prevMountedRef.current = isMounted\n  }, [isMounted, onShow, onHidden])\n\n  const renderFloating = (content: React.ReactNode) => {\n    if (!isMounted) return null\n\n    const body = bodySpacing ? (\n      <div className=\"cobalt-popover--bodySpacing\">{content}</div>\n    ) : (\n      content\n    )\n\n    const extraFloatingProps = getFloatingExtraProps?.() ?? {}\n    const { onMouseEnter, onMouseLeave, ...restExtraFloatingProps } =\n      extraFloatingProps\n\n    const node = (\n      <div\n        ref={refs.setFloating}\n        style={{\n          ...floatingStyles,\n          ...transitionStyles,\n          zIndex,\n        }}\n        className={classNames(\"cobalt-popover\", {\n          \"cobalt-popover--withArrow\": showArrow,\n          \"cobalt-popover--fitContent\": fitContent,\n          \"cobalt-popover--withBorder\": withBorder,\n        })}\n        data-placement={context.placement}\n        data-theme={classNames(theme, {\n          tooltip: tooltip,\n        })}\n        {...getFloatingProps({\n          \"aria-label\": ariaLabel,\n          ...restExtraFloatingProps,\n          onMouseEnter,\n          onMouseLeave,\n        })}\n      >\n        {showArrow && (\n          <FloatingArrow\n            ref={arrowRef}\n            context={context}\n            className=\"cobalt-popover__arrow\"\n          />\n        )}\n        {body}\n      </div>\n    )\n\n    return appendToBody ? <FloatingPortal>{node}</FloatingPortal> : node\n  }\n\n  return {\n    refs: {\n      setReference: refs.setReference,\n      setFloating: refs.setFloating,\n    },\n    getReferenceProps,\n    renderFloating,\n    isMounted,\n  }\n}\n"],"names":["flip","offset","shiftMiddleware","offsetMiddleware","flipMiddleware","_jsx","_jsxs","classNames"],"mappings":"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"}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@drivy/cobalt",
-  "version": "2.24.0",
+  "version": "3.0.1",
   "description": "Opinionated design system for Drivy's projects.",
-  "main": "src/index.js",
+  "main": "index.js",
   "types": "types/src/index.d.ts",
   "sideEffects": [
     "*.css",
@@ -11,7 +11,8 @@
   "engines": {
     "node": ">=24.14.1"
   },
-  "module": "src/index.js",
+  "packageManager": "pnpm@11.1.3+sha512.c85357fe17ca12dd23dd7071822666dfd7e3cb76fe214e3370b5ea2fb34f2a231185509b63e717f3cd0acb38dd3f8d82bcd5e8172400ae678b70ea4fbed0896d",
+  "module": "index.js",
   "license": "MIT",
   "author": {
     "name": "Tim Petricola",
@@ -64,7 +65,7 @@
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "nested-object-access": "^0.2.5",
-    "np": "10.3.0",
+    "np": "11.2.1",
     "postcss-flexbugs-fixes": "5.0.2",
     "postcss-loader": "8.2.1",
     "react": "18.3.1",
@@ -88,6 +89,25 @@
     "ts-jest": "29.4.9",
     "typescript": "5.9.3"
   },
+  "scripts": {
+    "build": "./scripts/build.sh",
+    "build:dev": "pnpm build && yalc publish dist/",
+    "build:publish": "pnpm build && pnpm np --contents dist --package-manager npm",
+    "deploy": "./scripts/publishToBranch.sh",
+    "lint": "biome check && stylelint \"src/**/*.scss\"",
+    "lint:fix": "biome check --fix && stylelint \"src/**/*.scss\" --fix",
+    "scss:vars": "ts-node -e 'console.log(require(\"./utils/tailwindcssThemeHelpers.js\").getFlattenedTheme())'",
+    "binary": "sh ./scripts/buildCobaltBinary.sh",
+    "storybook:prepare": "PLAYGROUND_GENERATION=true npx tailwindcss -i ./src/utilities.css -o ./src/_generated_tailwind_playground.css && PLAYGROUND_GENERATION=false",
+    "storybook": "pnpm storybook:prepare && storybook dev -p 6006",
+    "storybook:build": "pnpm storybook:prepare && storybook build",
+    "build:icons": "./scripts/buildIcons.sh",
+    "build:illustrations": "./scripts/buildIllustrations.sh",
+    "build:theme": "node ./scripts/buildThemeCSSVariables.mts",
+    "test": "jest",
+    "typecheck": "tsc",
+    "version": "cp package.json dist/package.json"
+  },
   "keywords": [
     "drivy",
     "cobalt"
@@ -107,24 +127,5 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
     "access": "public"
-  },
-  "scripts": {
-    "build": "./scripts/build.sh",
-    "build:dev": "pnpm build && yalc publish dist/",
-    "build:publish": "pnpm build && pnpm np --contents dist",
-    "deploy": "./scripts/publishToBranch.sh",
-    "lint": "biome check && stylelint \"src/**/*.scss\"",
-    "lint:fix": "biome check --fix && stylelint \"src/**/*.scss\" --fix",
-    "scss:vars": "ts-node -e 'console.log(require(\"./utils/tailwindcssThemeHelpers.js\").getFlattenedTheme())'",
-    "binary": "sh ./scripts/buildCobaltBinary.sh",
-    "storybook:prepare": "PLAYGROUND_GENERATION=true npx tailwindcss -i ./src/utilities.css -o ./src/_generated_tailwind_playground.css && PLAYGROUND_GENERATION=false",
-    "storybook": "pnpm storybook:prepare && storybook dev -p 6006",
-    "storybook:build": "pnpm storybook:prepare && storybook build",
-    "build:icons": "./scripts/buildIcons.sh",
-    "build:illustrations": "./scripts/buildIllustrations.sh",
-    "build:theme": "node ./scripts/buildThemeCSSVariables.mts",
-    "test": "jest",
-    "typecheck": "tsc",
-    "version": "cp package.json dist/package.json"
   }
-}
+}

package/types/src/components/Popover/useDesktopPopoverCore.d.ts

@@ -9,6 +9,7 @@ export type PopoverConfig = {
     lightMode?: boolean;
     zIndex?: number;
     appendToBody?: boolean;
+    fixed?: boolean;
     withBorder?: boolean;
     fitContent?: boolean;
     trigger?: "click" | "mouseenter";
@@ -40,5 +41,5 @@ type UseDesktopPopoverCoreReturnType = {
     renderFloating: (content: React.ReactNode) => React.ReactNode;
     isMounted: boolean;
 };
-export declare function useDesktopPopoverCore({ isOpen, onOpenChange, referenceElement, placement, flip, tooltip, arrow: showArrow, theme, zIndex, appendToBody, fitContent, withBorder, trigger, interactive, delay, offset, bodySpacing, ariaLabel, onShow, onHidden, getFloatingExtraProps, }: UseDesktopPopoverCoreOptions): UseDesktopPopoverCoreReturnType;
+export declare function useDesktopPopoverCore({ isOpen, onOpenChange, referenceElement, placement, flip, tooltip, arrow: showArrow, theme, zIndex, appendToBody, fixed, fitContent, withBorder, trigger, interactive, delay, offset, bodySpacing, ariaLabel, onShow, onHidden, getFloatingExtraProps, }: UseDesktopPopoverCoreOptions): UseDesktopPopoverCoreReturnType;
 export {};