@sanity/ui 4.2.1 → 4.2.2
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/dist/{arrow-D-raLuvE.js → arrow-CZ-Lw1QO.js} +2 -2
- package/dist/{arrow-D-raLuvE.js.map → arrow-CZ-Lw1QO.js.map} +1 -1
- package/dist/autocomplete.js +6 -6
- package/dist/autocomplete.js.map +1 -1
- package/dist/breadcrumbs.js +4 -4
- package/dist/{button-D8Ge5vTw.js → button-Wii-24Xu.js} +6 -6
- package/dist/button-Wii-24Xu.js.map +1 -0
- package/dist/button-dnqMFkWg.d.ts.map +1 -1
- package/dist/code.d.ts.map +1 -1
- package/dist/code.js +1 -1
- package/dist/code.js.map +1 -1
- package/dist/{flex-JVQRW_e_.js → flex-CpiAc-4D.js} +2 -2
- package/dist/{flex-JVQRW_e_.js.map → flex-CpiAc-4D.js.map} +1 -1
- package/dist/getScopedTheme-C-sZsyAz.js.map +1 -1
- package/dist/{grid-Dw7q0_YV.js → grid-BVZEj_Xe.js} +3 -3
- package/dist/{grid-Dw7q0_YV.js.map → grid-BVZEj_Xe.js.map} +1 -1
- package/dist/{hotkeys-DTjEz_u3.js → hotkeys-DEMStMQ5.js} +4 -4
- package/dist/{hotkeys-DTjEz_u3.js.map → hotkeys-DEMStMQ5.js.map} +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +12 -12
- package/dist/index.js.map +1 -1
- package/dist/{layer-dwv5h6E7.js → layer-B0tlPeLT.js} +2 -2
- package/dist/{layer-dwv5h6E7.js.map → layer-B0tlPeLT.js.map} +1 -1
- package/dist/menu.d.ts.map +1 -1
- package/dist/menu.js +5 -5
- package/dist/menu.js.map +1 -1
- package/dist/{popover-BngOa-um.js → popover-DR6UQQvq.js} +4 -4
- package/dist/{popover-BngOa-um.js.map → popover-DR6UQQvq.js.map} +1 -1
- package/dist/popover.js +1 -1
- package/dist/{stack-Bue-701Y.js → stack-SbGBZ0x3.js} +3 -3
- package/dist/{stack-Bue-701Y.js.map → stack-SbGBZ0x3.js.map} +1 -1
- package/dist/{textInput-C83gG7N5.js → textInput-fGZVEKGs.js} +4 -4
- package/dist/{textInput-C83gG7N5.js.map → textInput-fGZVEKGs.js.map} +1 -1
- package/dist/toast.js +5 -5
- package/dist/tooltip.js +3 -3
- package/dist/{useLayer-ONr7wTUN.js → useLayer-CUKYjJYq.js} +5 -5
- package/dist/useLayer-CUKYjJYq.js.map +1 -0
- package/package.json +11 -10
- package/dist/button-D8Ge5vTw.js.map +0 -1
- package/dist/useLayer-ONr7wTUN.js.map +0 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { _ as useTheme_v2, d as createGlobalScopedContext, f as globalScope, r as isRecord } from "./useLayer-
|
|
1
|
+
import { _ as useTheme_v2, d as createGlobalScopedContext, f as globalScope, r as isRecord } from "./useLayer-CUKYjJYq.js";
|
|
2
2
|
import { c } from "react/compiler-runtime";
|
|
3
3
|
import { clsx } from "clsx/lite";
|
|
4
4
|
import { useContext, useId } from "react";
|
|
@@ -167,4 +167,4 @@ function Arrow(props) {
|
|
|
167
167
|
}
|
|
168
168
|
export { useBoundaryElement as a, PortalContext as i, Portal as n, BoundaryElementContext as o, usePortal as r, Arrow as t };
|
|
169
169
|
|
|
170
|
-
//# sourceMappingURL=arrow-
|
|
170
|
+
//# sourceMappingURL=arrow-CZ-Lw1QO.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"arrow-D-raLuvE.js","names":["createPortal(children, portalElement)","radius = 0","compileCommands(cmds)","clsx(arrow, className)","assignInlineVars({[arrowSize]: `${w}px`})","`${w}px`","{...style, ...assignInlineVars({[arrowSize]: `${w}px`})}","<rect x={0} y={strokeWidth} width={w} height={w} fill=\"white\" />","<mask id={strokeMaskId}>\n <rect x={0} y={strokeWidth} width={w} height={w} fill=\"white\" />\n </mask>","<path\n className={arrowStroke}\n d={strokePath}\n mask={`url(#${strokeMaskId})`}\n strokeWidth={strokeWidth * 2}\n />","strokeWidth * 2","`url(#${strokeMaskId})`","<path className={arrowShape} d={fillPath} />","<svg width={w} height={w} viewBox={`0 0 ${w} ${w}`}>\n <mask id={strokeMaskId}>\n <rect x={0} y={strokeWidth} width={w} height={w} fill=\"white\" />\n </mask>\n <path\n className={arrowStroke}\n d={strokePath}\n mask={`url(#${strokeMaskId})`}\n strokeWidth={strokeWidth * 2}\n />\n <path className={arrowShape} d={fillPath} />\n </svg>","`0 0 ${w} ${w}`","<div\n data-ui=\"Arrow\"\n {...restProps}\n className={clsx(arrow, className)}\n ref={ref}\n style={{...style, ...assignInlineVars({[arrowSize]: `${w}px`})}}\n >\n <svg width={w} height={w} viewBox={`0 0 ${w} ${w}`}>\n <mask id={strokeMaskId}>\n <rect x={0} y={strokeWidth} width={w} height={w} fill=\"white\" />\n </mask>\n <path\n className={arrowStroke}\n d={strokePath}\n mask={`url(#${strokeMaskId})`}\n strokeWidth={strokeWidth * 2}\n />\n <path className={arrowShape} d={fillPath} />\n </svg>\n </div>"],"sources":["../src/core/utils/boundaryElement/boundaryElementContext.ts","../src/core/utils/boundaryElement/useBoundaryElement.ts","../src/core/utils/portal/portalContext.ts","../src/core/utils/portal/usePortal.ts","../src/core/utils/portal/portal.ts","../src/core/utils/arrow/cmds.ts","../src/core/utils/arrow/arrow.css.ts","../src/core/utils/arrow/arrow.tsx"],"sourcesContent":["import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'\nimport {BoundaryElementContextValue} from './types'\n\nexport const BoundaryElementContext = createGlobalScopedContext<BoundaryElementContextValue | null>(\n '@sanity/ui/context/boundaryElement',\n null,\n)\n","import {useContext} from 'react'\n\nimport {isRecord} from '../../lib/isRecord'\nimport {BoundaryElementContext} from './boundaryElementContext'\nimport {BoundaryElementContextValue} from './types'\n\nconst DEFAULT_VALUE: BoundaryElementContextValue = {\n version: 0.0,\n element: null,\n}\n\n/**\n * @public\n */\nexport function useBoundaryElement(): BoundaryElementContextValue {\n const value = useContext(BoundaryElementContext)\n\n // NOTE: This check is for future-compatiblity\n // - If the value is not an object, it’s not compatible with the current version\n // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version\n if (value && (!isRecord(value) || value.version !== 0.0)) {\n throw new Error('useBoundaryElement(): the context value is not compatible')\n }\n\n return value || DEFAULT_VALUE\n}\n","import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'\nimport {globalScope} from '../../lib/globalScope'\nimport {PortalContextValue} from './types'\n\nconst key = '@sanity/ui/context/portal'\nconst elementKey = Symbol.for(`${key}/element`)\n\nglobalScope[elementKey] = null\n\nconst defaultContextValue: PortalContextValue = {\n version: 0.0,\n boundaryElement: null,\n get element() {\n if (typeof document === 'undefined') {\n return null\n }\n\n if (globalScope[elementKey]) {\n return globalScope[elementKey]\n }\n\n globalScope[elementKey] = document.createElement('div')\n globalScope[elementKey].setAttribute('data-portal', '')\n\n document.body.appendChild(globalScope[elementKey])\n\n return globalScope[elementKey]\n },\n}\n\nexport const PortalContext = createGlobalScopedContext<PortalContextValue>(key, defaultContextValue)\n","import {useContext} from 'react'\n\nimport {isRecord} from '../../lib/isRecord'\nimport {PortalContext} from './portalContext'\nimport {PortalContextValue} from './types'\n\n/**\n * @public\n */\nexport function usePortal(): PortalContextValue {\n const value = useContext(PortalContext)\n\n if (!value) {\n throw new Error('usePortal(): missing context value')\n }\n\n // NOTE: This check is for future-compatiblity\n // - If the value is not an object, it’s not compatible with the current version\n // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version\n if (!isRecord(value) || value.version !== 0.0) {\n throw new Error('usePortal(): the context value is not compatible')\n }\n\n return value\n}\n","import {createPortal} from 'react-dom'\n\nimport {usePortal} from './usePortal'\n\n/**\n * @public\n */\nexport interface PortalProps {\n children: React.ReactNode\n /**\n * @beta This API might change. DO NOT USE IN PRODUCTION.\n */\n __unstable_name?: string\n}\n\n/**\n * @public\n */\nexport function Portal(props: PortalProps): React.ReactPortal | null {\n const {children, __unstable_name: name} = props\n const portal = usePortal()\n const portalElement =\n (name ? portal.elements && portal.elements[name] : portal.element) || portal.elements?.default\n\n if (!portalElement) {\n return null\n }\n\n return createPortal(children, portalElement)\n}\n","interface PointCmd {\n type: 'point'\n x: number\n y: number\n radius?: number\n}\n\ninterface CurveCmd {\n type: 'curve'\n startControl: Point\n endControl: Point\n curveEnd: Point\n}\n\nexport type Cmd = PointCmd | CurveCmd\n\nexport interface Point {\n x: number\n y: number\n radius?: number\n}\n\nfunction moveTowardsLength(movingPoint: Point, targetPoint: Point, amount: number) {\n const width = targetPoint.x - movingPoint.x\n const height = targetPoint.y - movingPoint.y\n\n const distance = Math.sqrt(width * width + height * height)\n\n return moveTowardsFractional(movingPoint, targetPoint, Math.min(1, amount / distance))\n}\n\nfunction moveTowardsFractional(movingPoint: Point, targetPoint: Point, fraction: number): Point {\n return {\n x: movingPoint.x + (targetPoint.x - movingPoint.x) * fraction,\n y: movingPoint.y + (targetPoint.y - movingPoint.y) * fraction,\n }\n}\n\nexport function getRoundedCommands(points: Point[]): Cmd[] {\n const len = points.length\n\n const cmds: Cmd[] = []\n\n for (let i = 0; i < len; i += 1) {\n const point = points[i]\n const prevPoint = points[i - 1]\n const nextPoint = points[i + 1]\n\n if (prevPoint && point.radius) {\n const curveStart = moveTowardsLength(point, prevPoint, point.radius)\n const curveEnd = moveTowardsLength(point, nextPoint, point.radius)\n const startControl = moveTowardsFractional(curveStart, point, 0.5)\n const endControl = moveTowardsFractional(point, curveEnd, 0.5)\n\n cmds.push({\n type: 'point',\n ...curveStart,\n })\n\n cmds.push({\n type: 'curve',\n curveEnd,\n startControl,\n endControl,\n })\n } else {\n cmds.push({\n type: 'point',\n ...point,\n })\n }\n }\n\n return cmds\n}\n\nexport function compileCommands(cmds: Cmd[]): string {\n return cmds\n .map((n, idx) => {\n if (n.type === 'point') {\n return `${idx === 0 ? 'M' : 'L'} ${n.x} ${n.y}`\n }\n\n if (n.type === 'curve') {\n return `C ${n.startControl.x} ${n.startControl.y} ${n.endControl.x} ${n.endControl.y} ${n.curveEnd.x} ${n.curveEnd.y}`\n }\n\n return ``\n })\n .join(' ')\n}\n","import {createVar, globalStyle, style} from '@vanilla-extract/css'\n\nexport const arrowSize = createVar()\n\nexport const arrow = style({\n position: 'absolute',\n width: arrowSize,\n height: arrowSize,\n selectors: {\n ':empty + &': {display: 'none'},\n \"[data-placement^='top'] > &\": {bottom: `calc(-1 * ${arrowSize})`},\n \"[data-placement^='right'] > &\": {left: `calc(-1 * ${arrowSize})`},\n \"[data-placement^='left'] > &\": {right: `calc(-1 * ${arrowSize})`},\n \"[data-placement^='bottom'] > &\": {top: `calc(-1 * ${arrowSize})`},\n },\n})\n\nglobalStyle(`${arrow} > svg`, {\n display: 'block',\n lineHeight: 0,\n transformOrigin: `calc(${arrowSize} / 2) calc(${arrowSize} / 2)`,\n})\n\nglobalStyle(`[data-placement^='top'] > ${arrow} > svg`, {transform: 'rotate(0)'})\nglobalStyle(`[data-placement^='right'] > ${arrow} > svg`, {transform: 'rotate(90deg)'})\nglobalStyle(`[data-placement^='left'] > ${arrow} > svg`, {transform: 'rotate(-90deg)'})\nglobalStyle(`[data-placement^='bottom'] > ${arrow} > svg`, {transform: 'rotate(180deg)'})\n\nexport const arrowStroke = style({\n stroke: 'var(--card-shadow-outline-color)',\n})\n\nexport const arrowShape = style({\n fill: 'var(--card-bg-color)',\n})\n","import {assignInlineVars} from '@vanilla-extract/dynamic'\nimport {clsx} from 'clsx/lite'\nimport {HTMLProps, useId} from 'react'\n\nimport {useTheme_v2} from '../../theme/useTheme'\nimport {compileCommands, getRoundedCommands, Point} from './cmds'\n\nimport {arrow, arrowShape, arrowSize, arrowStroke} from './arrow.css'\n\n/** @internal */\nexport function Arrow(\n props: {width: number; height: number; radius?: number} & Omit<\n HTMLProps<HTMLDivElement>,\n 'width' | 'height'\n >,\n): React.JSX.Element {\n const {className, width: w, height: h, radius = 0, ref, style, ...restProps} = props\n const {card} = useTheme_v2()\n const strokeMaskId = `stroke-mask-${useId()}`\n const strokeWidth = card.shadow.outline\n\n const center = w / 2\n\n const points: Point[] = [\n {\n x: 0,\n y: 0,\n },\n {\n x: radius,\n y: 0,\n radius,\n },\n {\n x: center,\n y: h - 1,\n radius,\n },\n {\n x: w - radius,\n y: 0,\n radius,\n },\n {\n x: w,\n y: 0,\n },\n ]\n\n const cmds = getRoundedCommands(points)\n const path = compileCommands(cmds)\n\n // oxlint-disable-next-line no-unnecessary-template-expression\n const strokePath = `${path}`\n const fillPath = `${path} M ${w} -1 M 0 -1 Z`\n\n return (\n <div\n data-ui=\"Arrow\"\n {...restProps}\n className={clsx(arrow, className)}\n ref={ref}\n style={{...style, ...assignInlineVars({[arrowSize]: `${w}px`})}}\n >\n <svg width={w} height={w} viewBox={`0 0 ${w} ${w}`}>\n <mask id={strokeMaskId}>\n <rect x={0} y={strokeWidth} width={w} height={w} fill=\"white\" />\n </mask>\n <path\n className={arrowStroke}\n d={strokePath}\n mask={`url(#${strokeMaskId})`}\n strokeWidth={strokeWidth * 2}\n />\n <path className={arrowShape} d={fillPath} />\n </svg>\n </div>\n )\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"arrow-CZ-Lw1QO.js","names":["createPortal(children, portalElement)","radius = 0","compileCommands(cmds)","clsx(arrow, className)","assignInlineVars({[arrowSize]: `${w}px`})","`${w}px`","{...style, ...assignInlineVars({[arrowSize]: `${w}px`})}","<rect x={0} y={strokeWidth} width={w} height={w} fill=\"white\" />","<mask id={strokeMaskId}>\n <rect x={0} y={strokeWidth} width={w} height={w} fill=\"white\" />\n </mask>","<path\n className={arrowStroke}\n d={strokePath}\n mask={`url(#${strokeMaskId})`}\n strokeWidth={strokeWidth * 2}\n />","strokeWidth * 2","`url(#${strokeMaskId})`","<path className={arrowShape} d={fillPath} />","<svg width={w} height={w} viewBox={`0 0 ${w} ${w}`}>\n <mask id={strokeMaskId}>\n <rect x={0} y={strokeWidth} width={w} height={w} fill=\"white\" />\n </mask>\n <path\n className={arrowStroke}\n d={strokePath}\n mask={`url(#${strokeMaskId})`}\n strokeWidth={strokeWidth * 2}\n />\n <path className={arrowShape} d={fillPath} />\n </svg>","`0 0 ${w} ${w}`","<div\n data-ui=\"Arrow\"\n {...restProps}\n className={clsx(arrow, className)}\n ref={ref}\n style={{...style, ...assignInlineVars({[arrowSize]: `${w}px`})}}\n >\n <svg width={w} height={w} viewBox={`0 0 ${w} ${w}`}>\n <mask id={strokeMaskId}>\n <rect x={0} y={strokeWidth} width={w} height={w} fill=\"white\" />\n </mask>\n <path\n className={arrowStroke}\n d={strokePath}\n mask={`url(#${strokeMaskId})`}\n strokeWidth={strokeWidth * 2}\n />\n <path className={arrowShape} d={fillPath} />\n </svg>\n </div>"],"sources":["../src/core/utils/boundaryElement/boundaryElementContext.ts","../src/core/utils/boundaryElement/useBoundaryElement.ts","../src/core/utils/portal/portalContext.ts","../src/core/utils/portal/usePortal.ts","../src/core/utils/portal/portal.ts","../src/core/utils/arrow/cmds.ts","../src/core/utils/arrow/arrow.css.ts","../src/core/utils/arrow/arrow.tsx"],"sourcesContent":["import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'\nimport {BoundaryElementContextValue} from './types'\n\nexport const BoundaryElementContext = createGlobalScopedContext<BoundaryElementContextValue | null>(\n '@sanity/ui/context/boundaryElement',\n null,\n)\n","import {useContext} from 'react'\n\nimport {isRecord} from '../../lib/isRecord'\nimport {BoundaryElementContext} from './boundaryElementContext'\nimport {BoundaryElementContextValue} from './types'\n\nconst DEFAULT_VALUE: BoundaryElementContextValue = {\n version: 0.0,\n element: null,\n}\n\n/**\n * @public\n */\nexport function useBoundaryElement(): BoundaryElementContextValue {\n const value = useContext(BoundaryElementContext)\n\n // NOTE: This check is for future-compatiblity\n // - If the value is not an object, it’s not compatible with the current version\n // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version\n if (value && (!isRecord(value) || value.version !== 0.0)) {\n throw new Error('useBoundaryElement(): the context value is not compatible')\n }\n\n return value || DEFAULT_VALUE\n}\n","import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'\nimport {globalScope} from '../../lib/globalScope'\nimport {PortalContextValue} from './types'\n\nconst key = '@sanity/ui/context/portal'\nconst elementKey = Symbol.for(`${key}/element`)\n\nglobalScope[elementKey] = null\n\nconst defaultContextValue: PortalContextValue = {\n version: 0.0,\n boundaryElement: null,\n get element() {\n if (typeof document === 'undefined') {\n return null\n }\n\n if (globalScope[elementKey]) {\n return globalScope[elementKey]\n }\n\n globalScope[elementKey] = document.createElement('div')\n globalScope[elementKey].setAttribute('data-portal', '')\n\n document.body.appendChild(globalScope[elementKey])\n\n return globalScope[elementKey]\n },\n}\n\nexport const PortalContext = createGlobalScopedContext<PortalContextValue>(key, defaultContextValue)\n","import {useContext} from 'react'\n\nimport {isRecord} from '../../lib/isRecord'\nimport {PortalContext} from './portalContext'\nimport {PortalContextValue} from './types'\n\n/**\n * @public\n */\nexport function usePortal(): PortalContextValue {\n const value = useContext(PortalContext)\n\n if (!value) {\n throw new Error('usePortal(): missing context value')\n }\n\n // NOTE: This check is for future-compatiblity\n // - If the value is not an object, it’s not compatible with the current version\n // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version\n if (!isRecord(value) || value.version !== 0.0) {\n throw new Error('usePortal(): the context value is not compatible')\n }\n\n return value\n}\n","import {createPortal} from 'react-dom'\n\nimport {usePortal} from './usePortal'\n\n/**\n * @public\n */\nexport interface PortalProps {\n children: React.ReactNode\n /**\n * @beta This API might change. DO NOT USE IN PRODUCTION.\n */\n __unstable_name?: string\n}\n\n/**\n * @public\n */\nexport function Portal(props: PortalProps): React.ReactPortal | null {\n const {children, __unstable_name: name} = props\n const portal = usePortal()\n const portalElement =\n (name ? portal.elements && portal.elements[name] : portal.element) || portal.elements?.default\n\n if (!portalElement) {\n return null\n }\n\n return createPortal(children, portalElement)\n}\n","interface PointCmd {\n type: 'point'\n x: number\n y: number\n radius?: number\n}\n\ninterface CurveCmd {\n type: 'curve'\n startControl: Point\n endControl: Point\n curveEnd: Point\n}\n\nexport type Cmd = PointCmd | CurveCmd\n\nexport interface Point {\n x: number\n y: number\n radius?: number\n}\n\nfunction moveTowardsLength(movingPoint: Point, targetPoint: Point, amount: number) {\n const width = targetPoint.x - movingPoint.x\n const height = targetPoint.y - movingPoint.y\n\n const distance = Math.sqrt(width * width + height * height)\n\n return moveTowardsFractional(movingPoint, targetPoint, Math.min(1, amount / distance))\n}\n\nfunction moveTowardsFractional(movingPoint: Point, targetPoint: Point, fraction: number): Point {\n return {\n x: movingPoint.x + (targetPoint.x - movingPoint.x) * fraction,\n y: movingPoint.y + (targetPoint.y - movingPoint.y) * fraction,\n }\n}\n\nexport function getRoundedCommands(points: Point[]): Cmd[] {\n const len = points.length\n\n const cmds: Cmd[] = []\n\n for (let i = 0; i < len; i += 1) {\n const point = points[i]\n const prevPoint = points[i - 1]\n const nextPoint = points[i + 1]\n\n if (prevPoint && point.radius) {\n const curveStart = moveTowardsLength(point, prevPoint, point.radius)\n const curveEnd = moveTowardsLength(point, nextPoint, point.radius)\n const startControl = moveTowardsFractional(curveStart, point, 0.5)\n const endControl = moveTowardsFractional(point, curveEnd, 0.5)\n\n cmds.push({\n type: 'point',\n ...curveStart,\n })\n\n cmds.push({\n type: 'curve',\n curveEnd,\n startControl,\n endControl,\n })\n } else {\n cmds.push({\n type: 'point',\n ...point,\n })\n }\n }\n\n return cmds\n}\n\nexport function compileCommands(cmds: Cmd[]): string {\n return cmds\n .map((n, idx) => {\n if (n.type === 'point') {\n return `${idx === 0 ? 'M' : 'L'} ${n.x} ${n.y}`\n }\n\n if (n.type === 'curve') {\n return `C ${n.startControl.x} ${n.startControl.y} ${n.endControl.x} ${n.endControl.y} ${n.curveEnd.x} ${n.curveEnd.y}`\n }\n\n return ``\n })\n .join(' ')\n}\n","import {createVar, globalStyle, style} from '@vanilla-extract/css'\n\nexport const arrowSize = createVar()\n\nexport const arrow = style({\n position: 'absolute',\n width: arrowSize,\n height: arrowSize,\n selectors: {\n ':empty + &': {display: 'none'},\n \"[data-placement^='top'] > &\": {bottom: `calc(-1 * ${arrowSize})`},\n \"[data-placement^='right'] > &\": {left: `calc(-1 * ${arrowSize})`},\n \"[data-placement^='left'] > &\": {right: `calc(-1 * ${arrowSize})`},\n \"[data-placement^='bottom'] > &\": {top: `calc(-1 * ${arrowSize})`},\n },\n})\n\nglobalStyle(`${arrow} > svg`, {\n display: 'block',\n lineHeight: 0,\n transformOrigin: `calc(${arrowSize} / 2) calc(${arrowSize} / 2)`,\n})\n\nglobalStyle(`[data-placement^='top'] > ${arrow} > svg`, {transform: 'rotate(0)'})\nglobalStyle(`[data-placement^='right'] > ${arrow} > svg`, {transform: 'rotate(90deg)'})\nglobalStyle(`[data-placement^='left'] > ${arrow} > svg`, {transform: 'rotate(-90deg)'})\nglobalStyle(`[data-placement^='bottom'] > ${arrow} > svg`, {transform: 'rotate(180deg)'})\n\nexport const arrowStroke = style({\n stroke: 'var(--card-shadow-outline-color)',\n})\n\nexport const arrowShape = style({\n fill: 'var(--card-bg-color)',\n})\n","import {assignInlineVars} from '@vanilla-extract/dynamic'\nimport {clsx} from 'clsx/lite'\nimport {HTMLProps, useId} from 'react'\n\nimport {useTheme_v2} from '../../theme/useTheme'\nimport {compileCommands, getRoundedCommands, Point} from './cmds'\n\nimport {arrow, arrowShape, arrowSize, arrowStroke} from './arrow.css'\n\n/** @internal */\nexport function Arrow(\n props: {width: number; height: number; radius?: number} & Omit<\n HTMLProps<HTMLDivElement>,\n 'width' | 'height'\n >,\n): React.JSX.Element {\n const {className, width: w, height: h, radius = 0, ref, style, ...restProps} = props\n const {card} = useTheme_v2()\n const strokeMaskId = `stroke-mask-${useId()}`\n const strokeWidth = card.shadow.outline\n\n const center = w / 2\n\n const points: Point[] = [\n {\n x: 0,\n y: 0,\n },\n {\n x: radius,\n y: 0,\n radius,\n },\n {\n x: center,\n y: h - 1,\n radius,\n },\n {\n x: w - radius,\n y: 0,\n radius,\n },\n {\n x: w,\n y: 0,\n },\n ]\n\n const cmds = getRoundedCommands(points)\n const path = compileCommands(cmds)\n\n // oxlint-disable-next-line no-unnecessary-template-expression\n const strokePath = `${path}`\n const fillPath = `${path} M ${w} -1 M 0 -1 Z`\n\n return (\n <div\n data-ui=\"Arrow\"\n {...restProps}\n className={clsx(arrow, className)}\n ref={ref}\n style={{...style, ...assignInlineVars({[arrowSize]: `${w}px`})}}\n >\n <svg width={w} height={w} viewBox={`0 0 ${w} ${w}`}>\n <mask id={strokeMaskId}>\n <rect x={0} y={strokeWidth} width={w} height={w} fill=\"white\" />\n </mask>\n <path\n className={arrowStroke}\n d={strokePath}\n mask={`url(#${strokeMaskId})`}\n strokeWidth={strokeWidth * 2}\n />\n <path className={arrowShape} d={fillPath} />\n </svg>\n </div>\n )\n}\n"],"mappings":";;;;;;;AAGA,MAAa,yBAAyB,0BACpC,sCACA,IACF,GCAM,gBAA6C;CACjD,SAAS;CACT,SAAS;AACX;;;;AAKA,SAAgB,qBAAkD;CAChE,IAAM,QAAQ,WAAW,sBAAsB;CAK/C,IAAI,UAAU,CAAC,SAAS,KAAK,KAAK,MAAM,YAAY,IAClD,MAAU,MAAM,2DAA2D;CAG7E,OAAO,SAAS;AAClB;ACrBA,MAAM,MAAM,6BACN,aAAa,OAAO,IAAI,GAAG,IAAI,SAAS;AAE9C,YAAY,cAAc;AAuB1B,MAAa,gBAAgB,0BAA8C,KAAK;CApB9E,SAAS;CACT,iBAAiB;CACjB,IAAI,UAAU;EAcZ,OAbI,OAAO,WAAa,MACf,OAGL,YAAY,cACP,YAAY,eAGrB,YAAY,cAAc,SAAS,cAAc,KAAK,GACtD,YAAY,WAAW,CAAC,aAAa,eAAe,EAAE,GAEtD,SAAS,KAAK,YAAY,YAAY,WAAW,GAE1C,YAAY;CACrB;AAG8E,CAAmB;;;;ACrBnG,SAAgB,YAAgC;CAC9C,IAAM,QAAQ,WAAW,aAAa;CAEtC,IAAI,CAAC,OACH,MAAU,MAAM,oCAAoC;CAMtD,IAAI,CAAC,SAAS,KAAK,KAAK,MAAM,YAAY,GACxC,MAAU,MAAM,kDAAkD;CAGpE,OAAO;AACT;;;;ACNA,SAAgB,OAAO,OAA8C;eAC7D,EAAC,UAAU,iBAAiB,SAAQ,OACpC,SAAS,UAAU,GACnB,iBACH,OAAO,OAAO,YAAY,OAAO,SAAS,QAAQ,OAAO,YAAY,OAAO,UAAU;CAEzF,IAAI,CAAC,eACH,OAAO;CAGFA,IAAAA;CAAP,OAAoB,EAAA,OAAA,YAAA,EAAA,OAAU,iBAAvB,KAAA,aAAa,UAAU,aAAa,GAAvB,EAAA,KAAA,UAAU,EAAA,KAAA,uCAAvBA;AACT;ACPA,SAAS,kBAAkB,aAAoB,aAAoB,QAAgB;CACjF,IAAM,QAAQ,YAAY,IAAI,YAAY,GACpC,SAAS,YAAY,IAAI,YAAY,GAErC,WAAW,KAAK,KAAK,QAAQ,QAAQ,SAAS,MAAM;CAE1D,OAAO,sBAAsB,aAAa,aAAa,KAAK,IAAI,GAAG,SAAS,QAAQ,CAAC;AACvF;AAEA,SAAS,sBAAsB,aAAoB,aAAoB,UAAyB;CAC9F,OAAO;EACL,GAAG,YAAY,KAAK,YAAY,IAAI,YAAY,KAAK;EACrD,GAAG,YAAY,KAAK,YAAY,IAAI,YAAY,KAAK;CACvD;AACF;AAEA,SAAgB,mBAAmB,QAAwB;CACzD,IAAM,MAAM,OAAO,QAEb,OAAc,CAAC;CAErB,KAAK,IAAI,IAAI,GAAG,IAAI,KAAK,KAAK,GAAG;EAC/B,IAAM,QAAQ,OAAO,IACf,YAAY,OAAO,IAAI,IACvB,YAAY,OAAO,IAAI;EAE7B,IAAI,aAAa,MAAM,QAAQ;GAC7B,IAAM,aAAa,kBAAkB,OAAO,WAAW,MAAM,MAAM,GAC7D,WAAW,kBAAkB,OAAO,WAAW,MAAM,MAAM,GAC3D,eAAe,sBAAsB,YAAY,OAAO,EAAG,GAC3D,aAAa,sBAAsB,OAAO,UAAU,EAAG;GAO7D,AALA,KAAK,KAAK;IACR,MAAM;IACN,GAAG;GACL,CAAC,GAED,KAAK,KAAK;IACR,MAAM;IACN;IACA;IACA;GACF,CAAC;EACH,OACE,KAAK,KAAK;GACR,MAAM;GACN,GAAG;EACL,CAAC;CAEL;CAEA,OAAO;AACT;AAEA,SAAgB,gBAAgB,MAAqB;CACnD,OAAO,KACJ,KAAK,GAAG,QACH,EAAE,SAAS,UACN,GAAG,QAAQ,IAAI,MAAM,IAAI,GAAG,EAAE,EAAE,GAAG,EAAE,MAG1C,EAAE,SAAS,UACN,KAAK,EAAE,aAAa,EAAE,GAAG,EAAE,aAAa,EAAE,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,MAG9G,EACR,CAAC,CACD,KAAK,GAAG;AACb;;;AEhFA,SAAgB,MACd,OAImB;gBACZ,WAA6B,GAAe,KAAe,WAAV,OAAjBC,IAAd;CAAsD,AAAA,EAAA,OAAA,yGAAzE,CAAC,WAAW,OAAO,GAAG,QAAQ,GAAG,QAAA,IAAY,KAAK,OAAO,GAAA,aAAgB;CAAxC,IAAA,SAAA,OAAA,KAAA,IAAS,IAATA,IACjC,EAAC,SAAQ,YAAY,GACrB,eAAe,eAAe,MAAM,KACpC,cAAc,KAAK,OAAO,SAE1B,SAAS,IAAI,GA6BNC;CAhBN,AAAA,EAAA,OAAA,UAAA,EAAA,OACA,KAAA,EAAA,QANA,UAAA,EAAA,QAUA,KAWM,KAAA,gBADA,mBAAmB;EAzB9B;GACE,GAAG;GACH,GAAG;EACL;EACA;GACE,GAAG;GACH,GAAG;GACH;EACF;EACA;GACE,GAAG;GACH,GAAG,IAAI;GACP;EACF;EACA;GACE,GAAG,IAAI;GACP,GAAG;GACH;EACF;EACA;GACE,GAAG;GACH,GAAG;EACL;CAG8B,CACH,CAAI,GAhB1B,EAAA,KAAA,QACA,EAAA,KAAA,GANA,EAAA,MAAA,QAUA,EAAA,MAAA;CAWP,IAAM,OAAOA,IAGP,aAAa,GAAG,QAChB,WAAW,GAAG,KAAK,KAAK,EAAE,eAMjBC;CAAY,AAAA,EAAA,QAAA,0BAAZ,KAAA,KAAK,OAAO,SAAS,GAAT,EAAA,MAAA;CAE6B,IAAA,KAAA,GAAG,EAAE,KAApCC;CAA+BC,AAAAA,EAAAA,QAAAA,mBAA/B,KAAA,iBAAiB,GAAE,YAAYA,GAAQ,CAAC,GAATA,EAAAA,MAAAA;CAA7CC,IAAAA;CAAI,AAAA,EAAA,QAAA,SAAA,EAAA,QAAUF,MAAd,KAAA;EAAC,GAAG;EAAO,GAAGA;CAAyC,GAAnD,EAAA,MAAA,OAAUA,EAAAA,MAAAA;CAEc,IAAA,KAAA,OAAO,EAAE,GAAG,KAE3CG;CAAe,AAAA,EAAA,QAAA,eAAA,EAAA,QAAoB,KAAnC,KAAA,oBAAC,QAAD;EAAM,GAAG;EAAG,GAAG;EAAa,OAAO;EAAG,QAAQ;EAAG,MAAK;CAAS,CAAA,GAAhD,EAAA,MAAA,aAAoB,EAAA,MAAA;CADrCC,IAAAA;CAAU,AAAA,EAAA,QAAA,gBAAA,EAAA,QACRD,MADF,KAAA,oBAAC,QAAD;EAAM,IAAI;EACRA,UAAAA;CACI,CAAA,GAFI,EAAA,MAAA,cACRA,EAAAA,MAAAA;CAKM,IAAA,KAAA,QAAQ,aAAa,IACd,MAAA,cAAc,GAJ7BE;CAEK,AAAA,EAAA,QAAA,cAAA,EAAA,QAEUC,OAAAA,EAAAA,QADPC,MAHR,MAAA,oBAAC,QAAD;EACE,WAAW;EACX,GAAG;EACH,MAAMA;EACN,aAAaD;CACd,CAAA,GAHI,EAAA,MAAA,YAEUA,EAAAA,MAAAA,KADPC,EAAAA,MAAAA;CAGRC,IAAAA;CAAgC,AAAA,EAAA,QAAA,0BAAhC,MAAA,oBAAC,QAAD;EAAM,WAAW;EAAY,GAAG;CAAW,CAAA,GAAX,EAAA,MAAA;CAVlCC,IAAAA;CAIEJ,AAAAA,EAAAA,QAAAA,OAAAA,EAAAA,QAMAG,OAAAA,EAAAA,QAViCE,MAAAA,EAAAA,QACjCN,MAAAA,EAAAA,QADU,KAAZ,MAAA,qBAAC,OAAD;EAAK,OAAO;EAAG,QAAQ;EAAG,SAASM;EAAnC,UAAA;GACEN;GAGAC;GAMAG;EACG;KAPHH,EAAAA,MAAAA,KAMAG,EAAAA,MAAAA,KAViCE,EAAAA,MAAAA,IACjCN,EAAAA,MAAAA,IADU,EAAA,MAAA;CAPdO,IAAAA;CADF,OAKS,EAAA,QAAA,OAAA,EAAA,QAFD,aAAA,EAAA,QAKJF,OAAAA,EAAAA,QAJWV,MAAAA,EAAAA,QAEJG,MALT,MAAA,oBAAC,OAAD;EACE,WAAQ;EACR,GAAI;EACJ,WAAWH;EACN;EACL,OAAOG;EAEPO,UAAAA;CAYG,CAAA,GAfE,EAAA,MAAA,KAFD,EAAA,MAAA,WAKJA,EAAAA,MAAAA,KAJWV,EAAAA,MAAAA,IAEJG,EAAAA,MAAAA,gCALTS;AAqBJ"}
|
package/dist/autocomplete.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { n as _getArrayProp, o as EMPTY_ARRAY, s as EMPTY_RECORD } from "./helpers-C8xxXAQC.js";
|
|
3
|
-
import { f as focusFirstDescendant, h as _raf, t as TextInput, u as _hasFocus } from "./textInput-
|
|
3
|
+
import { f as focusFirstDescendant, h as _raf, t as TextInput, u as _hasFocus } from "./textInput-fGZVEKGs.js";
|
|
4
4
|
import { t as _isEnterToClickElement } from "./element-BYgCE_iK.js";
|
|
5
|
-
import { s as Card, y as Box } from "./useLayer-
|
|
6
|
-
import { n as Text, t as Stack } from "./stack-
|
|
7
|
-
import { t as Button } from "./button-
|
|
8
|
-
import { t as Popover } from "./popover-
|
|
5
|
+
import { s as Card, y as Box } from "./useLayer-CUKYjJYq.js";
|
|
6
|
+
import { n as Text, t as Stack } from "./stack-SbGBZ0x3.js";
|
|
7
|
+
import { t as Button } from "./button-Wii-24Xu.js";
|
|
8
|
+
import { t as Popover } from "./popover-DR6UQQvq.js";
|
|
9
9
|
import { c } from "react/compiler-runtime";
|
|
10
10
|
import { ChevronDownIcon } from "@sanity/icons/ChevronDown";
|
|
11
11
|
import { SpinnerIcon } from "@sanity/icons/Spinner";
|
|
@@ -61,7 +61,7 @@ function autocompleteReducer(state, msg) {
|
|
|
61
61
|
query: null
|
|
62
62
|
} : msg.type === "root/open" ? {
|
|
63
63
|
...state,
|
|
64
|
-
query: state.query
|
|
64
|
+
query: state.query ?? msg.query
|
|
65
65
|
} : msg.type === "root/setActiveValue" ? {
|
|
66
66
|
...state,
|
|
67
67
|
activeValue: msg.value,
|
package/dist/autocomplete.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"autocomplete.js","names":["() => {\n // Calling the `onSelect` in a timeout is a fix to\n // allow the `click` event to propagate in some cases\n setTimeout(() => {\n onSelect(value)\n }, 0)\n }","useCallback(() => {\n // Calling the `onSelect` in a timeout is a fix to\n // allow the `click` event to propagate in some cases\n setTimeout(() => {\n onSelect(value)\n }, 0)\n }, [onSelect, value])","(event: React.KeyboardEvent<HTMLLIElement>) => {\n if (event.key === 'Enter' && !_isEnterToClickElement(event.currentTarget)) {\n handleClick()\n }\n }","useCallback(\n (event: React.KeyboardEvent<HTMLLIElement>) => {\n if (event.key === 'Enter' && !_isEnterToClickElement(event.currentTarget)) {\n handleClick()\n }\n },\n [handleClick],\n )","<li\n aria-selected={selected}\n data-ui=\"AutocompleteOption\"\n id={id}\n // oxlint-disable-next-line no-noninteractive-element-to-interactive-role, prefer-tag-over-role\n role=\"option\"\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n >\n {children}\n </li>","border = true","fontSize = 2","listBox = EMPTY_RECORD","paddingProp = 3","popover = EMPTY_RECORD","radius = 2","renderValue = DEFAULT_RENDER_VALUE","{\n activeValue: valueProp || null,\n focused: false,\n listFocused: false,\n query: null,\n value: valueProp || null,\n }","valueProp || null","({value}: BaseAutocompleteOption) => (\n <Card data-as=\"button\" padding={paddingProp} radius={2} tone=\"inherit\">\n <Text size={fontSize} textOverflow=\"ellipsis\">\n {value}\n </Text>\n </Card>\n )","{value}: BaseAutocompleteOption","value","useCallback(\n ({value}: BaseAutocompleteOption) => (\n <Card data-as=\"button\" padding={paddingProp} radius={2} tone=\"inherit\">\n <Text size={fontSize} textOverflow=\"ellipsis\">\n {value}\n </Text>\n </Card>\n ),\n [fontSize, paddingProp],\n )","() => inputElement","[inputElement]","value !== null ? options.find((o) => o.value === value) : undefined","useMemo(\n () => (value !== null ? options.find((o) => o.value === value) : undefined),\n [options, value],\n )","options.filter((option) => (query ? filterOption(query, option) : true))","(option) => (query ? filterOption(query, option) : true)","useMemo(\n () => options.filter((option) => (query ? filterOption(query, option) : true)),\n [filterOption, options, query],\n )","(event: FocusEvent<HTMLInputElement>) => {\n setTimeout(() => {\n // NOTE: This is a workaround for a bug that may happen in Chrome (clicking the scrollbar\n // closes the results in certain situations):\n // - Do not handle blur if the mouse is within the popover\n if (popoverMouseWithinRef.current) {\n return\n }\n\n const elements: HTMLElement[] = (relatedElements || []).concat(\n rootElementRef.current ? [rootElementRef.current] : [],\n resultsPopoverElementRef.current ? [resultsPopoverElementRef.current] : [],\n )\n\n let focusInside = false\n\n if (document.activeElement) {\n for (const e of elements) {\n if (e === document.activeElement || e.contains(document.activeElement)) {\n focusInside = true\n break\n }\n }\n }\n\n // oxlint-disable-next-line no-unnecessary-boolean-literal-compare\n if (focusInside === false) {\n dispatch({type: 'root/blur'})\n popoverMouseWithinRef.current = false\n if (onQueryChange) onQueryChange(null)\n if (onBlur) onBlur(event)\n }\n }, 0)\n }","useCallback(\n (event: FocusEvent<HTMLInputElement>) => {\n setTimeout(() => {\n // NOTE: This is a workaround for a bug that may happen in Chrome (clicking the scrollbar\n // closes the results in certain situations):\n // - Do not handle blur if the mouse is within the popover\n if (popoverMouseWithinRef.current) {\n return\n }\n\n const elements: HTMLElement[] = (relatedElements || []).concat(\n rootElementRef.current ? [rootElementRef.current] : [],\n resultsPopoverElementRef.current ? [resultsPopoverElementRef.current] : [],\n )\n\n let focusInside = false\n\n if (document.activeElement) {\n for (const e of elements) {\n if (e === document.activeElement || e.contains(document.activeElement)) {\n focusInside = true\n break\n }\n }\n }\n\n // oxlint-disable-next-line no-unnecessary-boolean-literal-compare\n if (focusInside === false) {\n dispatch({type: 'root/blur'})\n popoverMouseWithinRef.current = false\n if (onQueryChange) onQueryChange(null)\n if (onBlur) onBlur(event)\n }\n }, 0)\n },\n [onBlur, onQueryChange, relatedElements],\n )","(event: FocusEvent<HTMLDivElement>) => {\n const listBoxElement = listBoxElementRef.current\n const focusedElement = event.target instanceof HTMLElement ? event.target : null\n const listFocused = listBoxElement?.contains(focusedElement) || false\n\n if (listFocused !== listFocusedRef.current) {\n listFocusedRef.current = listFocused\n\n dispatch({type: 'root/setListFocused', listFocused})\n }\n }","event","listFocused","useCallback((event: FocusEvent<HTMLDivElement>) => {\n const listBoxElement = listBoxElementRef.current\n const focusedElement = event.target instanceof HTMLElement ? event.target : null\n const listFocused = listBoxElement?.contains(focusedElement) || false\n\n if (listFocused !== listFocusedRef.current) {\n listFocusedRef.current = listFocused\n\n dispatch({type: 'root/setListFocused', listFocused})\n }\n }, [])","(v: string) => {\n dispatch({type: 'value/change', value: v})\n\n popoverMouseWithinRef.current = false\n\n if (onSelect) onSelect(v)\n\n valueRef.current = v\n\n if (onChange) onChange(v)\n if (onQueryChange) onQueryChange(null)\n\n inputElementRef.current?.focus()\n }","useCallback(\n (v: string) => {\n dispatch({type: 'value/change', value: v})\n\n popoverMouseWithinRef.current = false\n\n if (onSelect) onSelect(v)\n\n valueRef.current = v\n\n if (onChange) onChange(v)\n if (onQueryChange) onQueryChange(null)\n\n inputElementRef.current?.focus()\n },\n [onChange, onSelect, onQueryChange],\n )","(event: KeyboardEvent<HTMLElement>) => {\n if (event.key === 'ArrowDown') {\n event.preventDefault()\n\n if (!filteredOptionsLen) return\n\n const activeOption = filteredOptions.find((o) => o.value === activeValue)\n const activeIndex = activeOption ? filteredOptions.indexOf(activeOption) : -1\n const nextActiveOption = filteredOptions[(activeIndex + 1) % filteredOptionsLen]\n\n if (nextActiveOption) {\n dispatch({type: 'root/setActiveValue', value: nextActiveOption.value, listFocused: true})\n }\n\n return\n }\n\n if (event.key === 'ArrowUp') {\n event.preventDefault()\n\n if (!filteredOptionsLen) return\n\n const activeOption = filteredOptions.find((o) => o.value === activeValue)\n const activeIndex = activeOption ? filteredOptions.indexOf(activeOption) : -1\n const nextActiveOption =\n filteredOptions[\n activeIndex === -1\n ? filteredOptionsLen - 1\n : (filteredOptionsLen + activeIndex - 1) % filteredOptionsLen\n ]\n\n if (nextActiveOption) {\n dispatch({type: 'root/setActiveValue', value: nextActiveOption.value, listFocused: true})\n }\n\n return\n }\n\n if (event.key === 'Escape') {\n dispatch({type: 'root/escape'})\n popoverMouseWithinRef.current = false\n if (onQueryChange) onQueryChange(null)\n inputElementRef.current?.focus()\n\n return\n }\n\n // oxlint-disable-next-line no-unsafe-type-assertion\n const target = event.target as Node\n const listEl = listBoxElementRef.current\n\n if (\n (listEl === target || listEl?.contains(target)) &&\n !AUTOCOMPLETE_LISTBOX_IGNORE_KEYS.includes(event.key)\n ) {\n inputElementRef.current?.focus()\n\n return\n }\n }","o","activeOption","activeIndex","nextActiveOption","useCallback(\n (event: KeyboardEvent<HTMLElement>) => {\n if (event.key === 'ArrowDown') {\n event.preventDefault()\n\n if (!filteredOptionsLen) return\n\n const activeOption = filteredOptions.find((o) => o.value === activeValue)\n const activeIndex = activeOption ? filteredOptions.indexOf(activeOption) : -1\n const nextActiveOption = filteredOptions[(activeIndex + 1) % filteredOptionsLen]\n\n if (nextActiveOption) {\n dispatch({type: 'root/setActiveValue', value: nextActiveOption.value, listFocused: true})\n }\n\n return\n }\n\n if (event.key === 'ArrowUp') {\n event.preventDefault()\n\n if (!filteredOptionsLen) return\n\n const activeOption = filteredOptions.find((o) => o.value === activeValue)\n const activeIndex = activeOption ? filteredOptions.indexOf(activeOption) : -1\n const nextActiveOption =\n filteredOptions[\n activeIndex === -1\n ? filteredOptionsLen - 1\n : (filteredOptionsLen + activeIndex - 1) % filteredOptionsLen\n ]\n\n if (nextActiveOption) {\n dispatch({type: 'root/setActiveValue', value: nextActiveOption.value, listFocused: true})\n }\n\n return\n }\n\n if (event.key === 'Escape') {\n dispatch({type: 'root/escape'})\n popoverMouseWithinRef.current = false\n if (onQueryChange) onQueryChange(null)\n inputElementRef.current?.focus()\n\n return\n }\n\n // oxlint-disable-next-line no-unsafe-type-assertion\n const target = event.target as Node\n const listEl = listBoxElementRef.current\n\n if (\n (listEl === target || listEl?.contains(target)) &&\n !AUTOCOMPLETE_LISTBOX_IGNORE_KEYS.includes(event.key)\n ) {\n inputElementRef.current?.focus()\n\n return\n }\n },\n [activeValue, filteredOptions, filteredOptionsLen, onQueryChange],\n )","(event: ChangeEvent<HTMLInputElement>) => {\n const nextQuery = event.currentTarget.value\n\n dispatch({type: 'input/change', query: nextQuery})\n\n if (onQueryChange) onQueryChange(nextQuery)\n }","useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const nextQuery = event.currentTarget.value\n\n dispatch({type: 'input/change', query: nextQuery})\n\n if (onQueryChange) onQueryChange(nextQuery)\n },\n [onQueryChange],\n )","() => {\n dispatch({\n type: 'root/open',\n query: value ? renderValue(value, currentOption) : '',\n })\n }","useCallback(() => {\n dispatch({\n type: 'root/open',\n query: value ? renderValue(value, currentOption) : '',\n })\n }, [currentOption, renderValue, value])","(event: FocusEvent<HTMLInputElement>) => {\n if (!focused) {\n dispatch({type: 'input/focus'})\n\n if (onFocus) onFocus(event)\n if (openOnFocus) dispatchOpen()\n }\n }","useCallback(\n (event: FocusEvent<HTMLInputElement>) => {\n if (!focused) {\n dispatch({type: 'input/focus'})\n\n if (onFocus) onFocus(event)\n if (openOnFocus) dispatchOpen()\n }\n },\n [focused, onFocus, openOnFocus, dispatchOpen],\n )","() => {\n popoverMouseWithinRef.current = true\n }","useCallback(() => {\n popoverMouseWithinRef.current = true\n }, [])","() => {\n popoverMouseWithinRef.current = false\n }","useCallback(() => {\n popoverMouseWithinRef.current = false\n }, [])","() => {\n dispatch({type: 'root/clear'})\n valueRef.current = ''\n if (onChange) onChange('')\n if (onQueryChange) onQueryChange(null)\n inputElementRef.current?.focus()\n }","useCallback(() => {\n dispatch({type: 'root/clear'})\n valueRef.current = ''\n if (onChange) onChange('')\n if (onQueryChange) onQueryChange(null)\n inputElementRef.current?.focus()\n }, [onChange, onQueryChange])","() => {\n dispatch({type: 'input/focus'})\n }","useCallback(() => {\n dispatch({type: 'input/focus'})\n }, [])","() => {\n // If `valueProp` changed\n if (valueProp !== valuePropRef.current) {\n valuePropRef.current = valueProp\n\n if (valueProp !== undefined) {\n dispatch({type: 'value/change', value: valueProp})\n valueRef.current = valueProp\n }\n\n return\n }\n\n // If `valueProp` is not equal to `value`\n if (valueProp !== valueRef.current) {\n valueRef.current = valueProp || null\n\n dispatch({type: 'value/change', value: valueProp || null})\n }\n }","[valueProp]","() => {\n if (!focused && valueRef.current) {\n dispatch({type: 'root/setActiveValue', value: valueRef.current})\n }\n }","[focused]","() => {\n const listElement = listBoxElementRef.current\n\n if (!listElement) return\n\n const activeOption = filteredOptions.find((o) => o.value === activeValue)\n\n if (activeOption) {\n const activeIndex = filteredOptions.indexOf(activeOption)\n // oxlint-disable-next-line no-unsafe-type-assertion\n const activeItemElement = listElement.childNodes[activeIndex] as HTMLLIElement | undefined\n\n if (activeItemElement) {\n if (_hasFocus(activeItemElement)) {\n // already focused\n return\n }\n\n focusFirstDescendant(activeItemElement)\n }\n }\n }","[activeValue, filteredOptions]","useMemo(() => {\n if (!loading && !disabled && value) {\n return {\n 'aria-label': 'Clear',\n 'onFocus': handleClearButtonFocus,\n }\n }\n\n return undefined\n }, [disabled, handleClearButtonFocus, loading, value])","{\n 'aria-label': 'Clear',\n 'onFocus': handleClearButtonFocus,\n }","(v) => {\n if (v === 0) return 0\n if (v === 1) return 1\n if (v === 2) return 1\n\n return v - 2\n }","(v) => Math.max(v - 1, 0)","(event: MouseEvent<HTMLButtonElement>) => {\n dispatchOpen()\n\n if (openButtonProps.onClick) openButtonProps.onClick(event)\n\n _raf(() => inputElementRef.current?.focus())\n }","openButtonProps.onClick","useCallback(\n (event: MouseEvent<HTMLButtonElement>) => {\n dispatchOpen()\n\n if (openButtonProps.onClick) openButtonProps.onClick(event)\n\n _raf(() => inputElementRef.current?.focus())\n },\n [openButtonProps, dispatchOpen],\n )","!disabled && !readOnly && openButton ? (\n <Box aria-hidden={expanded} padding={openButtonBoxPadding}>\n <Button\n aria-label=\"Open\"\n disabled={expanded}\n fontSize={fontSize}\n icon={ChevronDownIcon}\n mode=\"bleed\"\n padding={openButtonPadding}\n {...openButtonProps}\n onClick={handleOpenClick}\n />\n </Box>\n ) : undefined","useMemo(\n () =>\n !disabled && !readOnly && openButton ? (\n <Box aria-hidden={expanded} padding={openButtonBoxPadding}>\n <Button\n aria-label=\"Open\"\n disabled={expanded}\n fontSize={fontSize}\n icon={ChevronDownIcon}\n mode=\"bleed\"\n padding={openButtonPadding}\n {...openButtonProps}\n onClick={handleOpenClick}\n />\n </Box>\n ) : undefined,\n [\n disabled,\n expanded,\n fontSize,\n handleOpenClick,\n openButton,\n openButtonBoxPadding,\n openButtonPadding,\n openButtonProps,\n readOnly,\n ],\n )","useMemo(() => {\n if (query === null) {\n if (value !== null) {\n return renderValue(value, currentOption)\n }\n\n return ''\n }\n\n return query\n }, [currentOption, query, renderValue, value])","renderValue(value, currentOption)","(event: KeyboardEvent<HTMLDivElement>) => {\n // If the focus is currently in the list, move focus to the input element\n if (event.key === 'Tab') {\n if (listFocused) inputElementRef.current?.focus()\n }\n }","useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n // If the focus is currently in the list, move focus to the input element\n if (event.key === 'Tab') {\n if (listFocused) inputElementRef.current?.focus()\n }\n },\n [listFocused],\n )","useMemo(() => {\n if (filteredOptions.length === 0) return null\n\n return (\n <Box\n data-ui=\"AutoComplete__results\"\n onKeyDown={handleListBoxKeyDown}\n padding={1}\n {...listBox}\n className={clsx(autocompleteListBox, listBox?.className)}\n tabIndex={-1}\n >\n <Stack\n as=\"ul\"\n aria-multiselectable={false}\n data-ui=\"AutoComplete__resultsList\"\n id={listBoxId}\n ref={listBoxElementRef}\n // oxlint-disable-next-line prefer-tag-over-role\n role=\"listbox\"\n gap={1}\n >\n {filteredOptions.map((option) => {\n const active =\n activeValue !== null ? option.value === activeValue : currentOption === option\n\n return (\n <AutocompleteOption\n key={option.value}\n id={`${id}-option-${option.value}`}\n onSelect={handleOptionSelect}\n selected={active}\n value={option.value}\n >\n {cloneElement(renderOption(option), {\n disabled: loading,\n selected: active,\n tabIndex: listFocused && active ? 0 : -1,\n })}\n </AutocompleteOption>\n )\n })}\n </Stack>\n </Box>\n )\n }, [\n activeValue,\n currentOption,\n filteredOptions,\n handleOptionSelect,\n handleListBoxKeyDown,\n id,\n listBox,\n listBoxId,\n listFocused,\n loading,\n renderOption,\n ])","clsx(autocompleteListBox, listBox?.className)","listBox?.className","filteredOptions.map((option) => {\n const active =\n activeValue !== null ? option.value === activeValue : currentOption === option\n\n return (\n <AutocompleteOption\n key={option.value}\n id={`${id}-option-${option.value}`}\n onSelect={handleOptionSelect}\n selected={active}\n value={option.value}\n >\n {cloneElement(renderOption(option), {\n disabled: loading,\n selected: active,\n tabIndex: listFocused && active ? 0 : -1,\n })}\n </AutocompleteOption>\n )\n })","(option) => {\n const active =\n activeValue !== null ? option.value === activeValue : currentOption === option\n\n return (\n <AutocompleteOption\n key={option.value}\n id={`${id}-option-${option.value}`}\n onSelect={handleOptionSelect}\n selected={active}\n value={option.value}\n >\n {cloneElement(renderOption(option), {\n disabled: loading,\n selected: active,\n tabIndex: listFocused && active ? 0 : -1,\n })}\n </AutocompleteOption>\n )\n }","option","<Stack\n as=\"ul\"\n aria-multiselectable={false}\n data-ui=\"AutoComplete__resultsList\"\n id={listBoxId}\n ref={listBoxElementRef}\n // oxlint-disable-next-line prefer-tag-over-role\n role=\"listbox\"\n gap={1}\n >\n {filteredOptions.map((option) => {\n const active =\n activeValue !== null ? option.value === activeValue : currentOption === option\n\n return (\n <AutocompleteOption\n key={option.value}\n id={`${id}-option-${option.value}`}\n onSelect={handleOptionSelect}\n selected={active}\n value={option.value}\n >\n {cloneElement(renderOption(option), {\n disabled: loading,\n selected: active,\n tabIndex: listFocused && active ? 0 : -1,\n })}\n </AutocompleteOption>\n )\n })}\n </Stack>","<Box\n data-ui=\"AutoComplete__results\"\n onKeyDown={handleListBoxKeyDown}\n padding={1}\n {...listBox}\n className={clsx(autocompleteListBox, listBox?.className)}\n tabIndex={-1}\n >\n <Stack\n as=\"ul\"\n aria-multiselectable={false}\n data-ui=\"AutoComplete__resultsList\"\n id={listBoxId}\n ref={listBoxElementRef}\n // oxlint-disable-next-line prefer-tag-over-role\n role=\"listbox\"\n gap={1}\n >\n {filteredOptions.map((option) => {\n const active =\n activeValue !== null ? option.value === activeValue : currentOption === option\n\n return (\n <AutocompleteOption\n key={option.value}\n id={`${id}-option-${option.value}`}\n onSelect={handleOptionSelect}\n selected={active}\n value={option.value}\n >\n {cloneElement(renderOption(option), {\n disabled: loading,\n selected: active,\n tabIndex: listFocused && active ? 0 : -1,\n })}\n </AutocompleteOption>\n )\n })}\n </Stack>\n </Box>","useMemo(() => {\n if (renderPopover) {\n return (\n <RenderPopover\n content={content}\n hidden={!expanded}\n inputElement={inputElement}\n onMouseEnter={handlePopoverMouseEnter}\n onMouseLeave={handlePopoverMouseLeave}\n resultsPopoverElementRef={resultsPopoverElementRef}\n renderPopover={renderPopover}\n />\n )\n }\n\n if (filteredOptionsLen === 0) {\n return null\n }\n\n return (\n <Popover\n arrow={false}\n constrainSize\n content={content}\n fallbackPlacements={AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS}\n matchReferenceWidth\n onMouseEnter={handlePopoverMouseEnter}\n onMouseLeave={handlePopoverMouseLeave}\n open={expanded}\n overflow=\"auto\"\n placement={AUTOCOMPLETE_POPOVER_PLACEMENT}\n portal\n radius={radius}\n ref={resultsPopoverElementRef}\n referenceElement={inputElement}\n {...popover}\n />\n )\n }, [\n content,\n expanded,\n filteredOptionsLen,\n handlePopoverMouseEnter,\n handlePopoverMouseLeave,\n inputElement,\n popover,\n radius,\n renderPopover,\n ])","<RenderPopover\n content={content}\n hidden={!expanded}\n inputElement={inputElement}\n onMouseEnter={handlePopoverMouseEnter}\n onMouseLeave={handlePopoverMouseLeave}\n resultsPopoverElementRef={resultsPopoverElementRef}\n renderPopover={renderPopover}\n />","!expanded","<Popover\n arrow={false}\n constrainSize\n content={content}\n fallbackPlacements={AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS}\n matchReferenceWidth\n onMouseEnter={handlePopoverMouseEnter}\n onMouseLeave={handlePopoverMouseLeave}\n open={expanded}\n overflow=\"auto\"\n placement={AUTOCOMPLETE_POPOVER_PLACEMENT}\n portal\n radius={radius}\n ref={resultsPopoverElementRef}\n referenceElement={inputElement}\n {...popover}\n />","loading && <SpinnerIcon className={spinnerIcon} />","<TextInput\n {...restProps}\n aria-activedescendant={activeItemId}\n aria-autocomplete=\"list\"\n aria-expanded={expanded}\n aria-owns={listBoxId}\n autoCapitalize=\"off\"\n autoComplete=\"off\"\n autoCorrect=\"off\"\n border={border}\n clearButton={clearButton}\n customValidity={customValidity}\n disabled={disabled}\n fontSize={fontSize}\n icon={icon}\n iconRight={loading && <SpinnerIcon className={spinnerIcon} />}\n id={id}\n inputMode=\"search\"\n onChange={handleInputChange}\n onClear={handleClearButtonClick}\n onFocus={handleInputFocus}\n padding={padding}\n prefix={prefix}\n radius={radius}\n readOnly={readOnly}\n ref={setInputElement}\n // oxlint-disable-next-line prefer-tag-over-role, role-has-required-aria-props\n role=\"combobox\"\n spellCheck={false}\n suffix={suffix || openButtonNode}\n value={inputValue}\n />","suffix || openButtonNode","<div\n className={autocomplete}\n data-ui=\"Autocomplete\"\n onBlur={handleRootBlur}\n onFocus={handleRootFocus}\n onKeyDown={handleRootKeyDown}\n ref={rootElementRef}\n >\n <TextInput\n {...restProps}\n aria-activedescendant={activeItemId}\n aria-autocomplete=\"list\"\n aria-expanded={expanded}\n aria-owns={listBoxId}\n autoCapitalize=\"off\"\n autoComplete=\"off\"\n autoCorrect=\"off\"\n border={border}\n clearButton={clearButton}\n customValidity={customValidity}\n disabled={disabled}\n fontSize={fontSize}\n icon={icon}\n iconRight={loading && <SpinnerIcon className={spinnerIcon} />}\n id={id}\n inputMode=\"search\"\n onChange={handleInputChange}\n onClear={handleClearButtonClick}\n onFocus={handleInputFocus}\n padding={padding}\n prefix={prefix}\n radius={radius}\n readOnly={readOnly}\n ref={setInputElement}\n // oxlint-disable-next-line prefer-tag-over-role, role-has-required-aria-props\n role=\"combobox\"\n spellCheck={false}\n suffix={suffix || openButtonNode}\n value={inputValue}\n />\n {results}\n </div>","v"],"sources":["../src/core/components/autocomplete/autocompleteOption.tsx","../src/core/components/autocomplete/autocompleteReducer.ts","../src/core/components/autocomplete/constants.ts","../src/core/components/autocomplete/autocomplete.css.ts","../src/core/components/autocomplete/autocomplete.tsx"],"sourcesContent":["import {useCallback} from 'react'\n\nimport {_isEnterToClickElement} from '../../helpers/element'\n\nexport interface AutocompleteOptionProps {\n children: React.ReactNode\n id: string\n onSelect: (v: string) => void\n selected: boolean\n value: string\n}\n\nexport function AutocompleteOption(props: AutocompleteOptionProps): React.JSX.Element {\n const {children, id, onSelect, selected, value} = props\n\n const handleClick = useCallback(() => {\n // Calling the `onSelect` in a timeout is a fix to\n // allow the `click` event to propagate in some cases\n setTimeout(() => {\n onSelect(value)\n }, 0)\n }, [onSelect, value])\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLLIElement>) => {\n if (event.key === 'Enter' && !_isEnterToClickElement(event.currentTarget)) {\n handleClick()\n }\n },\n [handleClick],\n )\n\n return (\n <li\n aria-selected={selected}\n data-ui=\"AutocompleteOption\"\n id={id}\n // oxlint-disable-next-line no-noninteractive-element-to-interactive-role, prefer-tag-over-role\n role=\"option\"\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n >\n {children}\n </li>\n )\n}\n","import {AutocompleteMsg, AutocompleteState} from './types'\n\n/**\n * @internal\n */\nexport function autocompleteReducer(\n state: AutocompleteState,\n msg: AutocompleteMsg,\n): AutocompleteState {\n if (msg.type === 'input/change') {\n return {...state, activeValue: null, focused: true, query: msg.query}\n }\n\n if (msg.type === 'input/focus') {\n return {...state, focused: true}\n }\n\n if (msg.type === 'root/blur') {\n return {...state, focused: false, query: null}\n }\n\n if (msg.type === 'root/clear') {\n return {...state, activeValue: null, query: null, value: null}\n }\n\n if (msg.type === 'root/escape') {\n return {...state, focused: false, query: null}\n }\n\n if (msg.type === 'root/open') {\n return {...state, query: state.query || msg.query}\n }\n\n if (msg.type === 'root/setActiveValue') {\n return {...state, activeValue: msg.value, listFocused: msg.listFocused || state.listFocused}\n }\n\n if (msg.type === 'root/setListFocused') {\n return {...state, listFocused: msg.listFocused}\n }\n\n if (msg.type === 'value/change') {\n return {...state, activeValue: msg.value, query: null, value: msg.value}\n }\n\n return state\n}\n","import {Placement} from '../../types/placement'\n\n/**\n * @internal\n */\nexport const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [\n 'Control',\n 'Shift',\n 'Alt',\n 'Enter',\n 'Home',\n 'End',\n 'PageUp',\n 'PageDown',\n 'Meta',\n 'Tab',\n 'CapsLock',\n]\n\n/**\n * @internal\n */\nexport const AUTOCOMPLETE_POPOVER_PLACEMENT: Placement = 'bottom-start'\n\n/**\n * @internal\n */\nexport const AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS: Placement[] = ['bottom-start', 'top-start']\n","import {globalStyle, style} from '@vanilla-extract/css'\n\nexport const autocomplete = style({\n lineHeight: 0,\n})\n\nexport const autocompleteListBox = style({})\n\nglobalStyle(`${autocompleteListBox} > ul`, {\n listStyle: 'none',\n padding: 0,\n margin: 0,\n})\n","import {ChevronDownIcon} from '@sanity/icons/ChevronDown'\nimport {SpinnerIcon} from '@sanity/icons/Spinner'\nimport {clsx} from 'clsx/lite'\nimport {\n ChangeEvent,\n cloneElement,\n ElementType,\n FocusEvent,\n HTMLProps,\n KeyboardEvent,\n MouseEvent,\n ReactNode,\n Ref,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useReducer,\n useRef,\n useState,\n} from 'react'\n\nimport {EMPTY_ARRAY, EMPTY_RECORD} from '../../constants'\nimport {_raf} from '../../helpers/animation'\nimport {_hasFocus, focusFirstDescendant} from '../../helpers/focus'\nimport {Box, BoxProps} from '../../primitives/box/box'\nimport {Button} from '../../primitives/button/button'\nimport {Card} from '../../primitives/card/card'\nimport {Popover, PopoverProps} from '../../primitives/popover/popover'\nimport {Stack} from '../../primitives/stack/stack'\nimport {Text} from '../../primitives/text/text'\nimport {TextInput} from '../../primitives/textInput/textInput'\nimport {_getArrayProp} from '../../styles/helpers'\nimport {Radius} from '../../types/radius'\nimport {AutocompleteOption} from './autocompleteOption'\nimport {autocompleteReducer} from './autocompleteReducer'\nimport {\n AUTOCOMPLETE_LISTBOX_IGNORE_KEYS,\n AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS,\n AUTOCOMPLETE_POPOVER_PLACEMENT,\n} from './constants'\nimport {AutocompleteOpenButtonProps, BaseAutocompleteOption} from './types'\n\nimport {spinnerIcon} from '../../primitives/spinner/spinner.css'\nimport {autocomplete, autocompleteListBox} from './autocomplete.css'\n\n/**\n * @public\n */\nexport interface AutocompleteProps<Option extends BaseAutocompleteOption = BaseAutocompleteOption> {\n border?: boolean\n customValidity?: string\n filterOption?: (query: string, option: Option) => boolean\n fontSize?: number | number[]\n // oxlint-disable-next-line no-redundant-type-constituents\n icon?: ElementType | ReactNode\n id: string\n /** @beta */\n listBox?: BoxProps\n loading?: boolean\n onChange?: (value: string) => void\n onQueryChange?: (query: string | null) => void\n onSelect?: (value: string) => void\n /** @beta */\n openButton?: boolean | AutocompleteOpenButtonProps\n /** @beta */\n openOnFocus?: boolean\n /** The options to render. */\n options?: Option[]\n padding?: number | number[]\n popover?: Omit<PopoverProps, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'> &\n Omit<HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'ref' | 'width'>\n prefix?: ReactNode\n radius?: Radius | Radius[]\n /** @beta */\n relatedElements?: HTMLElement[]\n /** The callback function for rendering each option. */\n renderOption?: (option: Option) => React.JSX.Element\n /** @beta */\n renderPopover?: (\n props: {\n content: React.JSX.Element | null\n hidden: boolean\n inputElement: HTMLInputElement | null\n onMouseEnter: () => void\n onMouseLeave: () => void\n },\n ref: Ref<HTMLDivElement>,\n ) => ReactNode\n renderValue?: (value: string, option?: Option) => string\n suffix?: ReactNode\n /** The current value. */\n value?: string\n}\n\nconst DEFAULT_RENDER_VALUE = (value: string, option?: BaseAutocompleteOption) =>\n option ? option.value : value\n\nconst DEFAULT_FILTER_OPTION = (query: string, option: BaseAutocompleteOption) =>\n option.value.toLowerCase().indexOf(query.toLowerCase()) > -1\n\n/**\n * The Autocomplete component is typically used for search components.\n * It consists of a text input for writing a query, and properties for rendering suggestions.\n *\n * @public\n */\nexport function Autocomplete<Option extends BaseAutocompleteOption>(\n props: AutocompleteProps<Option> &\n Omit<\n HTMLProps<HTMLInputElement>,\n | 'aria-activedescendant'\n | 'aria-autocomplete'\n | 'aria-expanded'\n | 'aria-owns'\n | 'as'\n | 'autoCapitalize'\n | 'autoComplete'\n | 'autoCorrect'\n | 'id'\n | 'inputMode'\n | 'onChange'\n | 'onSelect'\n | 'popover'\n | 'prefix'\n | 'role'\n | 'spellCheck'\n | 'type'\n | 'value'\n >,\n) {\n const {\n border = true,\n customValidity,\n disabled,\n filterOption: filterOptionProp,\n fontSize = 2,\n icon,\n id,\n listBox = EMPTY_RECORD,\n loading,\n onBlur,\n onChange,\n onFocus,\n onQueryChange,\n onSelect,\n openButton,\n openOnFocus,\n options: optionsProp,\n padding: paddingProp = 3,\n popover = EMPTY_RECORD,\n prefix,\n radius = 2,\n readOnly,\n ref: forwardedRef,\n relatedElements,\n renderOption: renderOptionProp,\n renderPopover,\n renderValue = DEFAULT_RENDER_VALUE,\n suffix,\n value: valueProp,\n ...restProps\n } = props\n\n const [state, dispatch] = useReducer(autocompleteReducer, {\n activeValue: valueProp || null,\n focused: false,\n listFocused: false,\n query: null,\n value: valueProp || null,\n })\n\n const {activeValue, focused, listFocused, query, value} = state\n\n const defaultRenderOption = useCallback(\n ({value}: BaseAutocompleteOption) => (\n <Card data-as=\"button\" padding={paddingProp} radius={2} tone=\"inherit\">\n <Text size={fontSize} textOverflow=\"ellipsis\">\n {value}\n </Text>\n </Card>\n ),\n [fontSize, paddingProp],\n )\n\n const renderOption =\n typeof renderOptionProp === 'function' ? renderOptionProp : defaultRenderOption\n\n const filterOption =\n typeof filterOptionProp === 'function' ? filterOptionProp : DEFAULT_FILTER_OPTION\n\n // Element refs\n const rootElementRef = useRef<HTMLDivElement | null>(null)\n const resultsPopoverElementRef = useRef<HTMLDivElement | null>(null)\n const inputElementRef = useRef<HTMLInputElement | null>(null)\n const listBoxElementRef = useRef<HTMLUListElement | null>(null)\n // Element refs that need to be accessed during render\n const [inputElement, setInputElement] = useState<HTMLInputElement | null>(null)\n\n // Value refs\n const listFocusedRef = useRef(false)\n const valueRef = useRef(value)\n const valuePropRef = useRef(valueProp)\n const popoverMouseWithinRef = useRef(false)\n\n // Forward inputElement state to inputElementRef\n useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n inputElementRef,\n () => inputElement,\n [inputElement],\n )\n // Forward inputElement to parent\n useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n forwardedRef,\n () => inputElement,\n [inputElement],\n )\n\n const listBoxId = `${id}-listbox`\n const options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY\n const padding = _getArrayProp(paddingProp)\n const currentOption = useMemo(\n () => (value !== null ? options.find((o) => o.value === value) : undefined),\n [options, value],\n )\n const filteredOptions = useMemo(\n () => options.filter((option) => (query ? filterOption(query, option) : true)),\n [filterOption, options, query],\n )\n const filteredOptionsLen = filteredOptions.length\n const activeItemId = activeValue ? `${id}-option-${activeValue}` : undefined\n const expanded = (query !== null && loading) || (focused && query !== null)\n\n const handleRootBlur = useCallback(\n (event: FocusEvent<HTMLInputElement>) => {\n setTimeout(() => {\n // NOTE: This is a workaround for a bug that may happen in Chrome (clicking the scrollbar\n // closes the results in certain situations):\n // - Do not handle blur if the mouse is within the popover\n if (popoverMouseWithinRef.current) {\n return\n }\n\n const elements: HTMLElement[] = (relatedElements || []).concat(\n rootElementRef.current ? [rootElementRef.current] : [],\n resultsPopoverElementRef.current ? [resultsPopoverElementRef.current] : [],\n )\n\n let focusInside = false\n\n if (document.activeElement) {\n for (const e of elements) {\n if (e === document.activeElement || e.contains(document.activeElement)) {\n focusInside = true\n break\n }\n }\n }\n\n // oxlint-disable-next-line no-unnecessary-boolean-literal-compare\n if (focusInside === false) {\n dispatch({type: 'root/blur'})\n popoverMouseWithinRef.current = false\n if (onQueryChange) onQueryChange(null)\n if (onBlur) onBlur(event)\n }\n }, 0)\n },\n [onBlur, onQueryChange, relatedElements],\n )\n\n const handleRootFocus = useCallback((event: FocusEvent<HTMLDivElement>) => {\n const listBoxElement = listBoxElementRef.current\n const focusedElement = event.target instanceof HTMLElement ? event.target : null\n const listFocused = listBoxElement?.contains(focusedElement) || false\n\n if (listFocused !== listFocusedRef.current) {\n listFocusedRef.current = listFocused\n\n dispatch({type: 'root/setListFocused', listFocused})\n }\n }, [])\n\n const handleOptionSelect = useCallback(\n (v: string) => {\n dispatch({type: 'value/change', value: v})\n\n popoverMouseWithinRef.current = false\n\n if (onSelect) onSelect(v)\n\n valueRef.current = v\n\n if (onChange) onChange(v)\n if (onQueryChange) onQueryChange(null)\n\n inputElementRef.current?.focus()\n },\n [onChange, onSelect, onQueryChange],\n )\n\n const handleRootKeyDown = useCallback(\n (event: KeyboardEvent<HTMLElement>) => {\n if (event.key === 'ArrowDown') {\n event.preventDefault()\n\n if (!filteredOptionsLen) return\n\n const activeOption = filteredOptions.find((o) => o.value === activeValue)\n const activeIndex = activeOption ? filteredOptions.indexOf(activeOption) : -1\n const nextActiveOption = filteredOptions[(activeIndex + 1) % filteredOptionsLen]\n\n if (nextActiveOption) {\n dispatch({type: 'root/setActiveValue', value: nextActiveOption.value, listFocused: true})\n }\n\n return\n }\n\n if (event.key === 'ArrowUp') {\n event.preventDefault()\n\n if (!filteredOptionsLen) return\n\n const activeOption = filteredOptions.find((o) => o.value === activeValue)\n const activeIndex = activeOption ? filteredOptions.indexOf(activeOption) : -1\n const nextActiveOption =\n filteredOptions[\n activeIndex === -1\n ? filteredOptionsLen - 1\n : (filteredOptionsLen + activeIndex - 1) % filteredOptionsLen\n ]\n\n if (nextActiveOption) {\n dispatch({type: 'root/setActiveValue', value: nextActiveOption.value, listFocused: true})\n }\n\n return\n }\n\n if (event.key === 'Escape') {\n dispatch({type: 'root/escape'})\n popoverMouseWithinRef.current = false\n if (onQueryChange) onQueryChange(null)\n inputElementRef.current?.focus()\n\n return\n }\n\n // oxlint-disable-next-line no-unsafe-type-assertion\n const target = event.target as Node\n const listEl = listBoxElementRef.current\n\n if (\n (listEl === target || listEl?.contains(target)) &&\n !AUTOCOMPLETE_LISTBOX_IGNORE_KEYS.includes(event.key)\n ) {\n inputElementRef.current?.focus()\n\n return\n }\n },\n [activeValue, filteredOptions, filteredOptionsLen, onQueryChange],\n )\n\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const nextQuery = event.currentTarget.value\n\n dispatch({type: 'input/change', query: nextQuery})\n\n if (onQueryChange) onQueryChange(nextQuery)\n },\n [onQueryChange],\n )\n\n const dispatchOpen = useCallback(() => {\n dispatch({\n type: 'root/open',\n query: value ? renderValue(value, currentOption) : '',\n })\n }, [currentOption, renderValue, value])\n\n const handleInputFocus = useCallback(\n (event: FocusEvent<HTMLInputElement>) => {\n if (!focused) {\n dispatch({type: 'input/focus'})\n\n if (onFocus) onFocus(event)\n if (openOnFocus) dispatchOpen()\n }\n },\n [focused, onFocus, openOnFocus, dispatchOpen],\n )\n\n const handlePopoverMouseEnter = useCallback(() => {\n popoverMouseWithinRef.current = true\n }, [])\n\n const handlePopoverMouseLeave = useCallback(() => {\n popoverMouseWithinRef.current = false\n }, [])\n\n const handleClearButtonClick = useCallback(() => {\n dispatch({type: 'root/clear'})\n valueRef.current = ''\n if (onChange) onChange('')\n if (onQueryChange) onQueryChange(null)\n inputElementRef.current?.focus()\n }, [onChange, onQueryChange])\n\n const handleClearButtonFocus = useCallback(() => {\n dispatch({type: 'input/focus'})\n }, [])\n\n // Change the value when `value` prop changes\n useEffect(() => {\n // If `valueProp` changed\n if (valueProp !== valuePropRef.current) {\n valuePropRef.current = valueProp\n\n if (valueProp !== undefined) {\n dispatch({type: 'value/change', value: valueProp})\n valueRef.current = valueProp\n }\n\n return\n }\n\n // If `valueProp` is not equal to `value`\n if (valueProp !== valueRef.current) {\n valueRef.current = valueProp || null\n\n dispatch({type: 'value/change', value: valueProp || null})\n }\n }, [valueProp])\n\n // Reset active item when closing\n useEffect(() => {\n if (!focused && valueRef.current) {\n dispatch({type: 'root/setActiveValue', value: valueRef.current})\n }\n }, [focused])\n\n // Focus the selected item\n useEffect(() => {\n const listElement = listBoxElementRef.current\n\n if (!listElement) return\n\n const activeOption = filteredOptions.find((o) => o.value === activeValue)\n\n if (activeOption) {\n const activeIndex = filteredOptions.indexOf(activeOption)\n // oxlint-disable-next-line no-unsafe-type-assertion\n const activeItemElement = listElement.childNodes[activeIndex] as HTMLLIElement | undefined\n\n if (activeItemElement) {\n if (_hasFocus(activeItemElement)) {\n // already focused\n return\n }\n\n focusFirstDescendant(activeItemElement)\n }\n }\n }, [activeValue, filteredOptions])\n\n const clearButton = useMemo(() => {\n if (!loading && !disabled && value) {\n return {\n 'aria-label': 'Clear',\n 'onFocus': handleClearButtonFocus,\n }\n }\n\n return undefined\n }, [disabled, handleClearButtonFocus, loading, value])\n\n const openButtonBoxPadding = padding.map((v) => {\n if (v === 0) return 0\n if (v === 1) return 1\n if (v === 2) return 1\n\n return v - 2\n })\n const openButtonPadding = padding.map((v) => Math.max(v - 1, 0))\n const openButtonProps: AutocompleteOpenButtonProps =\n typeof openButton === 'object' ? openButton : EMPTY_RECORD\n\n const handleOpenClick = useCallback(\n (event: MouseEvent<HTMLButtonElement>) => {\n dispatchOpen()\n\n if (openButtonProps.onClick) openButtonProps.onClick(event)\n\n _raf(() => inputElementRef.current?.focus())\n },\n [openButtonProps, dispatchOpen],\n )\n\n const openButtonNode = useMemo(\n () =>\n !disabled && !readOnly && openButton ? (\n <Box aria-hidden={expanded} padding={openButtonBoxPadding}>\n <Button\n aria-label=\"Open\"\n disabled={expanded}\n fontSize={fontSize}\n icon={ChevronDownIcon}\n mode=\"bleed\"\n padding={openButtonPadding}\n {...openButtonProps}\n onClick={handleOpenClick}\n />\n </Box>\n ) : undefined,\n [\n disabled,\n expanded,\n fontSize,\n handleOpenClick,\n openButton,\n openButtonBoxPadding,\n openButtonPadding,\n openButtonProps,\n readOnly,\n ],\n )\n\n const inputValue = useMemo(() => {\n if (query === null) {\n if (value !== null) {\n return renderValue(value, currentOption)\n }\n\n return ''\n }\n\n return query\n }, [currentOption, query, renderValue, value])\n\n const handleListBoxKeyDown = useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n // If the focus is currently in the list, move focus to the input element\n if (event.key === 'Tab') {\n if (listFocused) inputElementRef.current?.focus()\n }\n },\n [listFocused],\n )\n\n const content = useMemo(() => {\n if (filteredOptions.length === 0) return null\n\n return (\n <Box\n data-ui=\"AutoComplete__results\"\n onKeyDown={handleListBoxKeyDown}\n padding={1}\n {...listBox}\n className={clsx(autocompleteListBox, listBox?.className)}\n tabIndex={-1}\n >\n <Stack\n as=\"ul\"\n aria-multiselectable={false}\n data-ui=\"AutoComplete__resultsList\"\n id={listBoxId}\n ref={listBoxElementRef}\n // oxlint-disable-next-line prefer-tag-over-role\n role=\"listbox\"\n gap={1}\n >\n {filteredOptions.map((option) => {\n const active =\n activeValue !== null ? option.value === activeValue : currentOption === option\n\n return (\n <AutocompleteOption\n key={option.value}\n id={`${id}-option-${option.value}`}\n onSelect={handleOptionSelect}\n selected={active}\n value={option.value}\n >\n {cloneElement(renderOption(option), {\n disabled: loading,\n selected: active,\n tabIndex: listFocused && active ? 0 : -1,\n })}\n </AutocompleteOption>\n )\n })}\n </Stack>\n </Box>\n )\n }, [\n activeValue,\n currentOption,\n filteredOptions,\n handleOptionSelect,\n handleListBoxKeyDown,\n id,\n listBox,\n listBoxId,\n listFocused,\n loading,\n renderOption,\n ])\n\n const results = useMemo(() => {\n if (renderPopover) {\n return (\n <RenderPopover\n content={content}\n hidden={!expanded}\n inputElement={inputElement}\n onMouseEnter={handlePopoverMouseEnter}\n onMouseLeave={handlePopoverMouseLeave}\n resultsPopoverElementRef={resultsPopoverElementRef}\n renderPopover={renderPopover}\n />\n )\n }\n\n if (filteredOptionsLen === 0) {\n return null\n }\n\n return (\n <Popover\n arrow={false}\n constrainSize\n content={content}\n fallbackPlacements={AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS}\n matchReferenceWidth\n onMouseEnter={handlePopoverMouseEnter}\n onMouseLeave={handlePopoverMouseLeave}\n open={expanded}\n overflow=\"auto\"\n placement={AUTOCOMPLETE_POPOVER_PLACEMENT}\n portal\n radius={radius}\n ref={resultsPopoverElementRef}\n referenceElement={inputElement}\n {...popover}\n />\n )\n }, [\n content,\n expanded,\n filteredOptionsLen,\n handlePopoverMouseEnter,\n handlePopoverMouseLeave,\n inputElement,\n popover,\n radius,\n renderPopover,\n ])\n\n return (\n // The handlers only observe focus and key events bubbling from the input and\n // list box, which carry the roles; the wrapper itself is not interactive.\n // oxlint-disable-next-line no-static-element-interactions\n <div\n className={autocomplete}\n data-ui=\"Autocomplete\"\n onBlur={handleRootBlur}\n onFocus={handleRootFocus}\n onKeyDown={handleRootKeyDown}\n ref={rootElementRef}\n >\n <TextInput\n {...restProps}\n aria-activedescendant={activeItemId}\n aria-autocomplete=\"list\"\n aria-expanded={expanded}\n aria-owns={listBoxId}\n autoCapitalize=\"off\"\n autoComplete=\"off\"\n autoCorrect=\"off\"\n border={border}\n clearButton={clearButton}\n customValidity={customValidity}\n disabled={disabled}\n fontSize={fontSize}\n icon={icon}\n iconRight={loading && <SpinnerIcon className={spinnerIcon} />}\n id={id}\n inputMode=\"search\"\n onChange={handleInputChange}\n onClear={handleClearButtonClick}\n onFocus={handleInputFocus}\n padding={padding}\n prefix={prefix}\n radius={radius}\n readOnly={readOnly}\n ref={setInputElement}\n // oxlint-disable-next-line prefer-tag-over-role, role-has-required-aria-props\n role=\"combobox\"\n spellCheck={false}\n suffix={suffix || openButtonNode}\n value={inputValue}\n />\n {results}\n </div>\n )\n}\n\nfunction RenderPopover({\n renderPopover,\n content,\n hidden,\n inputElement,\n onMouseEnter,\n onMouseLeave,\n resultsPopoverElementRef,\n}: {\n renderPopover: Exclude<AutocompleteProps['renderPopover'], undefined>\n resultsPopoverElementRef: Parameters<Exclude<AutocompleteProps['renderPopover'], undefined>>[1]\n} & Parameters<Exclude<AutocompleteProps['renderPopover'], undefined>>[0]) {\n return renderPopover(\n {\n content,\n hidden,\n inputElement,\n onMouseEnter,\n onMouseLeave,\n },\n resultsPopoverElementRef,\n )\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"autocomplete.js","names":["() => {\n // Calling the `onSelect` in a timeout is a fix to\n // allow the `click` event to propagate in some cases\n setTimeout(() => {\n onSelect(value)\n }, 0)\n }","useCallback(() => {\n // Calling the `onSelect` in a timeout is a fix to\n // allow the `click` event to propagate in some cases\n setTimeout(() => {\n onSelect(value)\n }, 0)\n }, [onSelect, value])","(event: React.KeyboardEvent<HTMLLIElement>) => {\n if (event.key === 'Enter' && !_isEnterToClickElement(event.currentTarget)) {\n handleClick()\n }\n }","useCallback(\n (event: React.KeyboardEvent<HTMLLIElement>) => {\n if (event.key === 'Enter' && !_isEnterToClickElement(event.currentTarget)) {\n handleClick()\n }\n },\n [handleClick],\n )","<li\n aria-selected={selected}\n data-ui=\"AutocompleteOption\"\n id={id}\n // oxlint-disable-next-line no-noninteractive-element-to-interactive-role, prefer-tag-over-role\n role=\"option\"\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n >\n {children}\n </li>","border = true","fontSize = 2","listBox = EMPTY_RECORD","paddingProp = 3","popover = EMPTY_RECORD","radius = 2","renderValue = DEFAULT_RENDER_VALUE","{\n activeValue: valueProp || null,\n focused: false,\n listFocused: false,\n query: null,\n value: valueProp || null,\n }","valueProp || null","({value}: BaseAutocompleteOption) => (\n <Card data-as=\"button\" padding={paddingProp} radius={2} tone=\"inherit\">\n <Text size={fontSize} textOverflow=\"ellipsis\">\n {value}\n </Text>\n </Card>\n )","{value}: BaseAutocompleteOption","value","useCallback(\n ({value}: BaseAutocompleteOption) => (\n <Card data-as=\"button\" padding={paddingProp} radius={2} tone=\"inherit\">\n <Text size={fontSize} textOverflow=\"ellipsis\">\n {value}\n </Text>\n </Card>\n ),\n [fontSize, paddingProp],\n )","() => inputElement","[inputElement]","value !== null ? options.find((o) => o.value === value) : undefined","useMemo(\n () => (value !== null ? options.find((o) => o.value === value) : undefined),\n [options, value],\n )","options.filter((option) => (query ? filterOption(query, option) : true))","(option) => (query ? filterOption(query, option) : true)","useMemo(\n () => options.filter((option) => (query ? filterOption(query, option) : true)),\n [filterOption, options, query],\n )","(event: FocusEvent<HTMLInputElement>) => {\n setTimeout(() => {\n // NOTE: This is a workaround for a bug that may happen in Chrome (clicking the scrollbar\n // closes the results in certain situations):\n // - Do not handle blur if the mouse is within the popover\n if (popoverMouseWithinRef.current) {\n return\n }\n\n const elements: HTMLElement[] = (relatedElements || []).concat(\n rootElementRef.current ? [rootElementRef.current] : [],\n resultsPopoverElementRef.current ? [resultsPopoverElementRef.current] : [],\n )\n\n let focusInside = false\n\n if (document.activeElement) {\n for (const e of elements) {\n if (e === document.activeElement || e.contains(document.activeElement)) {\n focusInside = true\n break\n }\n }\n }\n\n // oxlint-disable-next-line no-unnecessary-boolean-literal-compare\n if (focusInside === false) {\n dispatch({type: 'root/blur'})\n popoverMouseWithinRef.current = false\n if (onQueryChange) onQueryChange(null)\n if (onBlur) onBlur(event)\n }\n }, 0)\n }","useCallback(\n (event: FocusEvent<HTMLInputElement>) => {\n setTimeout(() => {\n // NOTE: This is a workaround for a bug that may happen in Chrome (clicking the scrollbar\n // closes the results in certain situations):\n // - Do not handle blur if the mouse is within the popover\n if (popoverMouseWithinRef.current) {\n return\n }\n\n const elements: HTMLElement[] = (relatedElements || []).concat(\n rootElementRef.current ? [rootElementRef.current] : [],\n resultsPopoverElementRef.current ? [resultsPopoverElementRef.current] : [],\n )\n\n let focusInside = false\n\n if (document.activeElement) {\n for (const e of elements) {\n if (e === document.activeElement || e.contains(document.activeElement)) {\n focusInside = true\n break\n }\n }\n }\n\n // oxlint-disable-next-line no-unnecessary-boolean-literal-compare\n if (focusInside === false) {\n dispatch({type: 'root/blur'})\n popoverMouseWithinRef.current = false\n if (onQueryChange) onQueryChange(null)\n if (onBlur) onBlur(event)\n }\n }, 0)\n },\n [onBlur, onQueryChange, relatedElements],\n )","(event: FocusEvent<HTMLDivElement>) => {\n const listBoxElement = listBoxElementRef.current\n const focusedElement = event.target instanceof HTMLElement ? event.target : null\n const listFocused = listBoxElement?.contains(focusedElement) || false\n\n if (listFocused !== listFocusedRef.current) {\n listFocusedRef.current = listFocused\n\n dispatch({type: 'root/setListFocused', listFocused})\n }\n }","event","listFocused","useCallback((event: FocusEvent<HTMLDivElement>) => {\n const listBoxElement = listBoxElementRef.current\n const focusedElement = event.target instanceof HTMLElement ? event.target : null\n const listFocused = listBoxElement?.contains(focusedElement) || false\n\n if (listFocused !== listFocusedRef.current) {\n listFocusedRef.current = listFocused\n\n dispatch({type: 'root/setListFocused', listFocused})\n }\n }, [])","(v: string) => {\n dispatch({type: 'value/change', value: v})\n\n popoverMouseWithinRef.current = false\n\n if (onSelect) onSelect(v)\n\n valueRef.current = v\n\n if (onChange) onChange(v)\n if (onQueryChange) onQueryChange(null)\n\n inputElementRef.current?.focus()\n }","useCallback(\n (v: string) => {\n dispatch({type: 'value/change', value: v})\n\n popoverMouseWithinRef.current = false\n\n if (onSelect) onSelect(v)\n\n valueRef.current = v\n\n if (onChange) onChange(v)\n if (onQueryChange) onQueryChange(null)\n\n inputElementRef.current?.focus()\n },\n [onChange, onSelect, onQueryChange],\n )","(event: KeyboardEvent<HTMLElement>) => {\n if (event.key === 'ArrowDown') {\n event.preventDefault()\n\n if (!filteredOptionsLen) return\n\n const activeOption = filteredOptions.find((o) => o.value === activeValue)\n const activeIndex = activeOption ? filteredOptions.indexOf(activeOption) : -1\n const nextActiveOption = filteredOptions[(activeIndex + 1) % filteredOptionsLen]\n\n if (nextActiveOption) {\n dispatch({type: 'root/setActiveValue', value: nextActiveOption.value, listFocused: true})\n }\n\n return\n }\n\n if (event.key === 'ArrowUp') {\n event.preventDefault()\n\n if (!filteredOptionsLen) return\n\n const activeOption = filteredOptions.find((o) => o.value === activeValue)\n const activeIndex = activeOption ? filteredOptions.indexOf(activeOption) : -1\n const nextActiveOption =\n filteredOptions[\n activeIndex === -1\n ? filteredOptionsLen - 1\n : (filteredOptionsLen + activeIndex - 1) % filteredOptionsLen\n ]\n\n if (nextActiveOption) {\n dispatch({type: 'root/setActiveValue', value: nextActiveOption.value, listFocused: true})\n }\n\n return\n }\n\n if (event.key === 'Escape') {\n dispatch({type: 'root/escape'})\n popoverMouseWithinRef.current = false\n if (onQueryChange) onQueryChange(null)\n inputElementRef.current?.focus()\n\n return\n }\n\n // oxlint-disable-next-line no-unsafe-type-assertion\n const target = event.target as Node\n const listEl = listBoxElementRef.current\n\n if (\n (listEl === target || listEl?.contains(target)) &&\n !AUTOCOMPLETE_LISTBOX_IGNORE_KEYS.includes(event.key)\n ) {\n inputElementRef.current?.focus()\n\n return\n }\n }","o","activeOption","activeIndex","nextActiveOption","useCallback(\n (event: KeyboardEvent<HTMLElement>) => {\n if (event.key === 'ArrowDown') {\n event.preventDefault()\n\n if (!filteredOptionsLen) return\n\n const activeOption = filteredOptions.find((o) => o.value === activeValue)\n const activeIndex = activeOption ? filteredOptions.indexOf(activeOption) : -1\n const nextActiveOption = filteredOptions[(activeIndex + 1) % filteredOptionsLen]\n\n if (nextActiveOption) {\n dispatch({type: 'root/setActiveValue', value: nextActiveOption.value, listFocused: true})\n }\n\n return\n }\n\n if (event.key === 'ArrowUp') {\n event.preventDefault()\n\n if (!filteredOptionsLen) return\n\n const activeOption = filteredOptions.find((o) => o.value === activeValue)\n const activeIndex = activeOption ? filteredOptions.indexOf(activeOption) : -1\n const nextActiveOption =\n filteredOptions[\n activeIndex === -1\n ? filteredOptionsLen - 1\n : (filteredOptionsLen + activeIndex - 1) % filteredOptionsLen\n ]\n\n if (nextActiveOption) {\n dispatch({type: 'root/setActiveValue', value: nextActiveOption.value, listFocused: true})\n }\n\n return\n }\n\n if (event.key === 'Escape') {\n dispatch({type: 'root/escape'})\n popoverMouseWithinRef.current = false\n if (onQueryChange) onQueryChange(null)\n inputElementRef.current?.focus()\n\n return\n }\n\n // oxlint-disable-next-line no-unsafe-type-assertion\n const target = event.target as Node\n const listEl = listBoxElementRef.current\n\n if (\n (listEl === target || listEl?.contains(target)) &&\n !AUTOCOMPLETE_LISTBOX_IGNORE_KEYS.includes(event.key)\n ) {\n inputElementRef.current?.focus()\n\n return\n }\n },\n [activeValue, filteredOptions, filteredOptionsLen, onQueryChange],\n )","(event: ChangeEvent<HTMLInputElement>) => {\n const nextQuery = event.currentTarget.value\n\n dispatch({type: 'input/change', query: nextQuery})\n\n if (onQueryChange) onQueryChange(nextQuery)\n }","useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const nextQuery = event.currentTarget.value\n\n dispatch({type: 'input/change', query: nextQuery})\n\n if (onQueryChange) onQueryChange(nextQuery)\n },\n [onQueryChange],\n )","() => {\n dispatch({\n type: 'root/open',\n query: value ? renderValue(value, currentOption) : '',\n })\n }","useCallback(() => {\n dispatch({\n type: 'root/open',\n query: value ? renderValue(value, currentOption) : '',\n })\n }, [currentOption, renderValue, value])","(event: FocusEvent<HTMLInputElement>) => {\n if (!focused) {\n dispatch({type: 'input/focus'})\n\n if (onFocus) onFocus(event)\n if (openOnFocus) dispatchOpen()\n }\n }","useCallback(\n (event: FocusEvent<HTMLInputElement>) => {\n if (!focused) {\n dispatch({type: 'input/focus'})\n\n if (onFocus) onFocus(event)\n if (openOnFocus) dispatchOpen()\n }\n },\n [focused, onFocus, openOnFocus, dispatchOpen],\n )","() => {\n popoverMouseWithinRef.current = true\n }","useCallback(() => {\n popoverMouseWithinRef.current = true\n }, [])","() => {\n popoverMouseWithinRef.current = false\n }","useCallback(() => {\n popoverMouseWithinRef.current = false\n }, [])","() => {\n dispatch({type: 'root/clear'})\n valueRef.current = ''\n if (onChange) onChange('')\n if (onQueryChange) onQueryChange(null)\n inputElementRef.current?.focus()\n }","useCallback(() => {\n dispatch({type: 'root/clear'})\n valueRef.current = ''\n if (onChange) onChange('')\n if (onQueryChange) onQueryChange(null)\n inputElementRef.current?.focus()\n }, [onChange, onQueryChange])","() => {\n dispatch({type: 'input/focus'})\n }","useCallback(() => {\n dispatch({type: 'input/focus'})\n }, [])","() => {\n // If `valueProp` changed\n if (valueProp !== valuePropRef.current) {\n valuePropRef.current = valueProp\n\n if (valueProp !== undefined) {\n dispatch({type: 'value/change', value: valueProp})\n valueRef.current = valueProp\n }\n\n return\n }\n\n // If `valueProp` is not equal to `value`\n if (valueProp !== valueRef.current) {\n valueRef.current = valueProp || null\n\n dispatch({type: 'value/change', value: valueProp || null})\n }\n }","[valueProp]","() => {\n if (!focused && valueRef.current) {\n dispatch({type: 'root/setActiveValue', value: valueRef.current})\n }\n }","[focused]","() => {\n const listElement = listBoxElementRef.current\n\n if (!listElement) return\n\n const activeOption = filteredOptions.find((o) => o.value === activeValue)\n\n if (activeOption) {\n const activeIndex = filteredOptions.indexOf(activeOption)\n // oxlint-disable-next-line no-unsafe-type-assertion\n const activeItemElement = listElement.childNodes[activeIndex] as HTMLLIElement | undefined\n\n if (activeItemElement) {\n if (_hasFocus(activeItemElement)) {\n // already focused\n return\n }\n\n focusFirstDescendant(activeItemElement)\n }\n }\n }","[activeValue, filteredOptions]","useMemo(() => {\n if (!loading && !disabled && value) {\n return {\n 'aria-label': 'Clear',\n 'onFocus': handleClearButtonFocus,\n }\n }\n\n return undefined\n }, [disabled, handleClearButtonFocus, loading, value])","{\n 'aria-label': 'Clear',\n 'onFocus': handleClearButtonFocus,\n }","(v) => {\n if (v === 0) return 0\n if (v === 1) return 1\n if (v === 2) return 1\n\n return v - 2\n }","(v) => Math.max(v - 1, 0)","(event: MouseEvent<HTMLButtonElement>) => {\n dispatchOpen()\n\n if (openButtonProps.onClick) openButtonProps.onClick(event)\n\n _raf(() => inputElementRef.current?.focus())\n }","openButtonProps.onClick","useCallback(\n (event: MouseEvent<HTMLButtonElement>) => {\n dispatchOpen()\n\n if (openButtonProps.onClick) openButtonProps.onClick(event)\n\n _raf(() => inputElementRef.current?.focus())\n },\n [openButtonProps, dispatchOpen],\n )","!disabled && !readOnly && openButton ? (\n <Box aria-hidden={expanded} padding={openButtonBoxPadding}>\n <Button\n aria-label=\"Open\"\n disabled={expanded}\n fontSize={fontSize}\n icon={ChevronDownIcon}\n mode=\"bleed\"\n padding={openButtonPadding}\n {...openButtonProps}\n onClick={handleOpenClick}\n />\n </Box>\n ) : undefined","useMemo(\n () =>\n !disabled && !readOnly && openButton ? (\n <Box aria-hidden={expanded} padding={openButtonBoxPadding}>\n <Button\n aria-label=\"Open\"\n disabled={expanded}\n fontSize={fontSize}\n icon={ChevronDownIcon}\n mode=\"bleed\"\n padding={openButtonPadding}\n {...openButtonProps}\n onClick={handleOpenClick}\n />\n </Box>\n ) : undefined,\n [\n disabled,\n expanded,\n fontSize,\n handleOpenClick,\n openButton,\n openButtonBoxPadding,\n openButtonPadding,\n openButtonProps,\n readOnly,\n ],\n )","useMemo(() => {\n if (query === null) {\n if (value !== null) {\n return renderValue(value, currentOption)\n }\n\n return ''\n }\n\n return query\n }, [currentOption, query, renderValue, value])","renderValue(value, currentOption)","(event: KeyboardEvent<HTMLDivElement>) => {\n // If the focus is currently in the list, move focus to the input element\n if (event.key === 'Tab') {\n if (listFocused) inputElementRef.current?.focus()\n }\n }","useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n // If the focus is currently in the list, move focus to the input element\n if (event.key === 'Tab') {\n if (listFocused) inputElementRef.current?.focus()\n }\n },\n [listFocused],\n )","useMemo(() => {\n if (filteredOptions.length === 0) return null\n\n return (\n <Box\n data-ui=\"AutoComplete__results\"\n onKeyDown={handleListBoxKeyDown}\n padding={1}\n {...listBox}\n className={clsx(autocompleteListBox, listBox?.className)}\n tabIndex={-1}\n >\n <Stack\n as=\"ul\"\n aria-multiselectable={false}\n data-ui=\"AutoComplete__resultsList\"\n id={listBoxId}\n ref={listBoxElementRef}\n // oxlint-disable-next-line prefer-tag-over-role\n role=\"listbox\"\n gap={1}\n >\n {filteredOptions.map((option) => {\n const active =\n activeValue !== null ? option.value === activeValue : currentOption === option\n\n return (\n <AutocompleteOption\n key={option.value}\n id={`${id}-option-${option.value}`}\n onSelect={handleOptionSelect}\n selected={active}\n value={option.value}\n >\n {cloneElement(renderOption(option), {\n disabled: loading,\n selected: active,\n tabIndex: listFocused && active ? 0 : -1,\n })}\n </AutocompleteOption>\n )\n })}\n </Stack>\n </Box>\n )\n }, [\n activeValue,\n currentOption,\n filteredOptions,\n handleOptionSelect,\n handleListBoxKeyDown,\n id,\n listBox,\n listBoxId,\n listFocused,\n loading,\n renderOption,\n ])","clsx(autocompleteListBox, listBox?.className)","listBox?.className","filteredOptions.map((option) => {\n const active =\n activeValue !== null ? option.value === activeValue : currentOption === option\n\n return (\n <AutocompleteOption\n key={option.value}\n id={`${id}-option-${option.value}`}\n onSelect={handleOptionSelect}\n selected={active}\n value={option.value}\n >\n {cloneElement(renderOption(option), {\n disabled: loading,\n selected: active,\n tabIndex: listFocused && active ? 0 : -1,\n })}\n </AutocompleteOption>\n )\n })","(option) => {\n const active =\n activeValue !== null ? option.value === activeValue : currentOption === option\n\n return (\n <AutocompleteOption\n key={option.value}\n id={`${id}-option-${option.value}`}\n onSelect={handleOptionSelect}\n selected={active}\n value={option.value}\n >\n {cloneElement(renderOption(option), {\n disabled: loading,\n selected: active,\n tabIndex: listFocused && active ? 0 : -1,\n })}\n </AutocompleteOption>\n )\n }","option","<Stack\n as=\"ul\"\n aria-multiselectable={false}\n data-ui=\"AutoComplete__resultsList\"\n id={listBoxId}\n ref={listBoxElementRef}\n // oxlint-disable-next-line prefer-tag-over-role\n role=\"listbox\"\n gap={1}\n >\n {filteredOptions.map((option) => {\n const active =\n activeValue !== null ? option.value === activeValue : currentOption === option\n\n return (\n <AutocompleteOption\n key={option.value}\n id={`${id}-option-${option.value}`}\n onSelect={handleOptionSelect}\n selected={active}\n value={option.value}\n >\n {cloneElement(renderOption(option), {\n disabled: loading,\n selected: active,\n tabIndex: listFocused && active ? 0 : -1,\n })}\n </AutocompleteOption>\n )\n })}\n </Stack>","<Box\n data-ui=\"AutoComplete__results\"\n onKeyDown={handleListBoxKeyDown}\n padding={1}\n {...listBox}\n className={clsx(autocompleteListBox, listBox?.className)}\n tabIndex={-1}\n >\n <Stack\n as=\"ul\"\n aria-multiselectable={false}\n data-ui=\"AutoComplete__resultsList\"\n id={listBoxId}\n ref={listBoxElementRef}\n // oxlint-disable-next-line prefer-tag-over-role\n role=\"listbox\"\n gap={1}\n >\n {filteredOptions.map((option) => {\n const active =\n activeValue !== null ? option.value === activeValue : currentOption === option\n\n return (\n <AutocompleteOption\n key={option.value}\n id={`${id}-option-${option.value}`}\n onSelect={handleOptionSelect}\n selected={active}\n value={option.value}\n >\n {cloneElement(renderOption(option), {\n disabled: loading,\n selected: active,\n tabIndex: listFocused && active ? 0 : -1,\n })}\n </AutocompleteOption>\n )\n })}\n </Stack>\n </Box>","useMemo(() => {\n if (renderPopover) {\n return (\n <RenderPopover\n content={content}\n hidden={!expanded}\n inputElement={inputElement}\n onMouseEnter={handlePopoverMouseEnter}\n onMouseLeave={handlePopoverMouseLeave}\n resultsPopoverElementRef={resultsPopoverElementRef}\n renderPopover={renderPopover}\n />\n )\n }\n\n if (filteredOptionsLen === 0) {\n return null\n }\n\n return (\n <Popover\n arrow={false}\n constrainSize\n content={content}\n fallbackPlacements={AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS}\n matchReferenceWidth\n onMouseEnter={handlePopoverMouseEnter}\n onMouseLeave={handlePopoverMouseLeave}\n open={expanded}\n overflow=\"auto\"\n placement={AUTOCOMPLETE_POPOVER_PLACEMENT}\n portal\n radius={radius}\n ref={resultsPopoverElementRef}\n referenceElement={inputElement}\n {...popover}\n />\n )\n }, [\n content,\n expanded,\n filteredOptionsLen,\n handlePopoverMouseEnter,\n handlePopoverMouseLeave,\n inputElement,\n popover,\n radius,\n renderPopover,\n ])","<RenderPopover\n content={content}\n hidden={!expanded}\n inputElement={inputElement}\n onMouseEnter={handlePopoverMouseEnter}\n onMouseLeave={handlePopoverMouseLeave}\n resultsPopoverElementRef={resultsPopoverElementRef}\n renderPopover={renderPopover}\n />","!expanded","<Popover\n arrow={false}\n constrainSize\n content={content}\n fallbackPlacements={AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS}\n matchReferenceWidth\n onMouseEnter={handlePopoverMouseEnter}\n onMouseLeave={handlePopoverMouseLeave}\n open={expanded}\n overflow=\"auto\"\n placement={AUTOCOMPLETE_POPOVER_PLACEMENT}\n portal\n radius={radius}\n ref={resultsPopoverElementRef}\n referenceElement={inputElement}\n {...popover}\n />","loading && <SpinnerIcon className={spinnerIcon} />","<TextInput\n {...restProps}\n aria-activedescendant={activeItemId}\n aria-autocomplete=\"list\"\n aria-expanded={expanded}\n aria-owns={listBoxId}\n autoCapitalize=\"off\"\n autoComplete=\"off\"\n autoCorrect=\"off\"\n border={border}\n clearButton={clearButton}\n customValidity={customValidity}\n disabled={disabled}\n fontSize={fontSize}\n icon={icon}\n iconRight={loading && <SpinnerIcon className={spinnerIcon} />}\n id={id}\n inputMode=\"search\"\n onChange={handleInputChange}\n onClear={handleClearButtonClick}\n onFocus={handleInputFocus}\n padding={padding}\n prefix={prefix}\n radius={radius}\n readOnly={readOnly}\n ref={setInputElement}\n // oxlint-disable-next-line prefer-tag-over-role, role-has-required-aria-props\n role=\"combobox\"\n spellCheck={false}\n suffix={suffix || openButtonNode}\n value={inputValue}\n />","suffix || openButtonNode","<div\n className={autocomplete}\n data-ui=\"Autocomplete\"\n onBlur={handleRootBlur}\n onFocus={handleRootFocus}\n onKeyDown={handleRootKeyDown}\n ref={rootElementRef}\n >\n <TextInput\n {...restProps}\n aria-activedescendant={activeItemId}\n aria-autocomplete=\"list\"\n aria-expanded={expanded}\n aria-owns={listBoxId}\n autoCapitalize=\"off\"\n autoComplete=\"off\"\n autoCorrect=\"off\"\n border={border}\n clearButton={clearButton}\n customValidity={customValidity}\n disabled={disabled}\n fontSize={fontSize}\n icon={icon}\n iconRight={loading && <SpinnerIcon className={spinnerIcon} />}\n id={id}\n inputMode=\"search\"\n onChange={handleInputChange}\n onClear={handleClearButtonClick}\n onFocus={handleInputFocus}\n padding={padding}\n prefix={prefix}\n radius={radius}\n readOnly={readOnly}\n ref={setInputElement}\n // oxlint-disable-next-line prefer-tag-over-role, role-has-required-aria-props\n role=\"combobox\"\n spellCheck={false}\n suffix={suffix || openButtonNode}\n value={inputValue}\n />\n {results}\n </div>","v"],"sources":["../src/core/components/autocomplete/autocompleteOption.tsx","../src/core/components/autocomplete/autocompleteReducer.ts","../src/core/components/autocomplete/constants.ts","../src/core/components/autocomplete/autocomplete.css.ts","../src/core/components/autocomplete/autocomplete.tsx"],"sourcesContent":["import {useCallback} from 'react'\n\nimport {_isEnterToClickElement} from '../../helpers/element'\n\nexport interface AutocompleteOptionProps {\n children: React.ReactNode\n id: string\n onSelect: (v: string) => void\n selected: boolean\n value: string\n}\n\nexport function AutocompleteOption(props: AutocompleteOptionProps): React.JSX.Element {\n const {children, id, onSelect, selected, value} = props\n\n const handleClick = useCallback(() => {\n // Calling the `onSelect` in a timeout is a fix to\n // allow the `click` event to propagate in some cases\n setTimeout(() => {\n onSelect(value)\n }, 0)\n }, [onSelect, value])\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLLIElement>) => {\n if (event.key === 'Enter' && !_isEnterToClickElement(event.currentTarget)) {\n handleClick()\n }\n },\n [handleClick],\n )\n\n return (\n <li\n aria-selected={selected}\n data-ui=\"AutocompleteOption\"\n id={id}\n // oxlint-disable-next-line no-noninteractive-element-to-interactive-role, prefer-tag-over-role\n role=\"option\"\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n >\n {children}\n </li>\n )\n}\n","import {AutocompleteMsg, AutocompleteState} from './types'\n\n/**\n * @internal\n */\nexport function autocompleteReducer(\n state: AutocompleteState,\n msg: AutocompleteMsg,\n): AutocompleteState {\n if (msg.type === 'input/change') {\n return {...state, activeValue: null, focused: true, query: msg.query}\n }\n\n if (msg.type === 'input/focus') {\n return {...state, focused: true}\n }\n\n if (msg.type === 'root/blur') {\n return {...state, focused: false, query: null}\n }\n\n if (msg.type === 'root/clear') {\n return {...state, activeValue: null, query: null, value: null}\n }\n\n if (msg.type === 'root/escape') {\n return {...state, focused: false, query: null}\n }\n\n if (msg.type === 'root/open') {\n return {...state, query: state.query ?? msg.query}\n }\n\n if (msg.type === 'root/setActiveValue') {\n return {...state, activeValue: msg.value, listFocused: msg.listFocused || state.listFocused}\n }\n\n if (msg.type === 'root/setListFocused') {\n return {...state, listFocused: msg.listFocused}\n }\n\n if (msg.type === 'value/change') {\n return {...state, activeValue: msg.value, query: null, value: msg.value}\n }\n\n return state\n}\n","import {Placement} from '../../types/placement'\n\n/**\n * @internal\n */\nexport const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [\n 'Control',\n 'Shift',\n 'Alt',\n 'Enter',\n 'Home',\n 'End',\n 'PageUp',\n 'PageDown',\n 'Meta',\n 'Tab',\n 'CapsLock',\n]\n\n/**\n * @internal\n */\nexport const AUTOCOMPLETE_POPOVER_PLACEMENT: Placement = 'bottom-start'\n\n/**\n * @internal\n */\nexport const AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS: Placement[] = ['bottom-start', 'top-start']\n","import {globalStyle, style} from '@vanilla-extract/css'\n\nexport const autocomplete = style({\n lineHeight: 0,\n})\n\nexport const autocompleteListBox = style({})\n\nglobalStyle(`${autocompleteListBox} > ul`, {\n listStyle: 'none',\n padding: 0,\n margin: 0,\n})\n","import {ChevronDownIcon} from '@sanity/icons/ChevronDown'\nimport {SpinnerIcon} from '@sanity/icons/Spinner'\nimport {clsx} from 'clsx/lite'\nimport {\n ChangeEvent,\n cloneElement,\n ElementType,\n FocusEvent,\n HTMLProps,\n KeyboardEvent,\n MouseEvent,\n ReactNode,\n Ref,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useReducer,\n useRef,\n useState,\n} from 'react'\n\nimport {EMPTY_ARRAY, EMPTY_RECORD} from '../../constants'\nimport {_raf} from '../../helpers/animation'\nimport {_hasFocus, focusFirstDescendant} from '../../helpers/focus'\nimport {Box, BoxProps} from '../../primitives/box/box'\nimport {Button} from '../../primitives/button/button'\nimport {Card} from '../../primitives/card/card'\nimport {Popover, PopoverProps} from '../../primitives/popover/popover'\nimport {Stack} from '../../primitives/stack/stack'\nimport {Text} from '../../primitives/text/text'\nimport {TextInput} from '../../primitives/textInput/textInput'\nimport {_getArrayProp} from '../../styles/helpers'\nimport {Radius} from '../../types/radius'\nimport {AutocompleteOption} from './autocompleteOption'\nimport {autocompleteReducer} from './autocompleteReducer'\nimport {\n AUTOCOMPLETE_LISTBOX_IGNORE_KEYS,\n AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS,\n AUTOCOMPLETE_POPOVER_PLACEMENT,\n} from './constants'\nimport {AutocompleteOpenButtonProps, BaseAutocompleteOption} from './types'\n\nimport {spinnerIcon} from '../../primitives/spinner/spinner.css'\nimport {autocomplete, autocompleteListBox} from './autocomplete.css'\n\n/**\n * @public\n */\nexport interface AutocompleteProps<Option extends BaseAutocompleteOption = BaseAutocompleteOption> {\n border?: boolean\n customValidity?: string\n filterOption?: (query: string, option: Option) => boolean\n fontSize?: number | number[]\n // oxlint-disable-next-line no-redundant-type-constituents\n icon?: ElementType | ReactNode\n id: string\n /** @beta */\n listBox?: BoxProps\n loading?: boolean\n onChange?: (value: string) => void\n onQueryChange?: (query: string | null) => void\n onSelect?: (value: string) => void\n /** @beta */\n openButton?: boolean | AutocompleteOpenButtonProps\n /** @beta */\n openOnFocus?: boolean\n /** The options to render. */\n options?: Option[]\n padding?: number | number[]\n popover?: Omit<PopoverProps, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'> &\n Omit<HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'ref' | 'width'>\n prefix?: ReactNode\n radius?: Radius | Radius[]\n /** @beta */\n relatedElements?: HTMLElement[]\n /** The callback function for rendering each option. */\n renderOption?: (option: Option) => React.JSX.Element\n /** @beta */\n renderPopover?: (\n props: {\n content: React.JSX.Element | null\n hidden: boolean\n inputElement: HTMLInputElement | null\n onMouseEnter: () => void\n onMouseLeave: () => void\n },\n ref: Ref<HTMLDivElement>,\n ) => ReactNode\n renderValue?: (value: string, option?: Option) => string\n suffix?: ReactNode\n /** The current value. */\n value?: string\n}\n\nconst DEFAULT_RENDER_VALUE = (value: string, option?: BaseAutocompleteOption) =>\n option ? option.value : value\n\nconst DEFAULT_FILTER_OPTION = (query: string, option: BaseAutocompleteOption) =>\n option.value.toLowerCase().indexOf(query.toLowerCase()) > -1\n\n/**\n * The Autocomplete component is typically used for search components.\n * It consists of a text input for writing a query, and properties for rendering suggestions.\n *\n * @public\n */\nexport function Autocomplete<Option extends BaseAutocompleteOption>(\n props: AutocompleteProps<Option> &\n Omit<\n HTMLProps<HTMLInputElement>,\n | 'aria-activedescendant'\n | 'aria-autocomplete'\n | 'aria-expanded'\n | 'aria-owns'\n | 'as'\n | 'autoCapitalize'\n | 'autoComplete'\n | 'autoCorrect'\n | 'id'\n | 'inputMode'\n | 'onChange'\n | 'onSelect'\n | 'popover'\n | 'prefix'\n | 'role'\n | 'spellCheck'\n | 'type'\n | 'value'\n >,\n) {\n const {\n border = true,\n customValidity,\n disabled,\n filterOption: filterOptionProp,\n fontSize = 2,\n icon,\n id,\n listBox = EMPTY_RECORD,\n loading,\n onBlur,\n onChange,\n onFocus,\n onQueryChange,\n onSelect,\n openButton,\n openOnFocus,\n options: optionsProp,\n padding: paddingProp = 3,\n popover = EMPTY_RECORD,\n prefix,\n radius = 2,\n readOnly,\n ref: forwardedRef,\n relatedElements,\n renderOption: renderOptionProp,\n renderPopover,\n renderValue = DEFAULT_RENDER_VALUE,\n suffix,\n value: valueProp,\n ...restProps\n } = props\n\n const [state, dispatch] = useReducer(autocompleteReducer, {\n activeValue: valueProp || null,\n focused: false,\n listFocused: false,\n query: null,\n value: valueProp || null,\n })\n\n const {activeValue, focused, listFocused, query, value} = state\n\n const defaultRenderOption = useCallback(\n ({value}: BaseAutocompleteOption) => (\n <Card data-as=\"button\" padding={paddingProp} radius={2} tone=\"inherit\">\n <Text size={fontSize} textOverflow=\"ellipsis\">\n {value}\n </Text>\n </Card>\n ),\n [fontSize, paddingProp],\n )\n\n const renderOption =\n typeof renderOptionProp === 'function' ? renderOptionProp : defaultRenderOption\n\n const filterOption =\n typeof filterOptionProp === 'function' ? filterOptionProp : DEFAULT_FILTER_OPTION\n\n // Element refs\n const rootElementRef = useRef<HTMLDivElement | null>(null)\n const resultsPopoverElementRef = useRef<HTMLDivElement | null>(null)\n const inputElementRef = useRef<HTMLInputElement | null>(null)\n const listBoxElementRef = useRef<HTMLUListElement | null>(null)\n // Element refs that need to be accessed during render\n const [inputElement, setInputElement] = useState<HTMLInputElement | null>(null)\n\n // Value refs\n const listFocusedRef = useRef(false)\n const valueRef = useRef(value)\n const valuePropRef = useRef(valueProp)\n const popoverMouseWithinRef = useRef(false)\n\n // Forward inputElement state to inputElementRef\n useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n inputElementRef,\n () => inputElement,\n [inputElement],\n )\n // Forward inputElement to parent\n useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n forwardedRef,\n () => inputElement,\n [inputElement],\n )\n\n const listBoxId = `${id}-listbox`\n const options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY\n const padding = _getArrayProp(paddingProp)\n const currentOption = useMemo(\n () => (value !== null ? options.find((o) => o.value === value) : undefined),\n [options, value],\n )\n const filteredOptions = useMemo(\n () => options.filter((option) => (query ? filterOption(query, option) : true)),\n [filterOption, options, query],\n )\n const filteredOptionsLen = filteredOptions.length\n const activeItemId = activeValue ? `${id}-option-${activeValue}` : undefined\n const expanded = (query !== null && loading) || (focused && query !== null)\n\n const handleRootBlur = useCallback(\n (event: FocusEvent<HTMLInputElement>) => {\n setTimeout(() => {\n // NOTE: This is a workaround for a bug that may happen in Chrome (clicking the scrollbar\n // closes the results in certain situations):\n // - Do not handle blur if the mouse is within the popover\n if (popoverMouseWithinRef.current) {\n return\n }\n\n const elements: HTMLElement[] = (relatedElements || []).concat(\n rootElementRef.current ? [rootElementRef.current] : [],\n resultsPopoverElementRef.current ? [resultsPopoverElementRef.current] : [],\n )\n\n let focusInside = false\n\n if (document.activeElement) {\n for (const e of elements) {\n if (e === document.activeElement || e.contains(document.activeElement)) {\n focusInside = true\n break\n }\n }\n }\n\n // oxlint-disable-next-line no-unnecessary-boolean-literal-compare\n if (focusInside === false) {\n dispatch({type: 'root/blur'})\n popoverMouseWithinRef.current = false\n if (onQueryChange) onQueryChange(null)\n if (onBlur) onBlur(event)\n }\n }, 0)\n },\n [onBlur, onQueryChange, relatedElements],\n )\n\n const handleRootFocus = useCallback((event: FocusEvent<HTMLDivElement>) => {\n const listBoxElement = listBoxElementRef.current\n const focusedElement = event.target instanceof HTMLElement ? event.target : null\n const listFocused = listBoxElement?.contains(focusedElement) || false\n\n if (listFocused !== listFocusedRef.current) {\n listFocusedRef.current = listFocused\n\n dispatch({type: 'root/setListFocused', listFocused})\n }\n }, [])\n\n const handleOptionSelect = useCallback(\n (v: string) => {\n dispatch({type: 'value/change', value: v})\n\n popoverMouseWithinRef.current = false\n\n if (onSelect) onSelect(v)\n\n valueRef.current = v\n\n if (onChange) onChange(v)\n if (onQueryChange) onQueryChange(null)\n\n inputElementRef.current?.focus()\n },\n [onChange, onSelect, onQueryChange],\n )\n\n const handleRootKeyDown = useCallback(\n (event: KeyboardEvent<HTMLElement>) => {\n if (event.key === 'ArrowDown') {\n event.preventDefault()\n\n if (!filteredOptionsLen) return\n\n const activeOption = filteredOptions.find((o) => o.value === activeValue)\n const activeIndex = activeOption ? filteredOptions.indexOf(activeOption) : -1\n const nextActiveOption = filteredOptions[(activeIndex + 1) % filteredOptionsLen]\n\n if (nextActiveOption) {\n dispatch({type: 'root/setActiveValue', value: nextActiveOption.value, listFocused: true})\n }\n\n return\n }\n\n if (event.key === 'ArrowUp') {\n event.preventDefault()\n\n if (!filteredOptionsLen) return\n\n const activeOption = filteredOptions.find((o) => o.value === activeValue)\n const activeIndex = activeOption ? filteredOptions.indexOf(activeOption) : -1\n const nextActiveOption =\n filteredOptions[\n activeIndex === -1\n ? filteredOptionsLen - 1\n : (filteredOptionsLen + activeIndex - 1) % filteredOptionsLen\n ]\n\n if (nextActiveOption) {\n dispatch({type: 'root/setActiveValue', value: nextActiveOption.value, listFocused: true})\n }\n\n return\n }\n\n if (event.key === 'Escape') {\n dispatch({type: 'root/escape'})\n popoverMouseWithinRef.current = false\n if (onQueryChange) onQueryChange(null)\n inputElementRef.current?.focus()\n\n return\n }\n\n // oxlint-disable-next-line no-unsafe-type-assertion\n const target = event.target as Node\n const listEl = listBoxElementRef.current\n\n if (\n (listEl === target || listEl?.contains(target)) &&\n !AUTOCOMPLETE_LISTBOX_IGNORE_KEYS.includes(event.key)\n ) {\n inputElementRef.current?.focus()\n\n return\n }\n },\n [activeValue, filteredOptions, filteredOptionsLen, onQueryChange],\n )\n\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const nextQuery = event.currentTarget.value\n\n dispatch({type: 'input/change', query: nextQuery})\n\n if (onQueryChange) onQueryChange(nextQuery)\n },\n [onQueryChange],\n )\n\n const dispatchOpen = useCallback(() => {\n dispatch({\n type: 'root/open',\n query: value ? renderValue(value, currentOption) : '',\n })\n }, [currentOption, renderValue, value])\n\n const handleInputFocus = useCallback(\n (event: FocusEvent<HTMLInputElement>) => {\n if (!focused) {\n dispatch({type: 'input/focus'})\n\n if (onFocus) onFocus(event)\n if (openOnFocus) dispatchOpen()\n }\n },\n [focused, onFocus, openOnFocus, dispatchOpen],\n )\n\n const handlePopoverMouseEnter = useCallback(() => {\n popoverMouseWithinRef.current = true\n }, [])\n\n const handlePopoverMouseLeave = useCallback(() => {\n popoverMouseWithinRef.current = false\n }, [])\n\n const handleClearButtonClick = useCallback(() => {\n dispatch({type: 'root/clear'})\n valueRef.current = ''\n if (onChange) onChange('')\n if (onQueryChange) onQueryChange(null)\n inputElementRef.current?.focus()\n }, [onChange, onQueryChange])\n\n const handleClearButtonFocus = useCallback(() => {\n dispatch({type: 'input/focus'})\n }, [])\n\n // Change the value when `value` prop changes\n useEffect(() => {\n // If `valueProp` changed\n if (valueProp !== valuePropRef.current) {\n valuePropRef.current = valueProp\n\n if (valueProp !== undefined) {\n dispatch({type: 'value/change', value: valueProp})\n valueRef.current = valueProp\n }\n\n return\n }\n\n // If `valueProp` is not equal to `value`\n if (valueProp !== valueRef.current) {\n valueRef.current = valueProp || null\n\n dispatch({type: 'value/change', value: valueProp || null})\n }\n }, [valueProp])\n\n // Reset active item when closing\n useEffect(() => {\n if (!focused && valueRef.current) {\n dispatch({type: 'root/setActiveValue', value: valueRef.current})\n }\n }, [focused])\n\n // Focus the selected item\n useEffect(() => {\n const listElement = listBoxElementRef.current\n\n if (!listElement) return\n\n const activeOption = filteredOptions.find((o) => o.value === activeValue)\n\n if (activeOption) {\n const activeIndex = filteredOptions.indexOf(activeOption)\n // oxlint-disable-next-line no-unsafe-type-assertion\n const activeItemElement = listElement.childNodes[activeIndex] as HTMLLIElement | undefined\n\n if (activeItemElement) {\n if (_hasFocus(activeItemElement)) {\n // already focused\n return\n }\n\n focusFirstDescendant(activeItemElement)\n }\n }\n }, [activeValue, filteredOptions])\n\n const clearButton = useMemo(() => {\n if (!loading && !disabled && value) {\n return {\n 'aria-label': 'Clear',\n 'onFocus': handleClearButtonFocus,\n }\n }\n\n return undefined\n }, [disabled, handleClearButtonFocus, loading, value])\n\n const openButtonBoxPadding = padding.map((v) => {\n if (v === 0) return 0\n if (v === 1) return 1\n if (v === 2) return 1\n\n return v - 2\n })\n const openButtonPadding = padding.map((v) => Math.max(v - 1, 0))\n const openButtonProps: AutocompleteOpenButtonProps =\n typeof openButton === 'object' ? openButton : EMPTY_RECORD\n\n const handleOpenClick = useCallback(\n (event: MouseEvent<HTMLButtonElement>) => {\n dispatchOpen()\n\n if (openButtonProps.onClick) openButtonProps.onClick(event)\n\n _raf(() => inputElementRef.current?.focus())\n },\n [openButtonProps, dispatchOpen],\n )\n\n const openButtonNode = useMemo(\n () =>\n !disabled && !readOnly && openButton ? (\n <Box aria-hidden={expanded} padding={openButtonBoxPadding}>\n <Button\n aria-label=\"Open\"\n disabled={expanded}\n fontSize={fontSize}\n icon={ChevronDownIcon}\n mode=\"bleed\"\n padding={openButtonPadding}\n {...openButtonProps}\n onClick={handleOpenClick}\n />\n </Box>\n ) : undefined,\n [\n disabled,\n expanded,\n fontSize,\n handleOpenClick,\n openButton,\n openButtonBoxPadding,\n openButtonPadding,\n openButtonProps,\n readOnly,\n ],\n )\n\n const inputValue = useMemo(() => {\n if (query === null) {\n if (value !== null) {\n return renderValue(value, currentOption)\n }\n\n return ''\n }\n\n return query\n }, [currentOption, query, renderValue, value])\n\n const handleListBoxKeyDown = useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n // If the focus is currently in the list, move focus to the input element\n if (event.key === 'Tab') {\n if (listFocused) inputElementRef.current?.focus()\n }\n },\n [listFocused],\n )\n\n const content = useMemo(() => {\n if (filteredOptions.length === 0) return null\n\n return (\n <Box\n data-ui=\"AutoComplete__results\"\n onKeyDown={handleListBoxKeyDown}\n padding={1}\n {...listBox}\n className={clsx(autocompleteListBox, listBox?.className)}\n tabIndex={-1}\n >\n <Stack\n as=\"ul\"\n aria-multiselectable={false}\n data-ui=\"AutoComplete__resultsList\"\n id={listBoxId}\n ref={listBoxElementRef}\n // oxlint-disable-next-line prefer-tag-over-role\n role=\"listbox\"\n gap={1}\n >\n {filteredOptions.map((option) => {\n const active =\n activeValue !== null ? option.value === activeValue : currentOption === option\n\n return (\n <AutocompleteOption\n key={option.value}\n id={`${id}-option-${option.value}`}\n onSelect={handleOptionSelect}\n selected={active}\n value={option.value}\n >\n {cloneElement(renderOption(option), {\n disabled: loading,\n selected: active,\n tabIndex: listFocused && active ? 0 : -1,\n })}\n </AutocompleteOption>\n )\n })}\n </Stack>\n </Box>\n )\n }, [\n activeValue,\n currentOption,\n filteredOptions,\n handleOptionSelect,\n handleListBoxKeyDown,\n id,\n listBox,\n listBoxId,\n listFocused,\n loading,\n renderOption,\n ])\n\n const results = useMemo(() => {\n if (renderPopover) {\n return (\n <RenderPopover\n content={content}\n hidden={!expanded}\n inputElement={inputElement}\n onMouseEnter={handlePopoverMouseEnter}\n onMouseLeave={handlePopoverMouseLeave}\n resultsPopoverElementRef={resultsPopoverElementRef}\n renderPopover={renderPopover}\n />\n )\n }\n\n if (filteredOptionsLen === 0) {\n return null\n }\n\n return (\n <Popover\n arrow={false}\n constrainSize\n content={content}\n fallbackPlacements={AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS}\n matchReferenceWidth\n onMouseEnter={handlePopoverMouseEnter}\n onMouseLeave={handlePopoverMouseLeave}\n open={expanded}\n overflow=\"auto\"\n placement={AUTOCOMPLETE_POPOVER_PLACEMENT}\n portal\n radius={radius}\n ref={resultsPopoverElementRef}\n referenceElement={inputElement}\n {...popover}\n />\n )\n }, [\n content,\n expanded,\n filteredOptionsLen,\n handlePopoverMouseEnter,\n handlePopoverMouseLeave,\n inputElement,\n popover,\n radius,\n renderPopover,\n ])\n\n return (\n // The handlers only observe focus and key events bubbling from the input and\n // list box, which carry the roles; the wrapper itself is not interactive.\n // oxlint-disable-next-line no-static-element-interactions\n <div\n className={autocomplete}\n data-ui=\"Autocomplete\"\n onBlur={handleRootBlur}\n onFocus={handleRootFocus}\n onKeyDown={handleRootKeyDown}\n ref={rootElementRef}\n >\n <TextInput\n {...restProps}\n aria-activedescendant={activeItemId}\n aria-autocomplete=\"list\"\n aria-expanded={expanded}\n aria-owns={listBoxId}\n autoCapitalize=\"off\"\n autoComplete=\"off\"\n autoCorrect=\"off\"\n border={border}\n clearButton={clearButton}\n customValidity={customValidity}\n disabled={disabled}\n fontSize={fontSize}\n icon={icon}\n iconRight={loading && <SpinnerIcon className={spinnerIcon} />}\n id={id}\n inputMode=\"search\"\n onChange={handleInputChange}\n onClear={handleClearButtonClick}\n onFocus={handleInputFocus}\n padding={padding}\n prefix={prefix}\n radius={radius}\n readOnly={readOnly}\n ref={setInputElement}\n // oxlint-disable-next-line prefer-tag-over-role, role-has-required-aria-props\n role=\"combobox\"\n spellCheck={false}\n suffix={suffix || openButtonNode}\n value={inputValue}\n />\n {results}\n </div>\n )\n}\n\nfunction RenderPopover({\n renderPopover,\n content,\n hidden,\n inputElement,\n onMouseEnter,\n onMouseLeave,\n resultsPopoverElementRef,\n}: {\n renderPopover: Exclude<AutocompleteProps['renderPopover'], undefined>\n resultsPopoverElementRef: Parameters<Exclude<AutocompleteProps['renderPopover'], undefined>>[1]\n} & Parameters<Exclude<AutocompleteProps['renderPopover'], undefined>>[0]) {\n return renderPopover(\n {\n content,\n hidden,\n inputElement,\n onMouseEnter,\n onMouseLeave,\n },\n resultsPopoverElementRef,\n )\n}\n"],"mappings":";;;;;;;;;;;;;;AAYA,SAAgB,mBAAmB,OAAmD;gBAC9E,EAAC,UAAU,IAAI,UAAU,UAAU,UAAS,OAElBA;CAI5B,AAAA,EAAA,OAAA,YAAA,EAAA,OAAS,SAJmB,WAAM;EAGpC,iBAAiB;GACf,SAAS,KAAK;EAChB,GAAG,CAAC;CACN,GAFI,EAAA,KAAA,UAAS,EAAA,KAAA;CAJb,IAAM,cAAcC,IASlBC;CAEI,AAAA,EAAA,OAAA,2BAFJ,MAAC,UAA8C;EAC7C,AAAI,MAAM,QAAQ,WAAW,CAAC,uBAAuB,MAAM,aAAa,KACtE,YAAY;CAEhB,GAFI,EAAA,KAAA;CAHN,IAAM,gBAAgBC,IAUpBC;CADF,OAUK,EAAA,OAAA,YAAA,EAAA,OAHQ,eAAA,EAAA,OACE,iBAAA,EAAA,OAJP,MAAA,EAAA,OAFW,YADjB,KAAA,oBAAC,MAAD;EACE,iBAAe;EACf,WAAQ;EACJ;EAEJ,MAAK;EACL,SAAS;EACT,WAAW;EAEV;CACC,CAAA,GADD,EAAA,KAAA,UAHQ,EAAA,KAAA,aACE,EAAA,KAAA,eAJP,EAAA,KAAA,IAFW,EAAA,KAAA,oCADjBA;AAYJ;;;;ACxCA,SAAgB,oBACd,OACA,KACmB;CAqCnB,OApCI,IAAI,SAAS,iBACR;EAAC,GAAG;EAAO,aAAa;EAAM,SAAS;EAAM,OAAO,IAAI;CAAK,IAGlE,IAAI,SAAS,gBACR;EAAC,GAAG;EAAO,SAAS;CAAI,IAG7B,IAAI,SAAS,cACR;EAAC,GAAG;EAAO,SAAS;EAAO,OAAO;CAAI,IAG3C,IAAI,SAAS,eACR;EAAC,GAAG;EAAO,aAAa;EAAM,OAAO;EAAM,OAAO;CAAI,IAG3D,IAAI,SAAS,gBACR;EAAC,GAAG;EAAO,SAAS;EAAO,OAAO;CAAI,IAG3C,IAAI,SAAS,cACR;EAAC,GAAG;EAAO,OAAO,MAAM,SAAS,IAAI;CAAK,IAG/C,IAAI,SAAS,wBACR;EAAC,GAAG;EAAO,aAAa,IAAI;EAAO,aAAa,IAAI,eAAe,MAAM;CAAW,IAGzF,IAAI,SAAS,wBACR;EAAC,GAAG;EAAO,aAAa,IAAI;CAAW,IAG5C,IAAI,SAAS,iBACR;EAAC,GAAG;EAAO,aAAa,IAAI;EAAO,OAAO;EAAM,OAAO,IAAI;CAAK,IAGlE;AACT;;;;ACzCA,MAAa,mCAAmC;CAC9C;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GAUa,2CAAwD,CAAC,gBAAgB,WAAW;;AEoEjG,MAAM,wBAAwB,OAAe,WAC3C,SAAS,OAAO,QAAQ,OAEpB,yBAAyB,OAAe,WAC5C,OAAO,MAAM,YAAY,CAAC,CAAC,QAAQ,MAAM,YAAY,CAAC,IAAI;;;;;;;AAQ5D,SAAgB,aACd,OAsBA;iBAGE,gBACA,UACc,kBAmBT,cAjBL,MACA,IAEA,SACA,QACA,UACA,SACA,eACA,UACA,YACA,aACS,aAGT,QAEA,UAEA,iBACc,kBACd,eAIG,WAFH,QA3BAC,IAIAC,IAGAC,IAUSC,IACTC,IAEAC,IAMAC,IAEO;CAEL,AAAA,EAAA,OAAA,whBA/BE,CACJ,QAAA,IACA,gBACA,UACA,cAAc,kBACd,UAAA,IACA,MACA,IACA,SAAA,IACA,SACA,QACA,UACA,SACA,eACA,UACA,YACA,aACA,SAAS,aACT,SAASH,IACT,SAAA,IACA,QACA,QAAA,IACA,UACA,KAAK,cACL,iBACA,cAAc,kBACd,eACA,aAAA,IACA,QACA,OAAO,WACP,GAAA,aACE;CA9BF,IAAA,SAAA,OAAA,KAAA,KAAAH,IAIA,WAAA,OAAA,KAAA,IAAW,IAAXC,IAGA,UAAA,OAAA,KAAA,IAAU,eAAVC,IAUS,cAAA,OAAA,KAAA,IAAc,IAAdC,IACT,UAAA,OAAA,KAAA,IAAU,eAAVC,IAEA,SAAA,OAAA,KAAA,IAAS,IAATC,IAMA,cAAA,OAAA,KAAA,IAAc,uBAAdC,IAOa,KAAA,aAAa,MAInB,KAAA,aAAa,MALoCC;CAC3CC,AAAAA,EAAAA,QAAAA,MAAAA,EAAAA,QAINA,MALiD,KAAA;EACxD,aAAaA;EACb,SAAS;EACT,aAAa;EACb,OAAO;EACP,OAAOA;CACT,GALeA,EAAAA,MAAAA,IAINA,EAAAA,MAAAA;CALT,IAAM,CAAC,OAAO,YAAY,WAAW,qBAAqBD,EAMzD,GAEK,EAAC,aAAa,SAAS,aAAa,OAAO,UAAS,OAGxDE;CAEgB,AAAA,EAAA,QAAA,YAAA,EAAA,QADkB,eADlC,OAAA,QAAC;EAAC,IAAA,EAAA,OAAA,YAADC;EACC,OAAA,oBAAC,MAAD;GAAM,WAAQ;GAAS,SAAS;GAAa,QAAQ;GAAG,MAAK;GAC3D,UAAA,oBAAC,MAAD;IAAM,MAAM;IAAU,cAAa;IAChCC,UAAAA;GACG,CAAA;EACF,CAAA;CALuB,GAEf,EAAA,MAAA,UADkB,EAAA,MAAA;CASpC,IAAM,eACJ,OAAO,oBAAqB,aAAa,mBAAmB,KAExD,eACJ,OAAO,oBAAqB,aAAa,mBAAmB,uBAGxD,iBAAiB,OAA8B,IAAI,GACnD,2BAA2B,OAA8B,IAAI,GAC7D,kBAAkB,OAAgC,IAAI,GACtD,oBAAoB,OAAgC,IAAI,GAExD,CAAC,cAAc,mBAAmB,SAAkC,IAAI,GAGxE,iBAAiB,OAAO,EAAK,GAC7B,WAAW,OAAO,KAAK,GACvB,eAAe,OAAO,SAAS,GAC/B,wBAAwB,OAAO,EAAK,GAKxCE,KACAC;CAHF,AAEQ,EAAA,QAAA,6CAAN,YAAM,cACN,MAAA,CAAC,YAAY,GADP,EAAA,MAAA,yCAFR,oBACE,iBACAD,KACAC,GACF;CAIED,IAAAA,KACAC;CAHF,AAEQ,EAAA,QAAA,6CAAN,YAAM,cACN,MAAA,CAAC,YAAY,GADP,EAAA,MAAA,yCAFR,oBACE,cACAD,KACAC,GACF;CAEA,IAAM,YAAY,GAAG,GAAG,WAClB,UAAU,MAAM,QAAQ,WAAW,IAAI,cAAc,aACrD,UAAU,cAAc,WAAW,GAEhCC;CAAiB,AAAA,EAAA,QAAA,WAAA,EAAA,QAAjB,SAAU,MAAA,UAAA,OAAgD,KAAA,IAAzC,QAAQ,MAAM,MAAM,EAAE,UAAU,KAAK,GAArC,EAAA,MAAA,SAAjB,EAAA,MAAA;CADT,IAAM,gBAAgBC,KAKdC;CAAoC,IAAA,EAAA,QAAA,gBAAA,EAAA,QAApC,WAAA,EAAA,QAA4B,OAAA;EAAbC,IAAAA;EAAqB,EAAA,QAAA,gBAAA,EAAA,QAAR,SAAb,OAAC,WAAY,UAAQ,aAAa,OAAO,MAAM,GAA1B,EAAA,MAAA,cAAR,EAAA,MAAA,mCAA5B,MAAA,QAAQ,OAAOA,GAAwD,GAAnC,EAAA,MAAA,cAApC,EAAA,MAAA,SAA4B,EAAA,MAAA;;CADpC,IAAM,kBAAkBC,KAIlB,qBAAqB,gBAAgB,QACrC,eAAe,cAAc,GAAG,GAAG,UAAU,gBAAgB,KAAA,GAC7D,WAAY,UAAU,QAAQ,WAAa,WAAW,UAAU,MAGpEC;CA8BU,AAAA,EAAA,QAAA,UAAA,EAAA,QADA,iBAAA,EAAA,QApB2B,mBATrC,OAAC,UAAwC;EACvC,iBAAiB;GAIf,IAAI,sBAAsB,SACxB;GAGF,IAAM,YAA2B,mBAAmB,CAAC,EAAA,CAAG,OACtD,eAAe,UAAU,CAAC,eAAe,OAAO,IAAI,CAAC,GACrD,yBAAyB,UAAU,CAAC,yBAAyB,OAAO,IAAI,CAAC,CAC3E,GAEI,cAAc;GAElB,IAAI,SAAS,eACN;SAAA,IAAM,KAAK,UACd,IAAI,MAAM,SAAS,iBAAiB,EAAE,SAAS,SAAS,aAAa,GAAG;KACtE,cAAc;KACd;IACF;;GAKJ,AAAI,gBAAgB,OAClB,SAAS,EAAC,MAAM,YAAW,CAAC,GAC5B,sBAAsB,UAAU,IAC5B,iBAAe,cAAc,IAAI,GACjC,UAAQ,OAAO,KAAK;EAE5B,GAAG,CAAC;CACN,GAHU,EAAA,MAAA,QADA,EAAA,MAAA,eApB2B,EAAA,MAAA;CAVvC,IAAM,iBAAiBC,KAsCaC;sDAAC,OAAA,YAAsC;EACzE,IAAM,iBAAiB,kBAAkB,SACnC,iBAAiBC,QAAM,kBAAkB,cAAcA,QAAM,SAAS,MACtEC,gBAAc,gBAAgB,SAAS,cAAc,KAAK;EAEhE,AAAIA,kBAAgB,eAAe,YACjC,eAAe,UAAUA,eAEzB,SAAS;GAAC,MAAM;GAAuB,aAAA;EAAW,CAAC;CAEvD;CAVA,IAAM,kBAAkBC,KAatBC;CASM,AAAA,EAAA,QAAA,YAAA,EAAA,QACA,iBAAA,EAAA,QALA,YALN,OAAC,MAAc;EAYb,AAXA,SAAS;GAAC,MAAM;GAAgB,OAAO;EAAC,CAAC,GAEzC,sBAAsB,UAAU,IAE5B,YAAU,SAAS,CAAC,GAExB,SAAS,UAAU,GAEf,YAAU,SAAS,CAAC,GACpB,iBAAe,cAAc,IAAI,GAErC,gBAAgB,SAAS,MAAM;CACjC,GAJM,EAAA,MAAA,UACA,EAAA,MAAA,eALA,EAAA,MAAA;CANR,IAAM,qBAAqBC,KAmBzBC;CAMiE,AAAA,EAAA,QAAA,eAAA,EAAA,QAAxC,mBAAA,EAAA,QAFhB,sBAAA,EAAA,QAqCD,iBAzCR,OAAC,YAAsC;EACrC,IAAIL,QAAM,QAAQ,aAAa;GAG7B,IAFA,QAAM,eAAe,GAEjB,CAAC,oBAAoB;GAEzB,IAAM,eAAe,gBAAgB,MAAM,QAAMM,IAAE,UAAU,WAAW,GAClE,cAAc,eAAe,gBAAgB,QAAQ,YAAY,IAAI,IACrE,mBAAmB,iBAAiB,cAAc,KAAK;GAE7D,AAAI,oBACF,SAAS;IAAC,MAAM;IAAuB,OAAO,iBAAiB;IAAO,aAAa;GAAI,CAAC;GAG1F;EACF;EAEA,IAAIN,QAAM,QAAQ,WAAW;GAG3B,IAFA,QAAM,eAAe,GAEjB,CAAC,oBAAoB;GAEzB,IAAMO,iBAAe,gBAAgB,MAAM,QAAMD,IAAE,UAAU,WAAW,GAClEE,gBAAcD,iBAAe,gBAAgB,QAAQA,cAAY,IAAI,IACrEE,qBACJ,gBACED,kBAAgB,KACZ,qBAAqB,KACpB,qBAAqBA,gBAAc,KAAK;GAGjD,AAAIC,sBACF,SAAS;IAAC,MAAM;IAAuB,OAAOA,mBAAiB;IAAO,aAAa;GAAI,CAAC;GAG1F;EACF;EAEA,IAAIT,QAAM,QAAQ,UAAU;GAI1B,AAHA,SAAS,EAAC,MAAM,cAAa,CAAC,GAC9B,sBAAsB,UAAU,IAC5B,iBAAe,cAAc,IAAI,GACrC,gBAAgB,SAAS,MAAM;GAE/B;EACF;EAGA,IAAM,SAASA,QAAM,QACf,SAAS,kBAAkB;EAEjC,KACG,WAAW,UAAU,QAAQ,SAAS,MAAM,MAC7C,CAAC,iCAAiC,SAASA,QAAM,GAAG,GACpD;GACA,gBAAgB,SAAS,MAAM;GAE/B;EACF;CACF,GArDiE,EAAA,MAAA,aAAxC,EAAA,MAAA,iBAFhB,EAAA,MAAA,oBAqCD,EAAA,MAAA;CA1CV,IAAM,oBAAoBU,KAiExBC;CAKM,AAAA,EAAA,QAAA,+BALN,OAAC,YAAyC;EACxC,IAAM,YAAYX,QAAM,cAAc;EAItC,AAFA,SAAS;GAAC,MAAM;GAAgB,OAAO;EAAS,CAAC,GAE7C,iBAAe,cAAc,SAAS;CAC5C,GADM,EAAA,MAAA;CANR,IAAM,oBAAoBY,KAWOC;CAGK,AAAA,EAAA,QAAA,iBAAA,EAAA,QAAnB,eAAA,EAAA,QAAR,SAHsB,YAAM;EACrC,SAAS;GACP,MAAM;GACN,OAAO,QAAQ,YAAY,OAAO,aAAa,IAAI;EACrD,CAAC;CACH,GAFsC,EAAA,MAAA,eAAnB,EAAA,MAAA,aAAR,EAAA,MAAA;CAHX,IAAM,eAAeC,KAQnBC;CAKqB,AAAA,EAAA,QAAA,gBAAA,EAAA,QAJd,WAAA,EAAA,QAGC,WAAA,EAAA,QACA,eALR,OAAC,YAAwC;EACvC,AAAK,YACH,SAAS,EAAC,MAAM,cAAa,CAAC,GAE1B,WAAS,QAAQf,OAAK,GACtB,eAAa,aAAa;CAElC,GAFqB,EAAA,MAAA,cAJd,EAAA,MAAA,SAGC,EAAA,MAAA,SACA,EAAA,MAAA;CANV,IAAM,mBAAmBgB,KAYmBC;sDAAM,YAAA;EAChD,sBAAsB,UAAU;CAClC;CAFA,IAAM,0BAA0BC,KAIYC;sDAAM,YAAA;EAChD,sBAAsB,UAAU;CAClC;CAFA,IAAM,0BAA0BC,KAIWC;CAGrC,AAAA,EAAA,QAAA,YAAA,EAAA,QACA,iBAJqC,YAAM;EAK/C,AAJA,SAAS,EAAC,MAAM,aAAY,CAAC,GAC7B,SAAS,UAAU,IACf,YAAU,SAAS,EAAE,GACrB,iBAAe,cAAc,IAAI,GACrC,gBAAgB,SAAS,MAAM;CACjC,GAHM,EAAA,MAAA,UACA,EAAA,MAAA;CAJN,IAAM,yBAAyBC,KAQYC;sDAAM,YAAA;EAC/C,SAAS,EAAC,MAAM,cAAa,CAAC;CAChC;CAFA,IAAM,yBAAyBC,KAKrBC,KAmBPC;CAnBH,AAEM,EAAA,QAAA,0CAFI,YAAM;EAEd,IAAI,cAAc,aAAa,SAAS;GAGtC,AAFA,aAAa,UAAU,WAEnB,cAAc,KAAA,MAChB,SAAS;IAAC,MAAM;IAAgB,OAAO;GAAS,CAAC,GACjD,SAAS,UAAU;GAGrB;EACF;EAGA,AAAI,cAAc,SAAS,YACzB,SAAS,UAAU,aAAa,MAEhC,SAAS;GAAC,MAAM;GAAgB,OAAO,aAAa;EAAI,CAAC;CAE7D,GAAG,MAAA,CAAC,SAAS,GAjBP,EAAA,MAAA,sCAFN,UAAUD,KAmBPC,GAAW;CAGJC,IAAAA,KAIPC;CAJH,AACO,EAAA,QAAA,wCADG,YAAM;EACd,AAAI,CAAC,WAAW,SAAS,WACvB,SAAS;GAAC,MAAM;GAAuB,OAAO,SAAS;EAAO,CAAC;CAEnE,GAAG,MAAA,CAAC,OAAO,GAHJ,EAAA,MAAA,oCADP,UAAUD,KAIPC,GAAS;CAGFC,IAAAA,KAqBPC;CArBH,AAK+D,EAAA,QAAA,eAAA,EAAA,QAAxC,mBALb,YAAM;EACd,IAAM,cAAc,kBAAkB;EAEtC,IAAI,CAAC,aAAa;EAElB,IAAMvB,iBAAe,gBAAgB,MAAM,QAAMD,IAAE,UAAU,WAAW;EAExE,IAAIC,gBAAc;GAChB,IAAMC,gBAAc,gBAAgB,QAAQD,cAAY,GAElD,oBAAoB,YAAY,WAAWC;GAEjD,IAAI,mBAAmB;IACrB,IAAI,UAAU,iBAAiB,GAE7B;IAGF,qBAAqB,iBAAiB;GACxC;EACF;CACF,GAAG,MAAA,CAAC,aAAa,eAAe,GAhB+B,EAAA,MAAA,aAAxC,EAAA,MAAA,yEALvB,UAAUqB,KAqBPC,GAA8B;CAEbC,IAAAA;;EAClB,IAAI,CAAC,WAAW,CAAC,YAAY,OAAO;GAC3BC,IAAAA;GAAP;IACE,cAAc;IACd,SAAW;GACb,+BAHA,MAAOA;GAAP,MAAA;EAIF;EAEA,MAAO,KAAA;;CART,IAAM,cAAcD,KAWd,uBAAuB,QAAQ,IAAIE,KAMxC,GACK,oBAAoB,QAAQ,IAAIC,MAAyB,GACzD,kBACJ,OAAO,cAAe,WAAW,aAAa,cAG9CC;CACE,AAAA,EAAA,QAAA,gBAAA,EAAA,QAEIC,mBAHN,OAAC,YAAyC;EAKxC,AAJA,aAAa,GAET,gBAAgB,WAAS,gBAAgB,QAAQpC,OAAK,GAE1D,WAAW,gBAAgB,SAAS,MAAM,CAAC;CAC7C,GALE,EAAA,MAAA,cAEIoC,EAAAA,MAAAA;CAJR,IAAM,kBAAkBC,KAapBC;CAAC,AAAA,EAAA,QAAA,YAAA,EAAA,QAIe,YAAA,EAAA,SACA,YAAA,EAAA,SAKD,mBAAA,EAAA,SAVW,cAAA,EAAA,SACa,wBAAA,EAAA,SAOxB,qBAAA,EAAA,SACL,mBAAA,EAAA,SATI,YAAd,MAAA,CAAC,YAAY,CAAC,YAAY,aACxB,oBAAC,KAAD;EAAK,eAAa;EAAU,SAAS;EACnC,UAAA,oBAAC,QAAD;GACE,cAAW;GACX,UAAU;GACA;GACV,MAAM;GACN,MAAK;GACL,SAAS;GACT,GAAI;GACJ,SAAS;EACV,CAAA;CACE,CAAA,IACH,KAAA,GAbH,EAAA,MAAA,UAIe,EAAA,MAAA,UACA,EAAA,OAAA,UAKD,EAAA,OAAA,iBAVW,EAAA,OAAA,YACa,EAAA,OAAA,sBAOxB,EAAA,OAAA,mBACL,EAAA,OAAA,iBATI,EAAA,OAAA;CAFlB,IAAM,iBAAiBC,KA6BJC;;EACjB,IAAI,UAAU,MAAM;GAClB,IAAI,UAAU,MAAM;IACXC,IAAAA;IAAP,AAA0B,EAAA,SAAA,iBAAA,EAAA,SAAnB,eAAA,EAAA,SAAY,SAAZ,MAAA,YAAY,OAAO,aAAa,GAAb,EAAA,OAAA,eAAnB,EAAA,OAAA,aAAY,EAAA,OAAA,qCAAnB,MAAOA;IAAP,MAAA;GACF;GAEA,MAAO;GAAP,MAAA;EACF;EAEA,MAAO;;CATT,IAAM,aAAaD,KAajBE;CAGQ,AAAA,EAAA,SAAA,8BAHR,OAAC,YAAyC;EAExC,AAAI1C,QAAM,QAAQ,SACZ,eAAa,gBAAgB,SAAS,MAAM;CAEpD,GAFQ,EAAA,OAAA;CAJV,IAAM,uBAAuB2C,KAUbC;;EACd,IAAI,gBAAgB,WAAW,GAAA;GAAG,MAAO;GAAP,MAAA;;EAQO,IAAA,MAAA,SAAS,WAAnCC;EAA0BC,AAAAA,EAAAA,SAAAA,sBAA1B,MAAA,KAAK,qBAAqBA,GAAkB,GAAlBA,EAAAA,OAAAA;EAalCC,IAAAA;EAEG,IAAA,EAAA,SAAA,eAAA,EAAA,SAAsD,iBAAA,EAAA,SAFzD,mBAAA,EAAA,SAQe,sBAAA,EAAA,SADH,MAAA,EAAA,SAQK,eAAA,EAAA,SAFA,WAAA,EAAA,SADE,cAAA;GAZCC,IAAAA;GAEjB,EAAA,SAAA,eAAA,EAAA,SAAsD,iBAAA,EAAA,SAM1C,sBAAA,EAAA,SADH,MAAA,EAAA,SAQK,eAAA,EAAA,SAFA,WAAA,EAAA,SADE,gBAZC,OAAC,aAAW;IAC/B,IAAM,SACJ,gBAAgB,OAAsC,kBAAkBC,WAAjDA,SAAO,UAAU;IAE1C,OACE,oBAAC,oBAAD;KAEE,IAAI,GAAG,GAAG,UAAUA,SAAO;KAC3B,UAAU;KACV,UAAU;KACV,OAAOA,SAAO;KAEb,UAAA,aAAa,aAAaA,QAAM,GAAG;MAClC,UAAU;MACV,UAAU;MACV,UAAU,eAAe,SAAS,IAAI;KACxC,CAAC;IACiB,GAXbA,SAAO,KAWM;GAExB,GAjBI,EAAA,OAAA,aAAsD,EAAA,OAAA,eAM1C,EAAA,OAAA,oBADH,EAAA,OAAA,IAQK,EAAA,OAAA,aAFA,EAAA,OAAA,SADE,EAAA,OAAA,4CAZnB,MAAA,gBAAgB,IAAID,GAmBpB,GAjBG,EAAA,OAAA,aAAsD,EAAA,OAAA,eAFzD,EAAA,OAAA,iBAQe,EAAA,OAAA,oBADH,EAAA,OAAA,IAQK,EAAA,OAAA,aAFA,EAAA,OAAA,SADE,EAAA,OAAA;;EAtBtBE,IAAAA;EAIM,AAAA,EAAA,SAAA,aAAA,EAAA,SAMHH,OAVH,MAAA,oBAAC,OAAD;GACE,IAAG;GACH,wBAAsB;GACtB,WAAQ;GACR,IAAI;GACJ,KAAK;GAEL,MAAK;GACL,KAAK;GAEJA,UAAAA;EAoBI,CAAA,GA1BD,EAAA,OAAA,WAMHA,EAAAA,OAAAA;EAlBLI,IAAAA;EADF,AAGe,EAAA,SAAA,wBAAA,EAAA,SAEP,WAAA,EAAA,SACON,OAAAA,EAAAA,SAGXK,OARF,MAAA,oBAAC,KAAD;GACE,WAAQ;GACR,WAAW;GACX,SAAS;GACT,GAAI;GACJ,WAAWL;GACX,UAAU;GAEVK,UAAAA;EA+BG,CAAA,GArCQ,EAAA,OAAA,sBAEP,EAAA,OAAA,SACOL,EAAAA,OAAAA,KAGXK,EAAAA,OAAAA,mCATJ,MACEC;;CAJJ,IAAM,UAAUP,KA2DAQ;;EACd,IAAI,eAAe;GAIL,IAAA,MAAA,CAAC,UAFXC;GADF,AAEa,EAAA,SAAA,WAAA,EAAA,SAGK,2BAAA,EAAA,SACA,2BAAA,EAAA,SAFA,gBAAA,EAAA,SAIC,iBAAA,EAAA,SALPC,OAFV,MAAA,oBAAC,eAAD;IACW;IACT,QAAQA;IACM;IACd,cAAc;IACd,cAAc;IACY;IACX;GAChB,CAAA,GAPU,EAAA,OAAA,SAGK,EAAA,OAAA,yBACA,EAAA,OAAA,yBAFA,EAAA,OAAA,cAIC,EAAA,OAAA,eALPA,EAAAA,OAAAA,mCAHZ,MACED;GADF,MAAA;EAWF;EAEA,IAAI,uBAAuB,GAAG;GAC5B,MAAO;GAAP,MAAA;EACF;EAGEE,IAAAA;EADF,AAIa,EAAA,SAAA,WAAA,EAAA,SAKH,YAAA,EAAA,SAFQ,2BAAA,EAAA,SACA,2BAAA,EAAA,SAOI,gBAAA,EAAA,SACd,WAAA,EAAA,SAHI,UAZV,MAAA,oBAAC,SAAD;GACE,OAAO;GACP,eAAA;GACS;GACT,oBAAoB;GACpB,qBAAA;GACA,cAAc;GACd,cAAc;GACd,MAAM;GACN,UAAS;GACT,WAAW;GACX,QAAA;GACQ;GACR,KAAK;GACL,kBAAkB;GAClB,GAAI;EACL,CAAA,GAbU,EAAA,OAAA,SAKH,EAAA,OAAA,UAFQ,EAAA,OAAA,yBACA,EAAA,OAAA,yBAOI,EAAA,OAAA,cACd,EAAA,OAAA,SAHI,EAAA,OAAA,sCAbZ,MACEA;;CApBJ,IAAM,UAAUH,KA6ECI;sCAAW,MAAA,WAAA,oBAAC,aAAD,EAAa,WAAA,YAAyB,CAAA,GAAjD,EAAA,OAAA;CAcH,IAAA,MAAA,UAAU,gBA7BpBC;CAEyB,AAAA,EAAA,SAAA,gBAAA,EAAA,SAOf,UAAA,EAAA,SACK,eAAA,EAAA,SACG,kBAAA,EAAA,SACN,YAAA,EAAA,SARK,YAAA,EAAA,SASL,YAAA,EAAA,SAMD,0BAAA,EAAA,SADC,qBAAA,EAAA,SAED,oBAAA,EAAA,SANH,QAAA,EAAA,SAEF,MAAA,EAAA,SAcG,cAAA,EAAA,SAzBI,aAAA,EAAA,SAgBF,WAAA,EAAA,SACD,UAAA,EAAA,SACA,UAAA,EAAA,SACE,YAAA,EAAA,SAvBN,aAAA,EAAA,SAcOD,OAAAA,EAAAA,SAcHE,OA7BV,MAAA,oBAAC,WAAD;EACE,GAAI;EACJ,yBAAuB;EACvB,qBAAkB;EAClB,iBAAe;EACf,aAAW;EACX,gBAAe;EACf,cAAa;EACb,aAAY;EACJ;EACK;EACG;EACN;EACA;EACJ;EACN,WAAWF;EACP;EACJ,WAAU;EACV,UAAU;EACV,SAAS;EACT,SAAS;EACA;EACD;EACA;EACE;EACV,KAAK;EAEL,MAAK;EACL,YAAY;EACZ,QAAQE;EACR,OAAO;CACR,CAAA,GA7BwB,EAAA,OAAA,cAOf,EAAA,OAAA,QACK,EAAA,OAAA,aACG,EAAA,OAAA,gBACN,EAAA,OAAA,UARK,EAAA,OAAA,UASL,EAAA,OAAA,UAMD,EAAA,OAAA,wBADC,EAAA,OAAA,mBAED,EAAA,OAAA,kBANH,EAAA,OAAA,MAEF,EAAA,OAAA,IAcG,EAAA,OAAA,YAzBI,EAAA,OAAA,WAgBF,EAAA,OAAA,SACD,EAAA,OAAA,QACA,EAAA,OAAA,QACE,EAAA,OAAA,UAvBN,EAAA,OAAA,WAcOF,EAAAA,OAAAA,KAcHE,EAAAA,OAAAA;CArCZC,IAAAA;CAJF,OAOY,EAAA,SAAA,kBAAA,EAAA,SACC,mBAAA,EAAA,SACE,qBAAA,EAAA,SAmCV,WAAA,EAAA,SAhCDF,OARF,MAAA,qBAAC,OAAD;EACE,WAAW;EACX,WAAQ;EACR,QAAQ;EACR,SAAS;EACT,WAAW;EACX,KAAK;EANP,UAAA,CAQEA,KAgCC,OACE;KAtCK,EAAA,OAAA,gBACC,EAAA,OAAA,iBACE,EAAA,OAAA,mBAmCV,EAAA,OAAA,SAhCDA,EAAAA,OAAAA,mCARFE;AA2CJ;AA9NwC,SAAA,OAAC,KAAA;CAAM,OAAA,KAAK,IAAIC,MAAI,GAAG,CAAC;;AAPrB,SAAA,MAAC,KAAM;CAK9C,OAJIA,QAAM,IAAU,IAChBA,QAAM,KACNA,QAAM,IAAU,IAEbA,MAAI;AACb;AAiOF,SAAS,cAAc,EACrB,eACA,SACA,QACA,cACA,cACA,cACA,4BAIyE;CACzE,OAAO,cACL;EACE;EACA;EACA;EACA;EACA;CACF,GACA,wBACF;AACF"}
|
package/dist/breadcrumbs.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { n as _getArrayProp } from "./helpers-C8xxXAQC.js";
|
|
3
|
-
import { y as Box } from "./useLayer-
|
|
4
|
-
import { n as Text, t as Stack } from "./stack-
|
|
5
|
-
import { t as Button } from "./button-
|
|
6
|
-
import { t as Popover } from "./popover-
|
|
3
|
+
import { y as Box } from "./useLayer-CUKYjJYq.js";
|
|
4
|
+
import { n as Text, t as Stack } from "./stack-SbGBZ0x3.js";
|
|
5
|
+
import { t as Button } from "./button-Wii-24Xu.js";
|
|
6
|
+
import { t as Popover } from "./popover-DR6UQQvq.js";
|
|
7
7
|
import { t as useClickOutsideEvent } from "./useClickOutsideEvent-wGLGWBZN.js";
|
|
8
8
|
import { c } from "react/compiler-runtime";
|
|
9
9
|
import { clsx } from "clsx/lite";
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { n as _getArrayProp } from "./helpers-C8xxXAQC.js";
|
|
2
2
|
import { t as getTheme_v2 } from "./getTheme_v2-y09KqtEb.js";
|
|
3
|
-
import { _ as useTheme_v2, h as _cardColorStyle, m as focusRingStyle, p as focusRingBorderStyle, v as responsiveRadiusStyle, y as Box } from "./useLayer-
|
|
4
|
-
import { t as Flex } from "./flex-
|
|
5
|
-
import { n as Text } from "./stack-
|
|
3
|
+
import { _ as useTheme_v2, h as _cardColorStyle, m as focusRingStyle, p as focusRingBorderStyle, v as responsiveRadiusStyle, y as Box } from "./useLayer-CUKYjJYq.js";
|
|
4
|
+
import { t as Flex } from "./flex-CpiAc-4D.js";
|
|
5
|
+
import { n as Text } from "./stack-SbGBZ0x3.js";
|
|
6
6
|
import { c } from "react/compiler-runtime";
|
|
7
7
|
import { SpinnerIcon } from "@sanity/icons/Spinner";
|
|
8
8
|
import { isValidElement } from "react";
|
|
@@ -72,11 +72,11 @@ function buttonColorStyles(props) {
|
|
|
72
72
|
}
|
|
73
73
|
},
|
|
74
74
|
style?.button?.root
|
|
75
|
-
].filter(
|
|
75
|
+
].filter((value) => !!value);
|
|
76
76
|
}
|
|
77
77
|
const StyledButton = /* @__PURE__ */ styled.button.withConfig({
|
|
78
78
|
displayName: "StyledButton",
|
|
79
|
-
componentId: "sc-
|
|
79
|
+
componentId: "sc-1s3d6t-0"
|
|
80
80
|
})(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles);
|
|
81
81
|
function ButtonComponent(props) {
|
|
82
82
|
let $ = c(87), IconComponent, IconRightComponent, children, disabled, loading, paddingBottomProp, paddingLeftProp, paddingRightProp, paddingTopProp, paddingXProp, paddingYProp, ref, restProps, selected, t0, t1, t2, t3, t4, t5, t6, t7, t8, text, textAlign, textWeight, width;
|
|
@@ -177,4 +177,4 @@ function ButtonComponent(props) {
|
|
|
177
177
|
const Button = ButtonComponent;
|
|
178
178
|
export { Spinner as n, spinnerIcon as r, Button as t };
|
|
179
179
|
|
|
180
|
-
//# sourceMappingURL=button-
|
|
180
|
+
//# sourceMappingURL=button-Wii-24Xu.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button-Wii-24Xu.js","names":["<SpinnerIcon className={spinnerIcon} />","<Text data-ui=\"Spinner\" {...props}>\n <SpinnerIcon className={spinnerIcon} />\n </Text>","fontSize = 1","justifyProp = 'center'","mode = 'default'","paddingProp = 3","radiusProp = 2","gap = 3","tone = 'default'","type = 'button'","muted = false","_getArrayProp(justifyProp)","_getArrayProp(paddingProp)","_getArrayProp(paddingXProp)","_getArrayProp(paddingYProp)","_getArrayProp(paddingTopProp)","_getArrayProp(paddingBottomProp)","_getArrayProp(paddingLeftProp)","_getArrayProp(paddingRightProp)","_getArrayProp(radiusProp)","_getArrayProp(gap)","{\n // flex: 1,\n padding,\n paddingX,\n paddingY,\n paddingTop,\n paddingBottom,\n paddingLeft,\n paddingRight,\n }","useMemo(\n () => ({\n // flex: 1,\n padding,\n paddingX,\n paddingY,\n paddingTop,\n paddingBottom,\n paddingLeft,\n paddingRight,\n }),\n [padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight],\n )","Boolean(loading) && (\n <div className={buttonLoadingBox} data-ui=\"ButtonLoading\">\n <Spinner />\n </div>\n )","(IconComponent || text || IconRightComponent) && (\n <Box as=\"span\" {...boxProps}>\n <Flex as=\"span\" justify={justify} gap={spacing}>\n {IconComponent && (\n <Text size={fontSize}>\n {isValidElement(IconComponent) && IconComponent}\n {isValidElementType(IconComponent) && <IconComponent />}\n </Text>\n )}\n\n {text && (\n <Box>\n <Text\n muted={muted}\n align={textAlign}\n size={fontSize}\n textOverflow=\"ellipsis\"\n weight={textWeight ?? button.textWeight}\n >\n {text}\n </Text>\n </Box>\n )}\n\n {IconRightComponent && (\n <Text size={fontSize}>\n {isValidElement(IconRightComponent) && IconRightComponent}\n {isValidElementType(IconRightComponent) && <IconRightComponent />}\n </Text>\n )}\n </Flex>\n </Box>\n )","button.textWeight","children && (\n <Box as=\"span\" {...boxProps}>\n {children}\n </Box>\n )","<StyledButton\n data-ui=\"Button\"\n {...restProps}\n $mode={mode}\n $radius={radius}\n $tone={tone}\n data-disabled={Boolean(loading || disabled)}\n data-selected={selected ? '' : undefined}\n disabled={Boolean(loading || disabled)}\n ref={ref}\n type={type}\n $width={width}\n >\n {Boolean(loading) && (\n <div className={buttonLoadingBox} data-ui=\"ButtonLoading\">\n <Spinner />\n </div>\n )}\n\n {(IconComponent || text || IconRightComponent) && (\n <Box as=\"span\" {...boxProps}>\n <Flex as=\"span\" justify={justify} gap={spacing}>\n {IconComponent && (\n <Text size={fontSize}>\n {isValidElement(IconComponent) && IconComponent}\n {isValidElementType(IconComponent) && <IconComponent />}\n </Text>\n )}\n\n {text && (\n <Box>\n <Text\n muted={muted}\n align={textAlign}\n size={fontSize}\n textOverflow=\"ellipsis\"\n weight={textWeight ?? button.textWeight}\n >\n {text}\n </Text>\n </Box>\n )}\n\n {IconRightComponent && (\n <Text size={fontSize}>\n {isValidElement(IconRightComponent) && IconRightComponent}\n {isValidElementType(IconRightComponent) && <IconRightComponent />}\n </Text>\n )}\n </Flex>\n </Box>\n )}\n\n {children && (\n <Box as=\"span\" {...boxProps}>\n {children}\n </Box>\n )}\n </StyledButton>","Boolean(loading || disabled)","selected ? '' : undefined"],"sources":["../src/core/primitives/spinner/spinner.css.ts","../src/core/primitives/spinner/spinner.tsx","../src/core/primitives/button/styles.ts","../src/core/primitives/button/button.css.ts","../src/core/primitives/button/button.tsx"],"sourcesContent":["import {keyframes, style} from '@vanilla-extract/css'\n\nconst rotate = keyframes({\n from: {transform: 'rotate(0deg)'},\n to: {transform: 'rotate(360deg)'},\n})\n\nconst size = 'round(1em, 2px)'\nexport const spinnerIcon = style({\n animation: `${rotate} 500ms linear infinite`,\n // Prevents a wobbly spinner on Safari\n height: size,\n width: size,\n})\n","import {SpinnerIcon} from '@sanity/icons/Spinner'\n\nimport {Text} from '../text/text'\n\nimport {spinnerIcon} from './spinner.css'\n\n/**\n * @public\n */\nexport interface SpinnerProps {\n muted?: boolean\n size?: number | number[]\n}\n\n/**\n * Indicate that something is loading for an indeterminate amount of time.\n *\n * @public\n */\nexport function Spinner(\n props: SpinnerProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'size'>,\n) {\n return (\n <Text data-ui=\"Spinner\" {...props}>\n <SpinnerIcon className={spinnerIcon} />\n </Text>\n )\n}\n","import {css} from 'styled-components'\n\nimport {CSSObject} from '../../../theme/system/css'\nimport {getTheme_v2} from '../../../theme/versioning/getTheme_v2'\nimport {_cardColorStyle} from '../../styles/card/_cardColorStyle'\nimport {focusRingBorderStyle, focusRingStyle} from '../../styles/focusRing'\nimport {ThemeProps} from '../../styles/types'\nimport {ButtonMode, ButtonTone, ButtonWidth} from '../../types/button'\n\n/**\n * @internal\n */\nexport function buttonBaseStyles(\n props: {$width?: ButtonWidth} & ThemeProps,\n): ReturnType<typeof css> {\n const {$width} = props\n const {style} = getTheme_v2(props.theme)\n\n return css`\n ${style?.button};\n\n -webkit-font-smoothing: inherit;\n appearance: none;\n display: inline-flex;\n align-items: center;\n font: inherit;\n border: 0;\n outline: none;\n user-select: none;\n text-decoration: none;\n border: 0;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n white-space: nowrap;\n text-align: left;\n position: relative;\n vertical-align: top;\n\n ${\n $width === 'fill' &&\n css`\n width: -moz-available;\n width: -webkit-fill-available;\n width: stretch;\n `\n }\n\n & > span {\n display: block;\n flex: 1;\n min-width: 0;\n border-radius: inherit;\n }\n\n &::-moz-focus-inner {\n border: 0;\n padding: 0;\n }\n `\n}\n\nfunction combineBoxShadow(...boxShadows: (string | undefined)[]): string {\n return boxShadows.filter(Boolean).join(',')\n}\n\n/**\n * @internal\n */\nexport function buttonColorStyles(\n props: {$mode: ButtonMode; $tone: ButtonTone} & ThemeProps,\n): CSSObject[] {\n const {$mode} = props\n const {button, color: baseColor, style} = getTheme_v2(props.theme)\n const shadow = props.$mode === 'ghost'\n const mode = baseColor.button[$mode] || baseColor.button.default\n const color = mode[props.$tone] || mode.default\n const border = {\n width: button.border.width,\n color: 'var(--card-border-color)',\n }\n // const defaultBoxShadow = `inset 0px -1.5px 0px ${buttonTheme.border.width}px color-mix(in srgb, var(--card-border-color) 25%, var(--card-bg-color))`\n const defaultBoxShadow = undefined\n\n return [\n _cardColorStyle(baseColor, color.enabled),\n {\n 'backgroundColor': 'var(--card-bg-color)',\n 'color': 'var(--card-fg-color)',\n 'boxShadow': focusRingBorderStyle(border),\n '&:disabled, &[data-disabled=\"true\"]': _cardColorStyle(baseColor, color.disabled),\n \"&:not([data-disabled='true'])\": {\n 'boxShadow': combineBoxShadow(\n focusRingBorderStyle(border),\n shadow ? defaultBoxShadow : undefined,\n ),\n '&:focus': {\n boxShadow: focusRingStyle({\n base: baseColor,\n border: {width: 2, color: baseColor.bg},\n focusRing: button.focusRing,\n }),\n },\n '&:focus:not(:focus-visible)': {\n boxShadow: combineBoxShadow(\n focusRingBorderStyle(border),\n shadow ? defaultBoxShadow : undefined,\n ),\n },\n '@media (hover: hover)': {\n '&:hover': _cardColorStyle(baseColor, color.hovered),\n '&:active': _cardColorStyle(baseColor, color.pressed),\n '&[data-hovered]': _cardColorStyle(baseColor, color.hovered),\n },\n '&[data-selected]': _cardColorStyle(baseColor, color.pressed),\n },\n },\n style?.button?.root,\n ].filter((value): value is CSSObject => Boolean(value))\n}\n","import {style} from '@vanilla-extract/css'\n\nexport const buttonLoadingBox = style({\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: 'var(--card-bg-color)',\n borderRadius: 'inherit',\n zIndex: 1,\n boxShadow: 'inherit',\n})\n","import {isValidElement, useMemo} from 'react'\nimport {isValidElementType} from 'react-is'\nimport {styled} from 'styled-components'\n\nimport {ThemeFontWeightKey} from '../../../theme/system/font'\nimport {_getArrayProp} from '../../styles/helpers'\nimport {responsiveRadiusStyle} from '../../styles/radius/radiusStyle'\nimport {ResponsiveRadiusStyleProps} from '../../styles/radius/types'\nimport {useTheme_v2} from '../../theme/useTheme'\nimport {ButtonMode, ButtonTextAlign, ButtonTone, ButtonWidth} from '../../types/button'\nimport {ElementType, Props} from '../../types/component'\nimport {FlexJustify} from '../../types/flex'\nimport {Box} from '../box/box'\nimport {Flex} from '../flex/flex'\nimport {Spinner} from '../spinner/spinner'\nimport {Text} from '../text/text'\nimport {ResponsivePaddingProps, ResponsiveRadiusProps} from '../types'\nimport {buttonBaseStyles, buttonColorStyles} from './styles'\n\nimport {buttonLoadingBox} from './button.css'\n\n/**\n * @public\n */\nexport interface ButtonOwnProps extends ResponsivePaddingProps, ResponsiveRadiusProps {\n fontSize?: number | number[]\n mode?: ButtonMode\n // oxlint-disable-next-line no-redundant-type-constituents\n icon?: React.ElementType | React.ReactNode\n // oxlint-disable-next-line no-redundant-type-constituents\n iconRight?: React.ElementType | React.ReactNode\n justify?: FlexJustify | FlexJustify[]\n /**\n * @beta Do not use in production, as this might change.\n */\n loading?: boolean\n selected?: boolean\n /**\n * @deprecated Use `gap` instead.\n */\n space?: never\n gap?: number | number[]\n muted?: boolean\n text?: React.ReactNode\n textAlign?: ButtonTextAlign\n textWeight?: ThemeFontWeightKey\n tone?: ButtonTone\n type?: 'button' | 'reset' | 'submit'\n width?: ButtonWidth\n}\n\n/**\n * @public\n */\nexport type ButtonProps<E extends ElementType = 'button'> = Props<ButtonOwnProps, E>\n\nconst StyledButton = styled.button<\n {$mode: ButtonMode; $tone: ButtonTone; $width?: ButtonWidth} & ResponsiveRadiusStyleProps\n>(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles)\n\nfunction ButtonComponent(\n props: ButtonOwnProps & {as?: ElementType} & Omit<\n React.HTMLProps<HTMLButtonElement>,\n 'as' | 'width'\n >,\n) {\n const {\n children,\n disabled,\n ref,\n fontSize = 1,\n icon: IconComponent,\n iconRight: IconRightComponent,\n justify: justifyProp = 'center',\n loading,\n mode = 'default',\n padding: paddingProp = 3,\n paddingX: paddingXProp,\n paddingY: paddingYProp,\n paddingTop: paddingTopProp,\n paddingBottom: paddingBottomProp,\n paddingLeft: paddingLeftProp,\n paddingRight: paddingRightProp,\n radius: radiusProp = 2,\n selected,\n gap = 3,\n text,\n textAlign,\n textWeight,\n tone = 'default',\n type = 'button',\n muted = false,\n width,\n ...restProps\n } = props\n const {button} = useTheme_v2()\n\n const justify = _getArrayProp(justifyProp)\n const padding = _getArrayProp(paddingProp)\n const paddingX = _getArrayProp(paddingXProp)\n const paddingY = _getArrayProp(paddingYProp)\n const paddingTop = _getArrayProp(paddingTopProp)\n const paddingBottom = _getArrayProp(paddingBottomProp)\n const paddingLeft = _getArrayProp(paddingLeftProp)\n const paddingRight = _getArrayProp(paddingRightProp)\n const radius = _getArrayProp(radiusProp)\n const spacing = _getArrayProp(gap)\n\n const boxProps = useMemo(\n () => ({\n // flex: 1,\n padding,\n paddingX,\n paddingY,\n paddingTop,\n paddingBottom,\n paddingLeft,\n paddingRight,\n }),\n [padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight],\n )\n\n return (\n <StyledButton\n data-ui=\"Button\"\n {...restProps}\n $mode={mode}\n $radius={radius}\n $tone={tone}\n data-disabled={Boolean(loading || disabled)}\n data-selected={selected ? '' : undefined}\n disabled={Boolean(loading || disabled)}\n ref={ref}\n type={type}\n $width={width}\n >\n {Boolean(loading) && (\n <div className={buttonLoadingBox} data-ui=\"ButtonLoading\">\n <Spinner />\n </div>\n )}\n\n {(IconComponent || text || IconRightComponent) && (\n <Box as=\"span\" {...boxProps}>\n <Flex as=\"span\" justify={justify} gap={spacing}>\n {IconComponent && (\n <Text size={fontSize}>\n {isValidElement(IconComponent) && IconComponent}\n {isValidElementType(IconComponent) && <IconComponent />}\n </Text>\n )}\n\n {text && (\n <Box>\n <Text\n muted={muted}\n align={textAlign}\n size={fontSize}\n textOverflow=\"ellipsis\"\n weight={textWeight ?? button.textWeight}\n >\n {text}\n </Text>\n </Box>\n )}\n\n {IconRightComponent && (\n <Text size={fontSize}>\n {isValidElement(IconRightComponent) && IconRightComponent}\n {isValidElementType(IconRightComponent) && <IconRightComponent />}\n </Text>\n )}\n </Flex>\n </Box>\n )}\n\n {children && (\n <Box as=\"span\" {...boxProps}>\n {children}\n </Box>\n )}\n </StyledButton>\n )\n}\n\n/**\n * @public\n */\nexport const Button: <E extends ElementType = 'button'>(\n props: ButtonProps<E>,\n) => React.JSX.Element = ButtonComponent\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-dnqMFkWg.d.ts","names":[],"sources":["../src/core/primitives/box/box.tsx","../src/core/types/button.ts","../src/core/primitives/button/button.tsx"],"mappings":";;;;;;;;;UA2BiB,oBAEb,yBACA,oBACA,yBACA,uBACA;EACF,cAAc;;;;;KAMJ,SAAS,UAAU,uBAAuB,MAAM,aAAa;;;;;;;
|
|
1
|
+
{"version":3,"file":"button-dnqMFkWg.d.ts","names":[],"sources":["../src/core/primitives/box/box.tsx","../src/core/types/button.ts","../src/core/primitives/button/button.tsx"],"mappings":";;;;;;;;;UA2BiB,oBAEb,yBACA,oBACA,yBACA,uBACA;EACF,cAAc;;;;;KAMJ,SAAS,UAAU,uBAAuB,MAAM,aAAa;;;;;;;cAkG5D,MAAM,UAAU,qBAAqB,OAAO,SAAS,OAAO,MAAM,IAAI;;;;KCrIvE,aAAa;;;;KAKb;;;;KAKA,aAAa;;;;KAKb;;;;UCIK,uBAAuB,wBAAwB;EAC9D;EACA,OAAO;EAEP,OAAO,MAAM,cAAc,MAAM;EAEjC,YAAY,MAAM,cAAc,MAAM;EACtC,UAAU,cAAc;;;;EAIxB;EACA;;;;EAIA;EACA;EACA;EACA,OAAO,MAAM;EACb,YAAY;EACZ,aAAa;EACb,OAAO;EACP;EACA,QAAQ;;;;;KAME,YAAY,UAAU,0BAA0B,MAAM,gBAAgB;;;;cAsIrE,SAAS,UAAU,wBAC9B,OAAO,YAAY,OAChB,MAAM,IAAI"}
|
package/dist/code.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"code.d.ts","names":[],"sources":["../src/core/primitives/code/code.tsx"],"mappings":";;;;UAeiB;;EAEf;EACA;EACA;;;;;KAMU,UAAU,UAAU,uBAAuB,MAAM,cAAc;;;;
|
|
1
|
+
{"version":3,"file":"code.d.ts","names":[],"sources":["../src/core/primitives/code/code.tsx"],"mappings":";;;;UAeiB;;EAEf;EACA;EACA;;;;;KAMU,UAAU,UAAU,uBAAuB,MAAM,cAAc;;;;qBA+B9D,OAAO,UAAU,qBAAqB,OAAO,UAAU,OAAO,MAAM,IAAI"}
|
package/dist/code.js
CHANGED
|
@@ -52,7 +52,7 @@ function codeBaseStyle() {
|
|
|
52
52
|
}
|
|
53
53
|
const LazyRefractor = lazy(() => import("./refractor-CC48DwHi.js")), StyledCode = /* @__PURE__ */ styled.pre.withConfig({
|
|
54
54
|
displayName: "StyledCode",
|
|
55
|
-
componentId: "sc-
|
|
55
|
+
componentId: "sc-0ez50w-0"
|
|
56
56
|
})(codeBaseStyle, responsiveCodeFontStyle);
|
|
57
57
|
function CodeComponent(props) {
|
|
58
58
|
let $ = c(23), children, language, ref, restProps, t0, weight;
|