@k2b/ui 0.4.1 → 0.4.2

package/dist/browser/layout/BottomSheet.js

@@ -11,9 +11,14 @@ var _tmpl$ = /*#__PURE__*/_$template(`<button type=button class=k2b-bottom-sheet
 import { Show } from "solid-js";
 import { useUiMessages } from "../intl/messages";
 import PanelDialog from "./PanelDialog";
+
+/** Initial focus goes to the first input of the top sheet; the drag handle never
+ * takes it, so a sheet that opens without a user gesture shows no focus ring. */
+const sheetInitialFocus = dialog => dialog.lastElementChild?.querySelector("input:not([type='hidden']):not([disabled]), textarea:not([disabled]), select:not([disabled]), [role='combobox']:not([disabled]):not([aria-disabled='true'])") ?? null;
 export const bottomSheetOptions = {
   panelClassName: "k2b-dialog k2b-bottom-sheet-frame",
-  contentClassName: "k2b-panel-dialog-viewport k2b-bottom-sheet-viewport"
+  contentClassName: "k2b-panel-dialog-viewport k2b-bottom-sheet-viewport",
+  initialFocus: sheetInitialFocus
 };
 function BottomSheetRoot(props) {
   const messages = useUiMessages();

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

@@ -1 +1 @@
-{"version":3,"names":["Show","useUiMessages","PanelDialog","bottomSheetOptions","panelClassName","contentClassName","BottomSheetRoot","props","messages","pointer","suppressClick","dismiss","dismissDisabled","onDismiss","_$createComponent","children","when","handle","_el$","_$getNextElement","_tmpl$","$$click","event","detail","addEventListener","undefined","$$pointerup","id","pointerId","distance","clientY","y","Math","abs","$$pointerdown","isPrimary","button","currentTarget","setPointerCapture","_$effect","_p$","_v$","dismissLabel","close","_v$2","e","_$setAttribute","t","_$setProperty","_$runHydrationEvents","_$memo","BottomSheet","Object","assign","Header","Body","Footer","Section","Tabs","_$delegateEvents"],"sources":["layout/BottomSheet.tsx"],"sourcesContent":["import { type JSX, Show } from \"solid-js\";\nimport type { OpenDialogOptions } from \"../feedback/dialog-core\";\nimport { useUiMessages } from \"../intl/messages\";\nimport PanelDialog from \"./PanelDialog\";\n\nexport const bottomSheetOptions = {\n  panelClassName: \"k2b-dialog k2b-bottom-sheet-frame\",\n  contentClassName: \"k2b-panel-dialog-viewport k2b-bottom-sheet-viewport\",\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 } | 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 };\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 = 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 = undefined;\n            suppressClick = true;\n          }}\n          onLostPointerCapture={() => {\n            if (pointer) {\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":["Show","useUiMessages","PanelDialog","sheetInitialFocus","dialog","lastElementChild","querySelector","bottomSheetOptions","panelClassName","contentClassName","initialFocus","BottomSheetRoot","props","messages","pointer","suppressClick","dismiss","dismissDisabled","onDismiss","_$createComponent","children","when","handle","_el$","_$getNextElement","_tmpl$","$$click","event","detail","addEventListener","undefined","$$pointerup","id","pointerId","distance","clientY","y","Math","abs","$$pointerdown","isPrimary","button","currentTarget","setPointerCapture","_$effect","_p$","_v$","dismissLabel","close","_v$2","e","_$setAttribute","t","_$setProperty","_$runHydrationEvents","_$memo","BottomSheet","Object","assign","Header","Body","Footer","Section","Tabs","_$delegateEvents"],"sources":["layout/BottomSheet.tsx"],"sourcesContent":["import { type JSX, Show } from \"solid-js\";\nimport type { OpenDialogOptions } from \"../feedback/dialog-core\";\nimport { useUiMessages } from \"../intl/messages\";\nimport PanelDialog from \"./PanelDialog\";\n\n/** Initial focus goes to the first input of the top sheet; the drag handle never\n * takes it, so a sheet that opens without a user gesture shows no focus ring. */\nconst sheetInitialFocus = (dialog: HTMLDialogElement): HTMLElement | null =>\n  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  ) ?? null;\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 } | 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 };\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 = 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 = undefined;\n            suppressClick = true;\n          }}\n          onLostPointerCapture={() => {\n            if (pointer) {\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":[]}

package/dist/ssr/layout/BottomSheet.js

@@ -6,9 +6,14 @@ var _tmpl$ = ["<button type=\"button\" class=\"k2b-bottom-sheet__handle\"", "",
 import { Show } from "solid-js";
 import { useUiMessages } from "../intl/messages";
 import PanelDialog from "./PanelDialog";
+
+/** Initial focus goes to the first input of the top sheet; the drag handle never
+ * takes it, so a sheet that opens without a user gesture shows no focus ring. */
+const sheetInitialFocus = dialog => dialog.lastElementChild?.querySelector("input:not([type='hidden']):not([disabled]), textarea:not([disabled]), select:not([disabled]), [role='combobox']:not([disabled]):not([aria-disabled='true'])") ?? null;
 export const bottomSheetOptions = {
   panelClassName: "k2b-dialog k2b-bottom-sheet-frame",
-  contentClassName: "k2b-panel-dialog-viewport k2b-bottom-sheet-viewport"
+  contentClassName: "k2b-panel-dialog-viewport k2b-bottom-sheet-viewport",
+  initialFocus: sheetInitialFocus
 };
 function BottomSheetRoot(props) {
   const messages = useUiMessages();

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

@@ -1 +1 @@
-{"version":3,"names":["Show","useUiMessages","PanelDialog","bottomSheetOptions","panelClassName","contentClassName","BottomSheetRoot","props","messages","pointer","suppressClick","dismiss","dismissDisabled","onDismiss","_$createComponent","children","when","handle","_$ssr","_tmpl$","_$ssrAttribute","_$escape","dismissLabel","close","BottomSheet","Object","assign","Header","Body","Footer","Section","Tabs"],"sources":["layout/BottomSheet.tsx"],"sourcesContent":["import { type JSX, Show } from \"solid-js\";\nimport type { OpenDialogOptions } from \"../feedback/dialog-core\";\nimport { useUiMessages } from \"../intl/messages\";\nimport PanelDialog from \"./PanelDialog\";\n\nexport const bottomSheetOptions = {\n  panelClassName: \"k2b-dialog k2b-bottom-sheet-frame\",\n  contentClassName: \"k2b-panel-dialog-viewport k2b-bottom-sheet-viewport\",\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 } | 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 };\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 = 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 = undefined;\n            suppressClick = true;\n          }}\n          onLostPointerCapture={() => {\n            if (pointer) {\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,SAAmBA,IAAI,QAAQ,UAAU;AAEzC,SAASC,aAAa,QAAQ,kBAAkB;AAChD,OAAOC,WAAW,MAAM,eAAe;AAEvC,OAAO,MAAMC,kBAAkB,GAAG;EAChCC,cAAc,EAAE,mCAAmC;EACnDC,gBAAgB,EAAE;AACpB,CAA6B;AAW7B,SAASC,eAAeA,CAACC,KAAuB,EAAE;EAChD,MAAMC,QAAQ,GAAGP,aAAa,CAAC,CAAC;EAChC,IAAIQ,OAA8C;EAClD,IAAIC,aAAa,GAAG,KAAK;EACzB,MAAMC,OAAO,GAAGA,CAAA,KAAM;IACpB,IAAI,CAACJ,KAAK,CAACK,eAAe,EAAE,KAAKL,KAAK,CAACM,SAAS,CAAC,CAAC;EACpD,CAAC;EACD,OAAAC,iBAAA,CACGZ,WAAW;IAAA,IAAAa,SAAA;MAAA,QAAAD,iBAAA,CACTd,IAAI;QAAA,IAACgB,IAAIA,CAAA;UAAA,OAAET,KAAK,CAACU,MAAM,KAAK,KAAK;QAAA;QAAA,IAAAF,SAAA;UAAA,OAAAG,KAAA,CAAAC,MAAA,EAAAC,cAAA,eAAAC,QAAA,CAIlBd,KAAK,CAACe,YAAY,IAAId,QAAQ,CAAC,CAAC,CAACe,KAAK,iBAAAH,cAAA,aACxCb,KAAK,CAACK,eAAe;QAAA;MAAA,IAoClCL,KAAK,CAACQ,QAAQ;IAAA;EAAA;AAGrB;;AAEA;AACA,MAAMS,WAAW,GAAGC,MAAM,CAACC,MAAM,CAACpB,eAAe,EAAE;EACjDqB,MAAM,EAAEzB,WAAW,CAACyB,MAAM;EAC1BC,IAAI,EAAE1B,WAAW,CAAC0B,IAAI;EACtBC,MAAM,EAAE3B,WAAW,CAAC2B,MAAM;EAC1BC,OAAO,EAAE5B,WAAW,CAAC4B,OAAO;EAC5BC,IAAI,EAAE7B,WAAW,CAAC6B;AACpB,CAAC,CAAC;AACF,eAAeP,WAAW","ignoreList":[]}
+{"version":3,"names":["Show","useUiMessages","PanelDialog","sheetInitialFocus","dialog","lastElementChild","querySelector","bottomSheetOptions","panelClassName","contentClassName","initialFocus","BottomSheetRoot","props","messages","pointer","suppressClick","dismiss","dismissDisabled","onDismiss","_$createComponent","children","when","handle","_$ssr","_tmpl$","_$ssrAttribute","_$escape","dismissLabel","close","BottomSheet","Object","assign","Header","Body","Footer","Section","Tabs"],"sources":["layout/BottomSheet.tsx"],"sourcesContent":["import { type JSX, Show } from \"solid-js\";\nimport type { OpenDialogOptions } from \"../feedback/dialog-core\";\nimport { useUiMessages } from \"../intl/messages\";\nimport PanelDialog from \"./PanelDialog\";\n\n/** Initial focus goes to the first input of the top sheet; the drag handle never\n * takes it, so a sheet that opens without a user gesture shows no focus ring. */\nconst sheetInitialFocus = (dialog: HTMLDialogElement): HTMLElement | null =>\n  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  ) ?? null;\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 } | 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 };\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 = 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 = undefined;\n            suppressClick = true;\n          }}\n          onLostPointerCapture={() => {\n            if (pointer) {\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,SAAmBA,IAAI,QAAQ,UAAU;AAEzC,SAASC,aAAa,QAAQ,kBAAkB;AAChD,OAAOC,WAAW,MAAM,eAAe;;AAEvC;AACA;AACA,MAAMC,iBAAiB,GAAIC,MAAyB,IAClDA,MAAM,CAACC,gBAAgB,EAAEC,aAAa,CACpC,6JACF,CAAC,IAAI,IAAI;AAEX,OAAO,MAAMC,kBAAkB,GAAG;EAChCC,cAAc,EAAE,mCAAmC;EACnDC,gBAAgB,EAAE,qDAAqD;EACvEC,YAAY,EAAEP;AAChB,CAA6B;AAW7B,SAASQ,eAAeA,CAACC,KAAuB,EAAE;EAChD,MAAMC,QAAQ,GAAGZ,aAAa,CAAC,CAAC;EAChC,IAAIa,OAA8C;EAClD,IAAIC,aAAa,GAAG,KAAK;EACzB,MAAMC,OAAO,GAAGA,CAAA,KAAM;IACpB,IAAI,CAACJ,KAAK,CAACK,eAAe,EAAE,KAAKL,KAAK,CAACM,SAAS,CAAC,CAAC;EACpD,CAAC;EACD,OAAAC,iBAAA,CACGjB,WAAW;IAAA,IAAAkB,SAAA;MAAA,QAAAD,iBAAA,CACTnB,IAAI;QAAA,IAACqB,IAAIA,CAAA;UAAA,OAAET,KAAK,CAACU,MAAM,KAAK,KAAK;QAAA;QAAA,IAAAF,SAAA;UAAA,OAAAG,KAAA,CAAAC,MAAA,EAAAC,cAAA,eAAAC,QAAA,CAIlBd,KAAK,CAACe,YAAY,IAAId,QAAQ,CAAC,CAAC,CAACe,KAAK,iBAAAH,cAAA,aACxCb,KAAK,CAACK,eAAe;QAAA;MAAA,IAoClCL,KAAK,CAACQ,QAAQ;IAAA;EAAA;AAGrB;;AAEA;AACA,MAAMS,WAAW,GAAGC,MAAM,CAACC,MAAM,CAACpB,eAAe,EAAE;EACjDqB,MAAM,EAAE9B,WAAW,CAAC8B,MAAM;EAC1BC,IAAI,EAAE/B,WAAW,CAAC+B,IAAI;EACtBC,MAAM,EAAEhC,WAAW,CAACgC,MAAM;EAC1BC,OAAO,EAAEjC,WAAW,CAACiC,OAAO;EAC5BC,IAAI,EAAElC,WAAW,CAACkC;AACpB,CAAC,CAAC;AACF,eAAeP,WAAW","ignoreList":[]}