@invopop/popui 0.1.75 → 0.1.76

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -34,6 +34,7 @@
34
34
  </script>
35
35
 
36
36
  <DrawerContext
37
+ autofocus
37
38
  {items}
38
39
  onclick={(e) => {
39
40
  if (e === 'hide') {
@@ -41,6 +41,7 @@
41
41
  widthClass = 'w-60',
42
42
  collapsibleGroups = true,
43
43
  flagPosition = 'after',
44
+ autofocus = false,
44
45
  onclick,
45
46
  onselect,
46
47
  onreorder,
@@ -89,6 +90,7 @@
89
90
  let groupDndItems = $state<Record<string, DndItem[]>>({})
90
91
  let ungroupedDndItems = $state<DndItem[]>([])
91
92
  let mounted = $state(false)
93
+ let commandRootEl = $state<HTMLElement | null>(null)
92
94
  let itemsCache = $state<DrawerOption[]>([])
93
95
  let isDragging = $state(false)
94
96
  let draggedItemId = $state<string | null>(null)
@@ -178,6 +180,12 @@
178
180
  buildListIn()
179
181
  mounted = true
180
182
 
183
+ if (autofocus) {
184
+ setTimeout(() => {
185
+ commandRootEl?.focus()
186
+ }, 10)
187
+ }
188
+
181
189
  const autoScrollCleanup = autoScrollForElements({
182
190
  element: document.documentElement
183
191
  })
@@ -452,6 +460,7 @@
452
460
  shouldFilter={false}
453
461
  loop
454
462
  class={containerClasses}
463
+ bind:ref={commandRootEl}
455
464
  {...rest}
456
465
  >
457
466
  {@render children?.()}
@@ -193,6 +193,7 @@
193
193
  <DrawerContext
194
194
  data-dropdown-select-content
195
195
  widthClass="min-w-[256px]"
196
+ autofocus
196
197
  {multiple}
197
198
  {items}
198
199
  {flagPosition}
@@ -99,8 +99,13 @@ export function handleScrollEvent(event, lastScrollLeft, columnDropdowns) {
99
99
  }
100
100
  // Keyboard navigation helpers
101
101
  export function shouldIgnoreKeyEvent(event) {
102
- const targetTag = event.target.tagName;
103
- return targetTag === 'INPUT' || targetTag === 'TEXTAREA';
102
+ const target = event.target;
103
+ const targetTag = target.tagName;
104
+ if (targetTag === 'INPUT' || targetTag === 'TEXTAREA')
105
+ return true;
106
+ if (target.closest('[data-command-root]'))
107
+ return true;
108
+ return false;
104
109
  }
105
110
  export function handleArrowDown(currentIndex, rows, shiftKey, enableSelection, onScroll) {
106
111
  if (currentIndex === -1 && rows.length > 0) {
package/dist/types.d.ts CHANGED
@@ -345,6 +345,7 @@ export interface DrawerContextProps {
345
345
  widthClass?: string;
346
346
  collapsibleGroups?: boolean;
347
347
  flagPosition?: 'before' | 'after';
348
+ autofocus?: boolean;
348
349
  onclick?: (value: AnyProp) => void;
349
350
  onselect?: (selected: DrawerOption[]) => void;
350
351
  onreorder?: (items: DrawerOption[]) => void;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@invopop/popui",
3
3
  "license": "MIT",
4
- "version": "0.1.75",
4
+ "version": "0.1.76",
5
5
  "repository": {
6
6
  "url": "https://github.com/invopop/popui"
7
7
  },