@mantine/spotlight 9.1.0 → 9.1.1
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.
package/cjs/spotlight.store.cjs
CHANGED
|
@@ -79,7 +79,8 @@ function selectPreviousAction(store) {
|
|
|
79
79
|
return selectAction(store.getState().selected - 1, store);
|
|
80
80
|
}
|
|
81
81
|
function triggerSelectedAction(store) {
|
|
82
|
-
|
|
82
|
+
const state = store.getState();
|
|
83
|
+
(state.listId ? findElementByQuerySelector(`#${state.listId} [data-selected]`) : null)?.click();
|
|
83
84
|
}
|
|
84
85
|
function registerAction(id, store) {
|
|
85
86
|
const state = store.getState();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spotlight.store.cjs","names":[],"sources":["../src/spotlight.store.ts"],"sourcesContent":["import { clamp } from '@mantine/hooks';\nimport { createStore, MantineStore, useStore } from '@mantine/store';\n\nexport interface SpotlightState {\n opened: boolean;\n selected: number;\n listId: string;\n query: string;\n empty: boolean;\n registeredActions: Set<string>;\n}\n\nexport type SpotlightStore = MantineStore<SpotlightState>;\n\nexport const createSpotlightStore = () =>\n createStore<SpotlightState>({\n opened: false,\n empty: false,\n selected: -1,\n listId: '',\n query: '',\n registeredActions: new Set(),\n });\n\nexport const useSpotlight = (store: SpotlightStore) => useStore(store);\n\nexport function updateSpotlightStateAction(\n update: (state: SpotlightState) => Partial<SpotlightState>,\n store: SpotlightStore\n) {\n const state = store.getState();\n store.setState({ ...state, ...update(store.getState()) });\n}\n\nexport function openSpotlightAction(store: SpotlightStore) {\n updateSpotlightStateAction(() => ({ opened: true, selected: -1 }), store);\n}\n\nexport function closeSpotlightAction(store: SpotlightStore) {\n updateSpotlightStateAction(() => ({ opened: false }), store);\n}\n\nexport function toggleSpotlightAction(store: SpotlightStore) {\n updateSpotlightStateAction(\n (state) => ({ opened: !state.opened, selected: state.opened ? state.selected : -1 }),\n store\n );\n}\n\nexport function setSelectedAction(index: number, store: SpotlightStore) {\n store.updateState((state) => ({ ...state, selected: index }));\n}\n\nexport function setListId(id: string, store: SpotlightStore) {\n store.updateState((state) => ({ ...state, listId: id }));\n}\n\nfunction findElementByQuerySelector<T extends HTMLElement>(\n selector: string,\n root: Document | Element | ShadowRoot = document\n): T | null {\n // Directly try to find the element in the current root.\n const element = root.querySelector<T>(selector);\n if (element) {\n return element;\n }\n\n // Iterate through all children of the current root.\n const children = root instanceof ShadowRoot ? root.host.children : root.children;\n for (let i = 0; i < children.length; i += 1) {\n const child = children[i];\n\n // Recursively search in the child's shadow root if it exists.\n if (child.shadowRoot) {\n const shadowElement = findElementByQuerySelector<T>(selector, child.shadowRoot);\n if (shadowElement) {\n return shadowElement;\n }\n }\n\n // Also, search recursively in the child itself if it does not have a shadow root or the element wasn't found in its shadow root.\n const nestedElement = findElementByQuerySelector<T>(selector, child);\n if (nestedElement) {\n return nestedElement;\n }\n }\n\n // Return null if the element isn't found in the current root or any of its shadow DOMs.\n return null;\n}\n\nexport function selectAction(index: number, store: SpotlightStore): number {\n const state = store.getState();\n const actionsList = state.listId ? findElementByQuerySelector(`#${state.listId}`) : null;\n const selected = actionsList?.querySelector<HTMLButtonElement>('[data-selected]');\n const actions = actionsList?.querySelectorAll<HTMLButtonElement>('[data-action]') ?? [];\n const nextIndex = index === -1 ? actions.length - 1 : index === actions.length ? 0 : index;\n\n const selectedIndex = clamp(nextIndex, 0, actions.length - 1);\n selected?.removeAttribute('data-selected');\n actions[selectedIndex]?.scrollIntoView({ block: 'nearest' });\n actions[selectedIndex]?.setAttribute('data-selected', 'true');\n setSelectedAction(selectedIndex, store);\n\n return selectedIndex;\n}\n\nexport function selectNextAction(store: SpotlightStore) {\n return selectAction(store.getState().selected + 1, store);\n}\n\nexport function selectPreviousAction(store: SpotlightStore) {\n return selectAction(store.getState().selected - 1, store);\n}\n\nexport function triggerSelectedAction(store: SpotlightStore) {\n const state = store.getState();\n const selected = findElementByQuerySelector<HTMLButtonElement>(
|
|
1
|
+
{"version":3,"file":"spotlight.store.cjs","names":[],"sources":["../src/spotlight.store.ts"],"sourcesContent":["import { clamp } from '@mantine/hooks';\nimport { createStore, MantineStore, useStore } from '@mantine/store';\n\nexport interface SpotlightState {\n opened: boolean;\n selected: number;\n listId: string;\n query: string;\n empty: boolean;\n registeredActions: Set<string>;\n}\n\nexport type SpotlightStore = MantineStore<SpotlightState>;\n\nexport const createSpotlightStore = () =>\n createStore<SpotlightState>({\n opened: false,\n empty: false,\n selected: -1,\n listId: '',\n query: '',\n registeredActions: new Set(),\n });\n\nexport const useSpotlight = (store: SpotlightStore) => useStore(store);\n\nexport function updateSpotlightStateAction(\n update: (state: SpotlightState) => Partial<SpotlightState>,\n store: SpotlightStore\n) {\n const state = store.getState();\n store.setState({ ...state, ...update(store.getState()) });\n}\n\nexport function openSpotlightAction(store: SpotlightStore) {\n updateSpotlightStateAction(() => ({ opened: true, selected: -1 }), store);\n}\n\nexport function closeSpotlightAction(store: SpotlightStore) {\n updateSpotlightStateAction(() => ({ opened: false }), store);\n}\n\nexport function toggleSpotlightAction(store: SpotlightStore) {\n updateSpotlightStateAction(\n (state) => ({ opened: !state.opened, selected: state.opened ? state.selected : -1 }),\n store\n );\n}\n\nexport function setSelectedAction(index: number, store: SpotlightStore) {\n store.updateState((state) => ({ ...state, selected: index }));\n}\n\nexport function setListId(id: string, store: SpotlightStore) {\n store.updateState((state) => ({ ...state, listId: id }));\n}\n\nfunction findElementByQuerySelector<T extends HTMLElement>(\n selector: string,\n root: Document | Element | ShadowRoot = document\n): T | null {\n // Directly try to find the element in the current root.\n const element = root.querySelector<T>(selector);\n if (element) {\n return element;\n }\n\n // Iterate through all children of the current root.\n const children = root instanceof ShadowRoot ? root.host.children : root.children;\n for (let i = 0; i < children.length; i += 1) {\n const child = children[i];\n\n // Recursively search in the child's shadow root if it exists.\n if (child.shadowRoot) {\n const shadowElement = findElementByQuerySelector<T>(selector, child.shadowRoot);\n if (shadowElement) {\n return shadowElement;\n }\n }\n\n // Also, search recursively in the child itself if it does not have a shadow root or the element wasn't found in its shadow root.\n const nestedElement = findElementByQuerySelector<T>(selector, child);\n if (nestedElement) {\n return nestedElement;\n }\n }\n\n // Return null if the element isn't found in the current root or any of its shadow DOMs.\n return null;\n}\n\nexport function selectAction(index: number, store: SpotlightStore): number {\n const state = store.getState();\n const actionsList = state.listId ? findElementByQuerySelector(`#${state.listId}`) : null;\n const selected = actionsList?.querySelector<HTMLButtonElement>('[data-selected]');\n const actions = actionsList?.querySelectorAll<HTMLButtonElement>('[data-action]') ?? [];\n const nextIndex = index === -1 ? actions.length - 1 : index === actions.length ? 0 : index;\n\n const selectedIndex = clamp(nextIndex, 0, actions.length - 1);\n selected?.removeAttribute('data-selected');\n actions[selectedIndex]?.scrollIntoView({ block: 'nearest' });\n actions[selectedIndex]?.setAttribute('data-selected', 'true');\n setSelectedAction(selectedIndex, store);\n\n return selectedIndex;\n}\n\nexport function selectNextAction(store: SpotlightStore) {\n return selectAction(store.getState().selected + 1, store);\n}\n\nexport function selectPreviousAction(store: SpotlightStore) {\n return selectAction(store.getState().selected - 1, store);\n}\n\nexport function triggerSelectedAction(store: SpotlightStore) {\n const state = store.getState();\n const selected = state.listId\n ? findElementByQuerySelector<HTMLButtonElement>(`#${state.listId} [data-selected]`)\n : null;\n selected?.click();\n}\n\nexport function registerAction(id: string, store: SpotlightStore) {\n const state = store.getState();\n state.registeredActions.add(id);\n return () => {\n state.registeredActions.delete(id);\n };\n}\n\nexport function setQuery(query: string, store: SpotlightStore) {\n updateSpotlightStateAction(() => ({ query }), store);\n Promise.resolve().then(() => {\n selectAction(0, store);\n updateSpotlightStateAction(\n (state) => ({\n empty: (state.query.trim().length > 0 && state.registeredActions.size === 0) || false,\n }),\n store\n );\n });\n}\n\nexport function clearSpotlightState(\n { clearQuery }: { clearQuery: boolean | undefined },\n store: SpotlightStore\n) {\n store.updateState((state) => ({\n ...state,\n selected: -1,\n query: clearQuery ? '' : state.query,\n empty: clearQuery ? false : state.empty,\n }));\n}\n\nexport const spotlightActions = {\n open: openSpotlightAction,\n close: closeSpotlightAction,\n toggle: toggleSpotlightAction,\n updateState: updateSpotlightStateAction,\n setSelectedAction,\n setListId,\n selectAction,\n selectNextAction,\n selectPreviousAction,\n triggerSelectedAction,\n registerAction,\n setQuery,\n clearSpotlightState,\n};\n\nexport function createSpotlight() {\n const store = createSpotlightStore();\n const actions = {\n open: () => openSpotlightAction(store),\n close: () => closeSpotlightAction(store),\n toggle: () => toggleSpotlightAction(store),\n };\n\n return [store, actions] as const;\n}\n\nexport const [spotlightStore, spotlight] = createSpotlight();\nexport const { open: openSpotlight, close: closeSpotlight, toggle: toggleSpotlight } = spotlight;\n"],"mappings":"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"}
|
package/esm/spotlight.store.mjs
CHANGED
|
@@ -79,7 +79,8 @@ function selectPreviousAction(store) {
|
|
|
79
79
|
return selectAction(store.getState().selected - 1, store);
|
|
80
80
|
}
|
|
81
81
|
function triggerSelectedAction(store) {
|
|
82
|
-
|
|
82
|
+
const state = store.getState();
|
|
83
|
+
(state.listId ? findElementByQuerySelector(`#${state.listId} [data-selected]`) : null)?.click();
|
|
83
84
|
}
|
|
84
85
|
function registerAction(id, store) {
|
|
85
86
|
const state = store.getState();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spotlight.store.mjs","names":[],"sources":["../src/spotlight.store.ts"],"sourcesContent":["import { clamp } from '@mantine/hooks';\nimport { createStore, MantineStore, useStore } from '@mantine/store';\n\nexport interface SpotlightState {\n opened: boolean;\n selected: number;\n listId: string;\n query: string;\n empty: boolean;\n registeredActions: Set<string>;\n}\n\nexport type SpotlightStore = MantineStore<SpotlightState>;\n\nexport const createSpotlightStore = () =>\n createStore<SpotlightState>({\n opened: false,\n empty: false,\n selected: -1,\n listId: '',\n query: '',\n registeredActions: new Set(),\n });\n\nexport const useSpotlight = (store: SpotlightStore) => useStore(store);\n\nexport function updateSpotlightStateAction(\n update: (state: SpotlightState) => Partial<SpotlightState>,\n store: SpotlightStore\n) {\n const state = store.getState();\n store.setState({ ...state, ...update(store.getState()) });\n}\n\nexport function openSpotlightAction(store: SpotlightStore) {\n updateSpotlightStateAction(() => ({ opened: true, selected: -1 }), store);\n}\n\nexport function closeSpotlightAction(store: SpotlightStore) {\n updateSpotlightStateAction(() => ({ opened: false }), store);\n}\n\nexport function toggleSpotlightAction(store: SpotlightStore) {\n updateSpotlightStateAction(\n (state) => ({ opened: !state.opened, selected: state.opened ? state.selected : -1 }),\n store\n );\n}\n\nexport function setSelectedAction(index: number, store: SpotlightStore) {\n store.updateState((state) => ({ ...state, selected: index }));\n}\n\nexport function setListId(id: string, store: SpotlightStore) {\n store.updateState((state) => ({ ...state, listId: id }));\n}\n\nfunction findElementByQuerySelector<T extends HTMLElement>(\n selector: string,\n root: Document | Element | ShadowRoot = document\n): T | null {\n // Directly try to find the element in the current root.\n const element = root.querySelector<T>(selector);\n if (element) {\n return element;\n }\n\n // Iterate through all children of the current root.\n const children = root instanceof ShadowRoot ? root.host.children : root.children;\n for (let i = 0; i < children.length; i += 1) {\n const child = children[i];\n\n // Recursively search in the child's shadow root if it exists.\n if (child.shadowRoot) {\n const shadowElement = findElementByQuerySelector<T>(selector, child.shadowRoot);\n if (shadowElement) {\n return shadowElement;\n }\n }\n\n // Also, search recursively in the child itself if it does not have a shadow root or the element wasn't found in its shadow root.\n const nestedElement = findElementByQuerySelector<T>(selector, child);\n if (nestedElement) {\n return nestedElement;\n }\n }\n\n // Return null if the element isn't found in the current root or any of its shadow DOMs.\n return null;\n}\n\nexport function selectAction(index: number, store: SpotlightStore): number {\n const state = store.getState();\n const actionsList = state.listId ? findElementByQuerySelector(`#${state.listId}`) : null;\n const selected = actionsList?.querySelector<HTMLButtonElement>('[data-selected]');\n const actions = actionsList?.querySelectorAll<HTMLButtonElement>('[data-action]') ?? [];\n const nextIndex = index === -1 ? actions.length - 1 : index === actions.length ? 0 : index;\n\n const selectedIndex = clamp(nextIndex, 0, actions.length - 1);\n selected?.removeAttribute('data-selected');\n actions[selectedIndex]?.scrollIntoView({ block: 'nearest' });\n actions[selectedIndex]?.setAttribute('data-selected', 'true');\n setSelectedAction(selectedIndex, store);\n\n return selectedIndex;\n}\n\nexport function selectNextAction(store: SpotlightStore) {\n return selectAction(store.getState().selected + 1, store);\n}\n\nexport function selectPreviousAction(store: SpotlightStore) {\n return selectAction(store.getState().selected - 1, store);\n}\n\nexport function triggerSelectedAction(store: SpotlightStore) {\n const state = store.getState();\n const selected = findElementByQuerySelector<HTMLButtonElement>(
|
|
1
|
+
{"version":3,"file":"spotlight.store.mjs","names":[],"sources":["../src/spotlight.store.ts"],"sourcesContent":["import { clamp } from '@mantine/hooks';\nimport { createStore, MantineStore, useStore } from '@mantine/store';\n\nexport interface SpotlightState {\n opened: boolean;\n selected: number;\n listId: string;\n query: string;\n empty: boolean;\n registeredActions: Set<string>;\n}\n\nexport type SpotlightStore = MantineStore<SpotlightState>;\n\nexport const createSpotlightStore = () =>\n createStore<SpotlightState>({\n opened: false,\n empty: false,\n selected: -1,\n listId: '',\n query: '',\n registeredActions: new Set(),\n });\n\nexport const useSpotlight = (store: SpotlightStore) => useStore(store);\n\nexport function updateSpotlightStateAction(\n update: (state: SpotlightState) => Partial<SpotlightState>,\n store: SpotlightStore\n) {\n const state = store.getState();\n store.setState({ ...state, ...update(store.getState()) });\n}\n\nexport function openSpotlightAction(store: SpotlightStore) {\n updateSpotlightStateAction(() => ({ opened: true, selected: -1 }), store);\n}\n\nexport function closeSpotlightAction(store: SpotlightStore) {\n updateSpotlightStateAction(() => ({ opened: false }), store);\n}\n\nexport function toggleSpotlightAction(store: SpotlightStore) {\n updateSpotlightStateAction(\n (state) => ({ opened: !state.opened, selected: state.opened ? state.selected : -1 }),\n store\n );\n}\n\nexport function setSelectedAction(index: number, store: SpotlightStore) {\n store.updateState((state) => ({ ...state, selected: index }));\n}\n\nexport function setListId(id: string, store: SpotlightStore) {\n store.updateState((state) => ({ ...state, listId: id }));\n}\n\nfunction findElementByQuerySelector<T extends HTMLElement>(\n selector: string,\n root: Document | Element | ShadowRoot = document\n): T | null {\n // Directly try to find the element in the current root.\n const element = root.querySelector<T>(selector);\n if (element) {\n return element;\n }\n\n // Iterate through all children of the current root.\n const children = root instanceof ShadowRoot ? root.host.children : root.children;\n for (let i = 0; i < children.length; i += 1) {\n const child = children[i];\n\n // Recursively search in the child's shadow root if it exists.\n if (child.shadowRoot) {\n const shadowElement = findElementByQuerySelector<T>(selector, child.shadowRoot);\n if (shadowElement) {\n return shadowElement;\n }\n }\n\n // Also, search recursively in the child itself if it does not have a shadow root or the element wasn't found in its shadow root.\n const nestedElement = findElementByQuerySelector<T>(selector, child);\n if (nestedElement) {\n return nestedElement;\n }\n }\n\n // Return null if the element isn't found in the current root or any of its shadow DOMs.\n return null;\n}\n\nexport function selectAction(index: number, store: SpotlightStore): number {\n const state = store.getState();\n const actionsList = state.listId ? findElementByQuerySelector(`#${state.listId}`) : null;\n const selected = actionsList?.querySelector<HTMLButtonElement>('[data-selected]');\n const actions = actionsList?.querySelectorAll<HTMLButtonElement>('[data-action]') ?? [];\n const nextIndex = index === -1 ? actions.length - 1 : index === actions.length ? 0 : index;\n\n const selectedIndex = clamp(nextIndex, 0, actions.length - 1);\n selected?.removeAttribute('data-selected');\n actions[selectedIndex]?.scrollIntoView({ block: 'nearest' });\n actions[selectedIndex]?.setAttribute('data-selected', 'true');\n setSelectedAction(selectedIndex, store);\n\n return selectedIndex;\n}\n\nexport function selectNextAction(store: SpotlightStore) {\n return selectAction(store.getState().selected + 1, store);\n}\n\nexport function selectPreviousAction(store: SpotlightStore) {\n return selectAction(store.getState().selected - 1, store);\n}\n\nexport function triggerSelectedAction(store: SpotlightStore) {\n const state = store.getState();\n const selected = state.listId\n ? findElementByQuerySelector<HTMLButtonElement>(`#${state.listId} [data-selected]`)\n : null;\n selected?.click();\n}\n\nexport function registerAction(id: string, store: SpotlightStore) {\n const state = store.getState();\n state.registeredActions.add(id);\n return () => {\n state.registeredActions.delete(id);\n };\n}\n\nexport function setQuery(query: string, store: SpotlightStore) {\n updateSpotlightStateAction(() => ({ query }), store);\n Promise.resolve().then(() => {\n selectAction(0, store);\n updateSpotlightStateAction(\n (state) => ({\n empty: (state.query.trim().length > 0 && state.registeredActions.size === 0) || false,\n }),\n store\n );\n });\n}\n\nexport function clearSpotlightState(\n { clearQuery }: { clearQuery: boolean | undefined },\n store: SpotlightStore\n) {\n store.updateState((state) => ({\n ...state,\n selected: -1,\n query: clearQuery ? '' : state.query,\n empty: clearQuery ? false : state.empty,\n }));\n}\n\nexport const spotlightActions = {\n open: openSpotlightAction,\n close: closeSpotlightAction,\n toggle: toggleSpotlightAction,\n updateState: updateSpotlightStateAction,\n setSelectedAction,\n setListId,\n selectAction,\n selectNextAction,\n selectPreviousAction,\n triggerSelectedAction,\n registerAction,\n setQuery,\n clearSpotlightState,\n};\n\nexport function createSpotlight() {\n const store = createSpotlightStore();\n const actions = {\n open: () => openSpotlightAction(store),\n close: () => closeSpotlightAction(store),\n toggle: () => toggleSpotlightAction(store),\n };\n\n return [store, actions] as const;\n}\n\nexport const [spotlightStore, spotlight] = createSpotlight();\nexport const { open: openSpotlight, close: closeSpotlight, toggle: toggleSpotlight } = spotlight;\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mantine/spotlight",
|
|
3
|
-
"version": "9.1.
|
|
3
|
+
"version": "9.1.1",
|
|
4
4
|
"description": "Command center components for react and Mantine",
|
|
5
5
|
"homepage": "https://mantine.dev",
|
|
6
6
|
"license": "MIT",
|
|
@@ -41,13 +41,13 @@
|
|
|
41
41
|
"directory": "packages/@mantine/spotlight"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
44
|
-
"@mantine/core": "9.1.
|
|
45
|
-
"@mantine/hooks": "9.1.
|
|
44
|
+
"@mantine/core": "9.1.1",
|
|
45
|
+
"@mantine/hooks": "9.1.1",
|
|
46
46
|
"react": "^19.2.0",
|
|
47
47
|
"react-dom": "^19.2.0"
|
|
48
48
|
},
|
|
49
49
|
"dependencies": {
|
|
50
|
-
"@mantine/store": "9.1.
|
|
50
|
+
"@mantine/store": "9.1.1"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
53
|
"@mantine-tests/core": "workspace:*",
|