@ahrowe/ui 0.25.1 → 0.25.2

package/dist/esm/common/hooks/useSheet.mjs

@@ -1,2 +1,2 @@
-import{Presentation as e}from"../floatingMenu/floatingMenu.types.mjs";import t from"./useMediaQuery.mjs";import n from"./useCoarsePointer.mjs";import{useVisualViewportSize as r}from"./useVisualViewportSize.mjs";var i=`(max-width: 767px)`;function a(a=e.Default){let o=n(),s=t(i),{height:c,offsetTop:l}=r();return a===e.Sheet||a===e.Auto&&o&&s?{isSheet:!0,sheetStyle:{bottom:typeof window>`u`?0:Math.max(0,window.innerHeight-(l+c))}}:{isSheet:!1,sheetStyle:void 0}}export{a as default};
+import{Presentation as e}from"../floatingMenu/floatingMenu.types.mjs";import t from"./useMediaQuery.mjs";import n from"./useCoarsePointer.mjs";import{useVisualViewportSize as r}from"./useVisualViewportSize.mjs";var i=`(max-width: 767px)`,a=8;function o(o=e.Default){let s=n(),c=t(i),{height:l,offsetTop:u}=r();return o===e.Sheet||o===e.Auto&&s&&c?{isSheet:!0,sheetStyle:{bottom:typeof window>`u`?0:Math.max(0,window.innerHeight-(u+l)),"--sheet-available-height":`${Math.max(0,l-a)}px`}}:{isSheet:!1,sheetStyle:void 0}}export{o as default};
 //# sourceMappingURL=useSheet.mjs.map

package/dist/esm/common/hooks/useSheet.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useSheet.mjs","names":[],"sources":["../../../../package/common/hooks/useSheet.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport { Presentation } from '../floatingMenu/floatingMenu.types';\nimport { useCoarsePointer } from './useCoarsePointer';\nimport { useMediaQuery } from './useMediaQuery';\nimport { useVisualViewportSize } from './useVisualViewportSize';\n\n/** Below this, `Presentation.Auto` switches a touch device over to a sheet. */\nconst SMALL_SCREEN_QUERY = '(max-width: 767px)';\n\nexport interface Sheet {\n  /** Whether the popup should render as a bottom sheet instead of anchored to its trigger. */\n  isSheet: boolean;\n  /** Inline style for the sheet root, keeping it above an open on-screen keyboard. */\n  sheetStyle: CSSProperties | undefined;\n}\n\n/**\n * Resolves whether a popup presents as a bottom sheet.\n *\n * `Auto` asks for a coarse pointer *and* a small screen: pointer alone turns a touchscreen laptop\n * into a phone, and width alone turns a narrow desktop window into one.\n */\nexport function useSheet(presentation: Presentation = Presentation.Default): Sheet {\n  const isCoarsePointer = useCoarsePointer();\n  const isSmallScreen = useMediaQuery(SMALL_SCREEN_QUERY);\n  const { height: viewportHeight, offsetTop } = useVisualViewportSize();\n\n  const isSheet = presentation === Presentation.Sheet\n    || (presentation === Presentation.Auto && isCoarsePointer && isSmallScreen);\n\n  if (!isSheet) return { isSheet: false, sheetStyle: undefined };\n\n  // `position: fixed` resolves against the layout viewport, which an open keyboard doesn't\n  // shrink — so a sheet at `bottom: 0` sits behind the keyboard. Lift it by the difference.\n  const keyboardHeight = typeof window === 'undefined'\n    ? 0\n    : Math.max(0, window.innerHeight - (offsetTop + viewportHeight));\n\n  return { isSheet: true, sheetStyle: { bottom: keyboardHeight } };\n}\n\nexport default useSheet;\n"],"mappings":"mNAOA,IAAM,EAAqB,qBAe3B,SAAgB,EAAS,EAA6B,EAAa,QAAgB,CACjF,IAAM,EAAkB,EAAiB,EACnC,EAAgB,EAAc,CAAkB,EAChD,CAAE,OAAQ,EAAgB,aAAc,EAAsB,EAapE,OAXgB,IAAiB,EAAa,OACxC,IAAiB,EAAa,MAAQ,GAAmB,EAUxD,CAAE,QAAS,GAAM,WAAY,CAAE,OAJf,OAAO,OAAW,IACrC,EACA,KAAK,IAAI,EAAG,OAAO,aAAe,EAAY,EAAe,CAEJ,CAAE,EAR1C,CAAE,QAAS,GAAO,WAAY,IAAA,EAAU,CAS/D"}
+{"version":3,"file":"useSheet.mjs","names":[],"sources":["../../../../package/common/hooks/useSheet.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport { Presentation } from '../floatingMenu/floatingMenu.types';\nimport { useCoarsePointer } from './useCoarsePointer';\nimport { useMediaQuery } from './useMediaQuery';\nimport { useVisualViewportSize } from './useVisualViewportSize';\n\n/** Below this, `Presentation.Auto` switches a touch device over to a sheet. */\nconst SMALL_SCREEN_QUERY = '(max-width: 767px)';\n\n/** Sliver kept above a full-height sheet, so it still reads as a sheet rather than a full screen. */\nconst TOP_GAP = 8;\n\nexport interface Sheet {\n  /** Whether the popup should render as a bottom sheet instead of anchored to its trigger. */\n  isSheet: boolean;\n  /**\n   * Inline style for the sheet root: keeps it above an open on-screen keyboard, and hands the CSS\n   * the height actually left on screen as `--sheet-available-height`.\n   */\n  sheetStyle: CSSProperties | undefined;\n}\n\n/**\n * Resolves whether a popup presents as a bottom sheet.\n *\n * `Auto` asks for a coarse pointer *and* a small screen: pointer alone turns a touchscreen laptop\n * into a phone, and width alone turns a narrow desktop window into one.\n */\nexport function useSheet(presentation: Presentation = Presentation.Default): Sheet {\n  const isCoarsePointer = useCoarsePointer();\n  const isSmallScreen = useMediaQuery(SMALL_SCREEN_QUERY);\n  const { height: viewportHeight, offsetTop } = useVisualViewportSize();\n\n  const isSheet = presentation === Presentation.Sheet\n    || (presentation === Presentation.Auto && isCoarsePointer && isSmallScreen);\n\n  if (!isSheet) return { isSheet: false, sheetStyle: undefined };\n\n  // `position: fixed` resolves against the layout viewport, which an open keyboard doesn't\n  // shrink — so a sheet at `bottom: 0` sits behind the keyboard. Lift it by the difference.\n  const keyboardHeight = typeof window === 'undefined'\n    ? 0\n    : Math.max(0, window.innerHeight - (offsetTop + viewportHeight));\n\n  // Lifting the sheet is only half of it: it also has to *fit* in what's left. No viewport unit\n  // can express that, because `dvh` (like `vh`) measures the layout viewport, which the keyboard\n  // doesn't shrink either — so a tall sheet capped at, say, `90dvh` and lifted by the keyboard\n  // height ends up with its top edge above the screen, taking the header and the first part of\n  // the body with it, out of reach of the body's own scrolling. The visual viewport is the only\n  // thing that knows the real number, so it's measured here and handed to the CSS to clamp with.\n  const availableHeight = Math.max(0, viewportHeight - TOP_GAP);\n\n  const sheetStyle = {\n    bottom: keyboardHeight,\n    '--sheet-available-height': `${availableHeight}px`,\n  } as CSSProperties;\n\n  return { isSheet: true, sheetStyle };\n}\n\nexport default useSheet;\n"],"mappings":"mNAOA,IAAM,EAAqB,qBAGrB,EAAU,EAkBhB,SAAgB,EAAS,EAA6B,EAAa,QAAgB,CACjF,IAAM,EAAkB,EAAiB,EACnC,EAAgB,EAAc,CAAkB,EAChD,CAAE,OAAQ,EAAgB,aAAc,EAAsB,EA0BpE,OAxBgB,IAAiB,EAAa,OACxC,IAAiB,EAAa,MAAQ,GAAmB,EAuBxD,CAAE,QAAS,GAAM,WAAA,CAJtB,OAbqB,OAAO,OAAW,IACrC,EACA,KAAK,IAAI,EAAG,OAAO,aAAe,EAAY,EAAe,EAY/D,2BAA4B,GAJN,KAAK,IAAI,EAAG,EAAiB,CAIpB,EAAgB,GAGzB,CAAW,EArBd,CAAE,QAAS,GAAO,WAAY,IAAA,EAAU,CAsB/D"}

package/dist/esm/common/styles/sheet.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sheet.module.mjs","names":[],"sources":["../../../../package/common/styles/sheet.module.pcss"],"sourcesContent":["/*\n * Bottom-sheet presentation, shared by every popup that can switch away from being anchored to\n * its trigger (see `useSheet`).\n *\n * Every selector is doubled (`.sheet.sheet`) on purpose: these classes land on the same elements\n * as a component's own single-class panel styles and have to win over them. Which of two\n * equal-specificity rules wins otherwise depends on the order the bundler happens to emit the\n * two CSS modules in, which is not something a component should have to depend on.\n */\n\n.sheet.sheet {\n  position: fixed;\n  left: 0;\n  right: 0;\n  margin: 0 auto;\n  width: 100%;\n  /* Wide enough for a comfortable list on a phone, narrow enough not to span a tablet. */\n  max-width: 560px;\n  max-height: var(--sheet-max-height, 70vh);\n  max-height: var(--sheet-max-height, 70dvh);\n  display: flex;\n  flex-direction: column;\n  z-index: 1;\n  animation: sheetSlideIn 0.2s ease-out;\n}\n\n/* What a sheet looks like where it meets the screen, split out from `.sheet-panel` because a\n   component whose own root is the surface (Modal) needs the look without the fill-the-root\n   layout below it. */\n.sheet-surface.sheet-surface {\n  overscroll-behavior: contain;\n  border-radius: calc(var(--default-border-radius) + 4px) calc(var(--default-border-radius) + 4px) 0 0;\n  /* Clears the home indicator on a phone without leaving a gap on a device that has none. */\n  padding-bottom: max(var(--sheet-safe-padding, 8px), env(safe-area-inset-bottom));\n}\n\n.sheet-panel {\n  composes: sheet-surface;\n}\n\n.sheet-panel.sheet-panel {\n  position: static;\n  width: 100%;\n  box-sizing: border-box;\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  max-height: 100%;\n  /* Overrides a panel that caps its own width when anchored, e.g. Popover's 320px. */\n  max-width: 100%;\n  /* The sheet root owns the entrance animation; a panel that scales itself in when anchored\n     (Popover) would otherwise play a second, conflicting one on top of the slide-up. */\n  animation: none;\n  overflow-y: auto;\n}\n\n/* For an inner list that caps its own height when anchored: the sheet caps the height instead. */\n.sheet-scroll.sheet-scroll {\n  max-height: none;\n  flex: 1 1 auto;\n  min-height: 0;\n}\n\n.sheet-backdrop.sheet-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: #00000052;\n  z-index: 1;\n  animation: sheetBackdropFadeIn 0.2s ease-out;\n}\n\n@keyframes sheetSlideIn {\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n\n@keyframes sheetBackdropFadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"sheet.module.mjs","names":[],"sources":["../../../../package/common/styles/sheet.module.pcss"],"sourcesContent":["/*\n * Bottom-sheet presentation, shared by every popup that can switch away from being anchored to\n * its trigger (see `useSheet`).\n *\n * Every selector is doubled (`.sheet.sheet`) on purpose: these classes land on the same elements\n * as a component's own single-class panel styles and have to win over them. Which of two\n * equal-specificity rules wins otherwise depends on the order the bundler happens to emit the\n * two CSS modules in, which is not something a component should have to depend on.\n */\n\n.sheet.sheet {\n  position: fixed;\n  left: 0;\n  right: 0;\n  margin: 0 auto;\n  width: 100%;\n  /* Wide enough for a comfortable list on a phone, narrow enough not to span a tablet. */\n  max-width: 560px;\n  /* Two separate caps: how much of the screen a sheet may take at most, and how much screen\n     there actually is — the latter set inline by `useSheet` from the visual viewport, since no\n     viewport unit shrinks when the on-screen keyboard opens. */\n  max-height: min(var(--sheet-max-height, 70vh), var(--sheet-available-height, 100vh));\n  max-height: min(var(--sheet-max-height, 70dvh), var(--sheet-available-height, 100dvh));\n  display: flex;\n  flex-direction: column;\n  z-index: 1;\n  animation: sheetSlideIn 0.2s ease-out;\n}\n\n/* What a sheet looks like where it meets the screen, split out from `.sheet-panel` because a\n   component whose own root is the surface (Modal) needs the look without the fill-the-root\n   layout below it. */\n.sheet-surface.sheet-surface {\n  overscroll-behavior: contain;\n  border-radius: calc(var(--default-border-radius) + 4px) calc(var(--default-border-radius) + 4px) 0 0;\n  /* Clears the home indicator on a phone without leaving a gap on a device that has none. */\n  padding-bottom: max(var(--sheet-safe-padding, 8px), env(safe-area-inset-bottom));\n}\n\n.sheet-panel {\n  composes: sheet-surface;\n}\n\n.sheet-panel.sheet-panel {\n  position: static;\n  width: 100%;\n  box-sizing: border-box;\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  max-height: 100%;\n  /* Overrides a panel that caps its own width when anchored, e.g. Popover's 320px. */\n  max-width: 100%;\n  /* The sheet root owns the entrance animation; a panel that scales itself in when anchored\n     (Popover) would otherwise play a second, conflicting one on top of the slide-up. */\n  animation: none;\n  overflow-y: auto;\n}\n\n/* For an inner list that caps its own height when anchored: the sheet caps the height instead. */\n.sheet-scroll.sheet-scroll {\n  max-height: none;\n  flex: 1 1 auto;\n  min-height: 0;\n}\n\n.sheet-backdrop.sheet-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: #00000052;\n  z-index: 1;\n  animation: sheetBackdropFadeIn 0.2s ease-out;\n}\n\n@keyframes sheetSlideIn {\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n\n@keyframes sheetBackdropFadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n"],"mappings":""}