@k2b/ui 0.26.0 → 0.28.0

package/dist/browser/layout/BottomSheet.js

@@ -28,6 +28,14 @@ export const bottomSheetOptions = {
   contentClassName: "k2b-panel-dialog-viewport k2b-bottom-sheet-viewport",
   initialFocus: sheetInitialFocus
 };
+
+/** A sheet on phones and a centered dialog from 48rem up, for decisions and forms; menus keep
+ * `bottomSheetOptions`. The stylesheet picks the mode with the phone media query, so the first
+ * frame is already right and a rotation or resize switches it in place, without a remount. */
+export const bottomSheetAdaptiveOptions = {
+  ...bottomSheetOptions,
+  panelClassName: `${bottomSheetOptions.panelClassName} is-adaptive`
+};
 function BottomSheetRoot(props) {
   const messages = useUiMessages();
   let pointer;

package/dist/browser/layout/BottomSheet.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["layout/BottomSheet.tsx"],"sourcesContent":["import { type JSX, Show } from \"solid-js\";\nimport type { OpenDialogOptions } from \"../feedback/dialog-core\";\nimport { suppressTextSelection } from \"../internal/text-selection\";\nimport { useUiMessages } from \"../intl/messages\";\nimport PanelDialog from \"./PanelDialog\";\n\n/** Initial focus goes to the first input of the top sheet, otherwise to the\n * dialog element itself. Native `showModal()` focuses the first focusable\n * descendant, which is the drag handle; iOS shows a ring for that programmatic\n * focus, so the sheet moves it to the ring-less dialog before the next paint. */\nconst sheetInitialFocus = (dialog: HTMLDialogElement): HTMLElement => {\n  const input = dialog.lastElementChild?.querySelector<HTMLElement>(\n    \"input:not([type='hidden']):not([disabled]), textarea:not([disabled]), select:not([disabled]), [role='combobox']:not([disabled]):not([aria-disabled='true'])\",\n  );\n  if (input) return input;\n  dialog.tabIndex = -1;\n  return dialog;\n};\n\nexport const bottomSheetOptions = {\n  panelClassName: \"k2b-dialog k2b-bottom-sheet-frame\",\n  contentClassName: \"k2b-panel-dialog-viewport k2b-bottom-sheet-viewport\",\n  initialFocus: sheetInitialFocus,\n} satisfies OpenDialogOptions;\n\nexport type BottomSheetProps = {\n  children: JSX.Element;\n  /** Pass dialogCore's render context requestDismiss, never the completion callback. */\n  onDismiss: () => void | Promise<void>;\n  dismissDisabled?: boolean;\n  dismissLabel?: string;\n  handle?: boolean;\n};\n\nfunction BottomSheetRoot(props: BottomSheetProps) {\n  const messages = useUiMessages();\n  let pointer: { id: number; y: number; releaseTextSelection: () => void } | undefined;\n  let suppressClick = false;\n  const dismiss = () => {\n    if (!props.dismissDisabled) void props.onDismiss();\n  };\n  return (\n    <PanelDialog>\n      <Show when={props.handle !== false}>\n        <button\n          type=\"button\"\n          class=\"k2b-bottom-sheet__handle\"\n          aria-label={props.dismissLabel ?? messages().close}\n          disabled={props.dismissDisabled}\n          onPointerDown={(event) => {\n            if (!event.isPrimary || event.button !== 0 || props.dismissDisabled) return;\n            suppressClick = false;\n            pointer = { id: event.pointerId, y: event.clientY, releaseTextSelection: suppressTextSelection(event.pointerId) };\n            event.currentTarget.setPointerCapture(event.pointerId);\n          }}\n          onPointerUp={(event) => {\n            if (pointer?.id !== event.pointerId) return;\n            const distance = event.clientY - pointer.y;\n            pointer.releaseTextSelection();\n            pointer = undefined;\n            // A drag must not turn into a second dismiss request through click.\n            suppressClick = Math.abs(distance) > 8;\n            if (distance > 60) dismiss();\n          }}\n          onPointerCancel={() => {\n            pointer?.releaseTextSelection();\n            pointer = undefined;\n            suppressClick = true;\n          }}\n          onLostPointerCapture={() => {\n            if (pointer) {\n              pointer.releaseTextSelection();\n              pointer = undefined;\n              suppressClick = true;\n            }\n          }}\n          onClick={(event) => {\n            if (event.detail !== 0 && suppressClick) {\n              suppressClick = false;\n              return;\n            }\n            dismiss();\n          }}\n        >\n          <span aria-hidden=\"true\" />\n        </button>\n      </Show>\n      {props.children}\n    </PanelDialog>\n  );\n}\n\n/** Bottom-edge presentation; dialogCore continues to own all modal state. */\nconst BottomSheet = Object.assign(BottomSheetRoot, {\n  Header: PanelDialog.Header,\n  Body: PanelDialog.Body,\n  Footer: PanelDialog.Footer,\n  Section: PanelDialog.Section,\n  Tabs: PanelDialog.Tabs,\n});\nexport default BottomSheet;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["layout/BottomSheet.tsx"],"sourcesContent":["import { type JSX, Show } from \"solid-js\";\nimport type { OpenDialogOptions } from \"../feedback/dialog-core\";\nimport { suppressTextSelection } from \"../internal/text-selection\";\nimport { useUiMessages } from \"../intl/messages\";\nimport PanelDialog from \"./PanelDialog\";\n\n/** Initial focus goes to the first input of the top sheet, otherwise to the\n * dialog element itself. Native `showModal()` focuses the first focusable\n * descendant, which is the drag handle; iOS shows a ring for that programmatic\n * focus, so the sheet moves it to the ring-less dialog before the next paint. */\nconst sheetInitialFocus = (dialog: HTMLDialogElement): HTMLElement => {\n  const input = dialog.lastElementChild?.querySelector<HTMLElement>(\n    \"input:not([type='hidden']):not([disabled]), textarea:not([disabled]), select:not([disabled]), [role='combobox']:not([disabled]):not([aria-disabled='true'])\",\n  );\n  if (input) return input;\n  dialog.tabIndex = -1;\n  return dialog;\n};\n\nexport const bottomSheetOptions = {\n  panelClassName: \"k2b-dialog k2b-bottom-sheet-frame\",\n  contentClassName: \"k2b-panel-dialog-viewport k2b-bottom-sheet-viewport\",\n  initialFocus: sheetInitialFocus,\n} satisfies OpenDialogOptions;\n\n/** A sheet on phones and a centered dialog from 48rem up, for decisions and forms; menus keep\n * `bottomSheetOptions`. The stylesheet picks the mode with the phone media query, so the first\n * frame is already right and a rotation or resize switches it in place, without a remount. */\nexport const bottomSheetAdaptiveOptions = {\n  ...bottomSheetOptions,\n  panelClassName: `${bottomSheetOptions.panelClassName} is-adaptive`,\n} satisfies OpenDialogOptions;\n\nexport type BottomSheetProps = {\n  children: JSX.Element;\n  /** Pass dialogCore's render context requestDismiss, never the completion callback. */\n  onDismiss: () => void | Promise<void>;\n  dismissDisabled?: boolean;\n  dismissLabel?: string;\n  handle?: boolean;\n};\n\nfunction BottomSheetRoot(props: BottomSheetProps) {\n  const messages = useUiMessages();\n  let pointer: { id: number; y: number; releaseTextSelection: () => void } | undefined;\n  let suppressClick = false;\n  const dismiss = () => {\n    if (!props.dismissDisabled) void props.onDismiss();\n  };\n  return (\n    <PanelDialog>\n      <Show when={props.handle !== false}>\n        <button\n          type=\"button\"\n          class=\"k2b-bottom-sheet__handle\"\n          aria-label={props.dismissLabel ?? messages().close}\n          disabled={props.dismissDisabled}\n          onPointerDown={(event) => {\n            if (!event.isPrimary || event.button !== 0 || props.dismissDisabled) return;\n            suppressClick = false;\n            pointer = { id: event.pointerId, y: event.clientY, releaseTextSelection: suppressTextSelection(event.pointerId) };\n            event.currentTarget.setPointerCapture(event.pointerId);\n          }}\n          onPointerUp={(event) => {\n            if (pointer?.id !== event.pointerId) return;\n            const distance = event.clientY - pointer.y;\n            pointer.releaseTextSelection();\n            pointer = undefined;\n            // A drag must not turn into a second dismiss request through click.\n            suppressClick = Math.abs(distance) > 8;\n            if (distance > 60) dismiss();\n          }}\n          onPointerCancel={() => {\n            pointer?.releaseTextSelection();\n            pointer = undefined;\n            suppressClick = true;\n          }}\n          onLostPointerCapture={() => {\n            if (pointer) {\n              pointer.releaseTextSelection();\n              pointer = undefined;\n              suppressClick = true;\n            }\n          }}\n          onClick={(event) => {\n            if (event.detail !== 0 && suppressClick) {\n              suppressClick = false;\n              return;\n            }\n            dismiss();\n          }}\n        >\n          <span aria-hidden=\"true\" />\n        </button>\n      </Show>\n      {props.children}\n    </PanelDialog>\n  );\n}\n\n/** Bottom-edge presentation; dialogCore continues to own all modal state. */\nconst BottomSheet = Object.assign(BottomSheetRoot, {\n  Header: PanelDialog.Header,\n  Body: PanelDialog.Body,\n  Footer: PanelDialog.Footer,\n  Section: PanelDialog.Section,\n  Tabs: PanelDialog.Tabs,\n});\nexport default BottomSheet;\n"],"mappings":";;;;;;;;;;AAAA,SAAmB,IAAI,QAAQ,UAAU;AAEzC,SAAS,qBAAqB,QAAQ,4BAA4B;AAClE,SAAS,aAAa,QAAQ,kBAAkB;AAChD,OAAO,WAAW,MAAM,eAAe;;AAEvC;AACA;AACA;AACA;AACA,MAAM,iBAAiB,GAAI,MAAyB,IAAkB;EACpE,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,EAAE,aAAa,CAClD,6JACF,CAAC;EACD,IAAI,KAAK,EAAE,OAAO,KAAK;EACvB,MAAM,CAAC,QAAQ,GAAG,CAAC,CAAC;EACpB,OAAO,MAAM;AACf,CAAC;AAED,OAAO,MAAM,kBAAkB,GAAG;EAChC,cAAc,EAAE,mCAAmC;EACnD,gBAAgB,EAAE,qDAAqD;EACvE,YAAY,EAAE;AAChB,CAA6B;;AAE7B;AACA;AACA;AACA,OAAO,MAAM,0BAA0B,GAAG;EACxC,GAAG,kBAAkB;EACrB,cAAc,EAAE,GAAG,kBAAkB,CAAC,cAAc;AACtD,CAA6B;AAW7B,SAAS,eAAe,CAAC,KAAuB,EAAE;EAChD,MAAM,QAAQ,GAAG,aAAa,CAAC,CAAC;EAChC,IAAI,OAAgF;EACpF,IAAI,aAAa,GAAG,KAAK;EACzB,MAAM,OAAO,GAAG,MAAM;IACpB,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;EACpD,CAAC;EACD,yBACG,WAAW;IAAA;MAAA,0BACT,IAAI;QAAA,IAAC,IAAI;UAAA,OAAE,KAAK,CAAC,MAAM,KAAK,KAAK;QAAA;QAAA;UAAA;UAAA,eAiCpB,KAAK,IAAK;YAClB,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,aAAa,EAAE;cACvC,aAAa,GAAG,KAAK;cACrB;YACF;YACA,OAAO,CAAC,CAAC;UACX,CAAC;UAAA,4CAbqB,MAAM;YAC1B,IAAI,OAAO,EAAE;cACX,OAAO,CAAC,oBAAoB,CAAC,CAAC;cAC9B,OAAO,GAAG,SAAS;cACnB,aAAa,GAAG,IAAI;YACtB;UACF,CAAC;UAAA,uCAXgB,MAAM;YACrB,OAAO,EAAE,oBAAoB,CAAC,CAAC;YAC/B,OAAO,GAAG,SAAS;YACnB,aAAa,GAAG,IAAI;UACtB,CAAC;UAAA,mBAba,KAAK,IAAK;YACtB,IAAI,OAAO,EAAE,EAAE,KAAK,KAAK,CAAC,SAAS,EAAE;YACrC,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC,CAAC;YAC1C,OAAO,CAAC,oBAAoB,CAAC,CAAC;YAC9B,OAAO,GAAG,SAAS;YACnB;YACA,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC;YACtC,IAAI,QAAQ,GAAG,EAAE,EAAE,OAAO,CAAC,CAAC;UAC9B,CAAC;UAAA,qBAde,KAAK,IAAK;YACxB,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,KAAK,CAAC,eAAe,EAAE;YACrE,aAAa,GAAG,KAAK;YACrB,OAAO,GAAG;cAAE,EAAE,EAAE,KAAK,CAAC,SAAS;cAAE,CAAC,EAAE,KAAK,CAAC,OAAO;cAAE,oBAAoB,EAAE,qBAAqB,CAAC,KAAK,CAAC,SAAS;YAAE,CAAC;YACjH,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC;UACxD,CAAC;UAAA;YAAA,UAPW,KAAK,CAAC,YAAY,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAK;cAAA,OACxC,KAAK,CAAC,eAAe;YAAA;YAAA;YAAA;UAAA;YAAA;YAAA;UAAA;UAAA;UAAA;QAAA;MAAA,iBAuClC,KAAK,CAAC,QAAQ;IAAA;EAAA;AAGrB;;AAEA;AACA,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE;EACjD,MAAM,EAAE,WAAW,CAAC,MAAM;EAC1B,IAAI,EAAE,WAAW,CAAC,IAAI;EACtB,MAAM,EAAE,WAAW,CAAC,MAAM;EAC1B,OAAO,EAAE,WAAW,CAAC,OAAO;EAC5B,IAAI,EAAE,WAAW,CAAC;AACpB,CAAC,CAAC;AACF,eAAe,WAAW;AAAC","ignoreList":[]}