@xsolla/xui-modal 0.141.0 → 0.141.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/native/index.js +1 -1
- package/native/index.js.map +1 -1
- package/native/index.mjs +1 -1
- package/native/index.mjs.map +1 -1
- package/package.json +5 -5
- package/web/index.js +6 -6
- package/web/index.js.map +1 -1
- package/web/index.mjs +6 -6
- package/web/index.mjs.map +1 -1
- package/README.md +0 -599
package/native/index.js
CHANGED
|
@@ -31,7 +31,7 @@ module.exports = __toCommonJS(index_exports);
|
|
|
31
31
|
// src/Modal.tsx
|
|
32
32
|
var import_react2 = require("react");
|
|
33
33
|
|
|
34
|
-
//
|
|
34
|
+
// ../../foundation/primitives-native/src/Box.tsx
|
|
35
35
|
var import_react_native = require("react-native");
|
|
36
36
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
37
37
|
var Box = ({
|
package/native/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.tsx","../../src/Modal.tsx","../../../primitives-native/src/Box.tsx","../../src/WorkArea.tsx","../../src/ModalProvider.tsx","../../src/ModalContext.ts","../../src/ModalRoot.native.tsx","../../src/useModal.ts"],"sourcesContent":["export * from \"./Modal\";\nexport * from \"./ModalProvider\";\nexport * from \"./useModal\";\nexport * from \"./types\";\nexport * from \"./WorkArea\";\nexport { useModalId } from \"@xsolla/xui-core\";\n","import { forwardRef, useEffect, useRef, useCallback } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme, useId, ModalIdContext } from \"@xsolla/xui-core\";\nimport { FlexButton } from \"@xsolla/xui-button\";\nimport { ChevronLeft, Remove } from \"@xsolla/xui-icons-base\";\nimport type { ModalProps } from \"./types\";\nimport { WorkArea } from \"./WorkArea\";\n\nconst FOCUSABLE_SELECTORS =\n 'button:not([disabled]), [href], input:not([disabled]):not([type=\"hidden\"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nconst isElementVisible = (el: HTMLElement): boolean => {\n if (el.offsetParent === null && getComputedStyle(el).position !== \"fixed\")\n return false;\n const style = getComputedStyle(el);\n return style.visibility !== \"hidden\" && style.display !== \"none\";\n};\n\nconst getFocusableElements = (container: HTMLElement): HTMLElement[] =>\n Array.from(\n container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTORS)\n ).filter(isElementVisible);\n\nexport const Modal = forwardRef<any, ModalProps>(\n (\n {\n children,\n type = \"popup\",\n openContent = false,\n closeOutside = true,\n onClose,\n onBack,\n align,\n header,\n footer,\n styled: styledProps,\n maxWidth,\n minHeight,\n title,\n \"aria-label\": ariaLabel,\n \"aria-describedby\": ariaDescribedBy,\n initialFocusRef,\n themeMode,\n themeProductContext,\n ...rest\n },\n ref\n ) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const sizing = theme.sizing.modal();\n const modalRef = useRef<HTMLDivElement>(null);\n const closeButtonRef = useRef<HTMLDivElement>(null);\n const previousActiveElement = useRef<HTMLElement | null>(null);\n const titleId = useId();\n\n useEffect(() => {\n previousActiveElement.current = document.activeElement as HTMLElement;\n\n const focusTarget =\n initialFocusRef?.current ||\n closeButtonRef.current ||\n (modalRef.current && getFocusableElements(modalRef.current)[0]);\n\n if (focusTarget) {\n focusTarget.focus();\n } else {\n modalRef.current?.focus();\n }\n\n return () => {\n previousActiveElement.current?.focus();\n };\n }, [initialFocusRef]);\n\n useEffect(() => {\n if (!onClose) return;\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") onClose();\n };\n document.addEventListener(\"keydown\", handleKeyDown);\n return () => document.removeEventListener(\"keydown\", handleKeyDown);\n }, [onClose]);\n\n useEffect(() => {\n if (!closeOutside || !onClose) return;\n const handleClickOutside = (event: MouseEvent) => {\n const target = event.target;\n if (!target || !(target instanceof Node)) return;\n if (modalRef.current && !modalRef.current.contains(target)) {\n const portalContent = (target as Element).closest?.(\n `[data-modal-id=\"${titleId}\"]`\n );\n if (!portalContent) {\n onClose();\n }\n }\n };\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () =>\n document.removeEventListener(\"mousedown\", handleClickOutside);\n }, [closeOutside, onClose, titleId]);\n\n const handleKeyDown = useCallback((event: React.KeyboardEvent) => {\n if (event.key !== \"Tab\" || !modalRef.current) return;\n\n const focusableElements = getFocusableElements(modalRef.current);\n const firstElement = focusableElements[0];\n const lastElement = focusableElements[focusableElements.length - 1];\n\n if (!firstElement) {\n event.preventDefault();\n return;\n }\n\n if (event.shiftKey && document.activeElement === firstElement) {\n event.preventDefault();\n lastElement.focus();\n } else if (!event.shiftKey && document.activeElement === lastElement) {\n event.preventDefault();\n firstElement.focus();\n }\n }, []);\n\n const maxWidthValue =\n type === \"full-screen\" || type === \"bottom-sheet\"\n ? \"100%\"\n : (maxWidth ?? sizing.maxWidth);\n const hasDefaultHeader = !header && (onBack || onClose);\n const hasHeader = !!header || hasDefaultHeader;\n\n const typeStyles: React.CSSProperties =\n type === \"full-screen\"\n ? {\n position: \"fixed\",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n zIndex: 1,\n maxWidth: \"100%\",\n }\n : type === \"bottom-sheet\"\n ? {\n position: \"fixed\",\n bottom: 0,\n left: 0,\n right: 0,\n zIndex: 1,\n maxWidth: \"100%\",\n }\n : {};\n\n return (\n <Box\n ref={modalRef}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={title ? titleId : undefined}\n aria-label={!title ? ariaLabel : undefined}\n aria-describedby={ariaDescribedBy}\n data-modal-id={titleId}\n data-modal-type={type}\n tabIndex={-1}\n onKeyDown={handleKeyDown}\n flexGrow={1}\n position=\"relative\"\n width=\"100%\"\n style={{\n maxWidth:\n typeof maxWidthValue === \"number\"\n ? `${maxWidthValue}px`\n : maxWidthValue,\n minHeight:\n typeof minHeight === \"number\" ? `${minHeight}px` : minHeight,\n outline: \"none\",\n ...typeStyles,\n ...styledProps,\n }}\n {...rest}\n >\n {title && (\n <Box\n id={titleId}\n position=\"absolute\"\n style={{\n clip: \"rect(0 0 0 0)\",\n clipPath: \"inset(50%)\",\n height: 1,\n width: 1,\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n }}\n >\n {title}\n </Box>\n )}\n <ModalIdContext.Provider value={titleId}>\n <WorkArea\n ref={ref}\n stretched\n openContent={openContent}\n type={type}\n align={align}\n >\n {hasHeader && (\n <Box\n flexDirection=\"row\"\n justifyContent=\"space-between\"\n alignItems=\"center\"\n width=\"100%\"\n padding={sizing.headerPadding}\n style={{ flexShrink: 0 }}\n >\n {header ?? (\n <>\n <Box style={{ minWidth: 36 }}>\n {onBack && (\n <FlexButton\n variant=\"secondary\"\n size={sizing.headerButtonSize}\n background\n onPress={onBack}\n aria-label=\"Go back\"\n >\n <ChevronLeft />\n </FlexButton>\n )}\n </Box>\n <Box\n ref={closeButtonRef}\n style={{ minWidth: 36 }}\n alignItems=\"flex-end\"\n >\n {onClose && (\n <FlexButton\n variant=\"secondary\"\n size={sizing.headerButtonSize}\n background\n onPress={onClose}\n aria-label=\"Close modal\"\n >\n <Remove />\n </FlexButton>\n )}\n </Box>\n </>\n )}\n </Box>\n )}\n <Box\n flexGrow={1}\n width=\"100%\"\n padding={openContent ? 0 : sizing.contentPadding}\n style={{ paddingTop: hasHeader ? 0 : undefined }}\n >\n {children}\n </Box>\n {footer && (\n <Box\n width=\"100%\"\n padding={openContent ? 0 : sizing.contentPadding}\n style={{ paddingTop: 0, flexShrink: 0 }}\n >\n {footer}\n </Box>\n )}\n </WorkArea>\n </ModalIdContext.Provider>\n </Box>\n );\n }\n);\n\nModal.displayName = \"Modal\";\n","import React from \"react\";\nimport {\n View,\n Pressable,\n Image,\n ViewStyle,\n ImageStyle,\n DimensionValue,\n AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n children,\n onPress,\n onLayout,\n onMoveShouldSetResponder,\n onResponderGrant,\n onResponderMove,\n onResponderRelease,\n onResponderTerminate,\n backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius,\n borderStyle,\n height,\n padding,\n paddingHorizontal,\n paddingVertical,\n margin,\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n flexDirection,\n alignItems,\n justifyContent,\n position,\n top,\n bottom,\n left,\n right,\n width,\n minWidth,\n minHeight,\n maxWidth,\n maxHeight,\n flex,\n overflow,\n zIndex,\n hoverStyle,\n pressStyle,\n style,\n \"data-testid\": dataTestId,\n testID,\n as,\n src,\n alt,\n ...rest\n}) => {\n const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n backgroundColor:\n pressed && pressStyle?.backgroundColor\n ? pressStyle.backgroundColor\n : backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius: borderRadius as AnimatableNumericValue,\n borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n overflow,\n zIndex,\n height: height as DimensionValue,\n width: width as DimensionValue,\n minWidth: minWidth as DimensionValue,\n minHeight: minHeight as DimensionValue,\n maxWidth: maxWidth as DimensionValue,\n maxHeight: maxHeight as DimensionValue,\n padding: padding as DimensionValue,\n paddingHorizontal: paddingHorizontal as DimensionValue,\n paddingVertical: paddingVertical as DimensionValue,\n margin: margin as DimensionValue,\n marginTop: marginTop as DimensionValue,\n marginBottom: marginBottom as DimensionValue,\n marginLeft: marginLeft as DimensionValue,\n marginRight: marginRight as DimensionValue,\n flexDirection,\n alignItems,\n justifyContent,\n position: position as ViewStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n flex,\n ...(style as ViewStyle),\n });\n\n const finalTestID = dataTestId || testID;\n\n // Destructure and drop web-only props from rest before passing to RN components\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const {\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n \"aria-label\": _ariaLabel,\n \"aria-labelledby\": _ariaLabelledBy,\n \"aria-current\": _ariaCurrent,\n \"aria-disabled\": _ariaDisabled,\n \"aria-live\": _ariaLive,\n className,\n \"data-testid\": _dataTestId,\n ...nativeRest\n } = rest as Record<string, unknown>;\n\n // Handle as=\"img\" for React Native\n if (as === \"img\" && src) {\n const imageStyle: ImageStyle = {\n width: width as DimensionValue,\n height: height as DimensionValue,\n borderRadius: borderRadius as number,\n position: position as ImageStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n ...(style as ImageStyle),\n };\n\n return (\n <Image\n source={{ uri: src }}\n style={imageStyle}\n testID={finalTestID}\n resizeMode=\"cover\"\n {...nativeRest}\n />\n );\n }\n\n if (onPress) {\n return (\n <Pressable\n onPress={onPress}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n style={({ pressed }) => getContainerStyle(pressed)}\n testID={finalTestID}\n {...nativeRest}\n >\n {children}\n </Pressable>\n );\n }\n\n return (\n <View\n style={getContainerStyle()}\n testID={finalTestID}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n {...nativeRest}\n >\n {children}\n </View>\n );\n};\n","import { forwardRef } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme } from \"@xsolla/xui-core\";\nimport type { WorkAreaProps } from \"./types\";\n\nconst getBorderRadius = (\n type: WorkAreaProps[\"type\"],\n baseRadius: number\n): string | number => {\n switch (type) {\n case \"full-screen\":\n return 0;\n case \"bottom-sheet\":\n return `${baseRadius}px ${baseRadius}px 0 0`;\n default:\n return baseRadius;\n }\n};\n\nexport const WorkArea = forwardRef<any, WorkAreaProps>(\n (\n {\n children,\n openContent = false,\n stretched = false,\n fetching = false,\n type = \"popup\",\n align,\n themeMode,\n themeProductContext,\n },\n ref\n ) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const sizing = theme.sizing.modal();\n const showShadow = type !== \"full-screen\";\n\n return (\n <Box\n ref={ref}\n backgroundColor={theme.colors.background.primary}\n width=\"100%\"\n height={stretched ? \"100%\" : \"auto\"}\n flexDirection=\"column\"\n alignItems={align === \"center\" ? \"center\" : \"stretch\"}\n style={{\n borderRadius: getBorderRadius(type, sizing.borderRadius),\n boxShadow: showShadow ? sizing.shadow : \"none\",\n overflow: \"hidden\",\n color: theme.colors.content.primary,\n }}\n >\n <Box\n width=\"100%\"\n height=\"100%\"\n flexDirection=\"column\"\n alignItems={align === \"center\" ? \"center\" : \"stretch\"}\n style={{ textAlign: align === \"center\" ? \"center\" : \"left\" }}\n >\n {fetching ? (\n <Box\n alignItems=\"center\"\n justifyContent=\"center\"\n width=\"100%\"\n height=\"100%\"\n >\n <div>Loading...</div>\n </Box>\n ) : (\n children\n )}\n </Box>\n </Box>\n );\n }\n);\n\nWorkArea.displayName = \"WorkArea\";\n","import { useCallback, useMemo, useState } from \"react\";\nimport { ModalContext } from \"./ModalContext\";\nimport { ModalRoot } from \"./ModalRoot\";\nimport type { ModalProviderProps, ModalType } from \"./types\";\n\nexport const ModalProvider = ({ children }: ModalProviderProps) => {\n const [modals, setModals] = useState<Record<string, ModalType>>({});\n\n const onOpenModal = useCallback(\n (key: string, modal: ModalType) =>\n setModals((m) => ({ ...m, [key]: modal })),\n []\n );\n\n const onCloseModal = useCallback(\n (key: string) =>\n setModals((m) => {\n if (!m[key]) return m;\n const newModals = { ...m };\n delete newModals[key];\n return newModals;\n }),\n []\n );\n\n const contextValue = useMemo(\n () => ({ onOpenModal, onCloseModal }),\n [onOpenModal, onCloseModal]\n );\n\n return (\n <ModalContext.Provider value={contextValue}>\n {children}\n <ModalRoot modals={modals} />\n </ModalContext.Provider>\n );\n};\n","import { createContext } from \"react\";\nimport type { ModalContextType } from \"./types\";\n\nconst invariantViolation = () => {\n throw new Error(\n \"Attempted to call useModal outside of modal context. Make sure your app is rendered inside ModalProvider.\"\n );\n};\n\nexport const ModalContext = createContext<ModalContextType>({\n onOpenModal: invariantViolation,\n onCloseModal: invariantViolation,\n});\n","import React, { memo } from \"react\";\nimport type { ModalRootProps } from \"./types\";\n\n// Web portal not available on React Native\n// Native modal implementation would use RN-specific approach\nexport const ModalRoot = memo(({ modals }: ModalRootProps) => {\n return null;\n});\n\nModalRoot.displayName = \"ModalRoot\";\n","import { useContext, useEffect, useMemo, useRef, useCallback } from \"react\";\nimport { ModalContext } from \"./ModalContext\";\nimport { ModalType } from \"./types\";\n\nexport const useModal = (modal: ModalType): [() => void, () => void] => {\n const { onOpenModal, onCloseModal } = useContext(ModalContext);\n const key = useMemo(() => Math.random().toString(36).substr(2, 9), []);\n const modalRef = useRef(modal);\n\n useEffect(() => {\n modalRef.current = modal;\n }, [modal]);\n\n const open = useCallback(() => {\n onOpenModal(key, modalRef.current);\n }, [key, onOpenModal]);\n\n const close = useCallback(() => {\n onCloseModal(key);\n }, [key, onCloseModal]);\n\n return [open, close];\n};\n"],"mappings":"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","names":["import_react","import_xui_core","import_jsx_runtime","import_jsx_runtime","handleKeyDown","import_react","import_react","import_react","import_jsx_runtime","import_react","import_xui_core"]}
|
|
1
|
+
{"version":3,"sources":["../../src/index.tsx","../../src/Modal.tsx","../../../../foundation/primitives-native/src/Box.tsx","../../src/WorkArea.tsx","../../src/ModalProvider.tsx","../../src/ModalContext.ts","../../src/ModalRoot.native.tsx","../../src/useModal.ts"],"sourcesContent":["export * from \"./Modal\";\nexport * from \"./ModalProvider\";\nexport * from \"./useModal\";\nexport * from \"./types\";\nexport * from \"./WorkArea\";\nexport { useModalId } from \"@xsolla/xui-core\";\n","import { forwardRef, useEffect, useRef, useCallback } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme, useId, ModalIdContext } from \"@xsolla/xui-core\";\nimport { FlexButton } from \"@xsolla/xui-button\";\nimport { ChevronLeft, Remove } from \"@xsolla/xui-icons-base\";\nimport type { ModalProps } from \"./types\";\nimport { WorkArea } from \"./WorkArea\";\n\nconst FOCUSABLE_SELECTORS =\n 'button:not([disabled]), [href], input:not([disabled]):not([type=\"hidden\"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nconst isElementVisible = (el: HTMLElement): boolean => {\n if (el.offsetParent === null && getComputedStyle(el).position !== \"fixed\")\n return false;\n const style = getComputedStyle(el);\n return style.visibility !== \"hidden\" && style.display !== \"none\";\n};\n\nconst getFocusableElements = (container: HTMLElement): HTMLElement[] =>\n Array.from(\n container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTORS)\n ).filter(isElementVisible);\n\nexport const Modal = forwardRef<any, ModalProps>(\n (\n {\n children,\n type = \"popup\",\n openContent = false,\n closeOutside = true,\n onClose,\n onBack,\n align,\n header,\n footer,\n styled: styledProps,\n maxWidth,\n minHeight,\n title,\n \"aria-label\": ariaLabel,\n \"aria-describedby\": ariaDescribedBy,\n initialFocusRef,\n themeMode,\n themeProductContext,\n ...rest\n },\n ref\n ) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const sizing = theme.sizing.modal();\n const modalRef = useRef<HTMLDivElement>(null);\n const closeButtonRef = useRef<HTMLDivElement>(null);\n const previousActiveElement = useRef<HTMLElement | null>(null);\n const titleId = useId();\n\n useEffect(() => {\n previousActiveElement.current = document.activeElement as HTMLElement;\n\n const focusTarget =\n initialFocusRef?.current ||\n closeButtonRef.current ||\n (modalRef.current && getFocusableElements(modalRef.current)[0]);\n\n if (focusTarget) {\n focusTarget.focus();\n } else {\n modalRef.current?.focus();\n }\n\n return () => {\n previousActiveElement.current?.focus();\n };\n }, [initialFocusRef]);\n\n useEffect(() => {\n if (!onClose) return;\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") onClose();\n };\n document.addEventListener(\"keydown\", handleKeyDown);\n return () => document.removeEventListener(\"keydown\", handleKeyDown);\n }, [onClose]);\n\n useEffect(() => {\n if (!closeOutside || !onClose) return;\n const handleClickOutside = (event: MouseEvent) => {\n const target = event.target;\n if (!target || !(target instanceof Node)) return;\n if (modalRef.current && !modalRef.current.contains(target)) {\n const portalContent = (target as Element).closest?.(\n `[data-modal-id=\"${titleId}\"]`\n );\n if (!portalContent) {\n onClose();\n }\n }\n };\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () =>\n document.removeEventListener(\"mousedown\", handleClickOutside);\n }, [closeOutside, onClose, titleId]);\n\n const handleKeyDown = useCallback((event: React.KeyboardEvent) => {\n if (event.key !== \"Tab\" || !modalRef.current) return;\n\n const focusableElements = getFocusableElements(modalRef.current);\n const firstElement = focusableElements[0];\n const lastElement = focusableElements[focusableElements.length - 1];\n\n if (!firstElement) {\n event.preventDefault();\n return;\n }\n\n if (event.shiftKey && document.activeElement === firstElement) {\n event.preventDefault();\n lastElement.focus();\n } else if (!event.shiftKey && document.activeElement === lastElement) {\n event.preventDefault();\n firstElement.focus();\n }\n }, []);\n\n const maxWidthValue =\n type === \"full-screen\" || type === \"bottom-sheet\"\n ? \"100%\"\n : (maxWidth ?? sizing.maxWidth);\n const hasDefaultHeader = !header && (onBack || onClose);\n const hasHeader = !!header || hasDefaultHeader;\n\n const typeStyles: React.CSSProperties =\n type === \"full-screen\"\n ? {\n position: \"fixed\",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n zIndex: 1,\n maxWidth: \"100%\",\n }\n : type === \"bottom-sheet\"\n ? {\n position: \"fixed\",\n bottom: 0,\n left: 0,\n right: 0,\n zIndex: 1,\n maxWidth: \"100%\",\n }\n : {};\n\n return (\n <Box\n ref={modalRef}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={title ? titleId : undefined}\n aria-label={!title ? ariaLabel : undefined}\n aria-describedby={ariaDescribedBy}\n data-modal-id={titleId}\n data-modal-type={type}\n tabIndex={-1}\n onKeyDown={handleKeyDown}\n flexGrow={1}\n position=\"relative\"\n width=\"100%\"\n style={{\n maxWidth:\n typeof maxWidthValue === \"number\"\n ? `${maxWidthValue}px`\n : maxWidthValue,\n minHeight:\n typeof minHeight === \"number\" ? `${minHeight}px` : minHeight,\n outline: \"none\",\n ...typeStyles,\n ...styledProps,\n }}\n {...rest}\n >\n {title && (\n <Box\n id={titleId}\n position=\"absolute\"\n style={{\n clip: \"rect(0 0 0 0)\",\n clipPath: \"inset(50%)\",\n height: 1,\n width: 1,\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n }}\n >\n {title}\n </Box>\n )}\n <ModalIdContext.Provider value={titleId}>\n <WorkArea\n ref={ref}\n stretched\n openContent={openContent}\n type={type}\n align={align}\n >\n {hasHeader && (\n <Box\n flexDirection=\"row\"\n justifyContent=\"space-between\"\n alignItems=\"center\"\n width=\"100%\"\n padding={sizing.headerPadding}\n style={{ flexShrink: 0 }}\n >\n {header ?? (\n <>\n <Box style={{ minWidth: 36 }}>\n {onBack && (\n <FlexButton\n variant=\"secondary\"\n size={sizing.headerButtonSize}\n background\n onPress={onBack}\n aria-label=\"Go back\"\n >\n <ChevronLeft />\n </FlexButton>\n )}\n </Box>\n <Box\n ref={closeButtonRef}\n style={{ minWidth: 36 }}\n alignItems=\"flex-end\"\n >\n {onClose && (\n <FlexButton\n variant=\"secondary\"\n size={sizing.headerButtonSize}\n background\n onPress={onClose}\n aria-label=\"Close modal\"\n >\n <Remove />\n </FlexButton>\n )}\n </Box>\n </>\n )}\n </Box>\n )}\n <Box\n flexGrow={1}\n width=\"100%\"\n padding={openContent ? 0 : sizing.contentPadding}\n style={{ paddingTop: hasHeader ? 0 : undefined }}\n >\n {children}\n </Box>\n {footer && (\n <Box\n width=\"100%\"\n padding={openContent ? 0 : sizing.contentPadding}\n style={{ paddingTop: 0, flexShrink: 0 }}\n >\n {footer}\n </Box>\n )}\n </WorkArea>\n </ModalIdContext.Provider>\n </Box>\n );\n }\n);\n\nModal.displayName = \"Modal\";\n","import React from \"react\";\nimport {\n View,\n Pressable,\n Image,\n ViewStyle,\n ImageStyle,\n DimensionValue,\n AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n children,\n onPress,\n onLayout,\n onMoveShouldSetResponder,\n onResponderGrant,\n onResponderMove,\n onResponderRelease,\n onResponderTerminate,\n backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius,\n borderStyle,\n height,\n padding,\n paddingHorizontal,\n paddingVertical,\n margin,\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n flexDirection,\n alignItems,\n justifyContent,\n position,\n top,\n bottom,\n left,\n right,\n width,\n minWidth,\n minHeight,\n maxWidth,\n maxHeight,\n flex,\n overflow,\n zIndex,\n hoverStyle,\n pressStyle,\n style,\n \"data-testid\": dataTestId,\n testID,\n as,\n src,\n alt,\n ...rest\n}) => {\n const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n backgroundColor:\n pressed && pressStyle?.backgroundColor\n ? pressStyle.backgroundColor\n : backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius: borderRadius as AnimatableNumericValue,\n borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n overflow,\n zIndex,\n height: height as DimensionValue,\n width: width as DimensionValue,\n minWidth: minWidth as DimensionValue,\n minHeight: minHeight as DimensionValue,\n maxWidth: maxWidth as DimensionValue,\n maxHeight: maxHeight as DimensionValue,\n padding: padding as DimensionValue,\n paddingHorizontal: paddingHorizontal as DimensionValue,\n paddingVertical: paddingVertical as DimensionValue,\n margin: margin as DimensionValue,\n marginTop: marginTop as DimensionValue,\n marginBottom: marginBottom as DimensionValue,\n marginLeft: marginLeft as DimensionValue,\n marginRight: marginRight as DimensionValue,\n flexDirection,\n alignItems,\n justifyContent,\n position: position as ViewStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n flex,\n ...(style as ViewStyle),\n });\n\n const finalTestID = dataTestId || testID;\n\n // Destructure and drop web-only props from rest before passing to RN components\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const {\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n \"aria-label\": _ariaLabel,\n \"aria-labelledby\": _ariaLabelledBy,\n \"aria-current\": _ariaCurrent,\n \"aria-disabled\": _ariaDisabled,\n \"aria-live\": _ariaLive,\n className,\n \"data-testid\": _dataTestId,\n ...nativeRest\n } = rest as Record<string, unknown>;\n\n // Handle as=\"img\" for React Native\n if (as === \"img\" && src) {\n const imageStyle: ImageStyle = {\n width: width as DimensionValue,\n height: height as DimensionValue,\n borderRadius: borderRadius as number,\n position: position as ImageStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n ...(style as ImageStyle),\n };\n\n return (\n <Image\n source={{ uri: src }}\n style={imageStyle}\n testID={finalTestID}\n resizeMode=\"cover\"\n {...nativeRest}\n />\n );\n }\n\n if (onPress) {\n return (\n <Pressable\n onPress={onPress}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n style={({ pressed }) => getContainerStyle(pressed)}\n testID={finalTestID}\n {...nativeRest}\n >\n {children}\n </Pressable>\n );\n }\n\n return (\n <View\n style={getContainerStyle()}\n testID={finalTestID}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n {...nativeRest}\n >\n {children}\n </View>\n );\n};\n","import { forwardRef } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme } from \"@xsolla/xui-core\";\nimport type { WorkAreaProps } from \"./types\";\n\nconst getBorderRadius = (\n type: WorkAreaProps[\"type\"],\n baseRadius: number\n): string | number => {\n switch (type) {\n case \"full-screen\":\n return 0;\n case \"bottom-sheet\":\n return `${baseRadius}px ${baseRadius}px 0 0`;\n default:\n return baseRadius;\n }\n};\n\nexport const WorkArea = forwardRef<any, WorkAreaProps>(\n (\n {\n children,\n openContent = false,\n stretched = false,\n fetching = false,\n type = \"popup\",\n align,\n themeMode,\n themeProductContext,\n },\n ref\n ) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const sizing = theme.sizing.modal();\n const showShadow = type !== \"full-screen\";\n\n return (\n <Box\n ref={ref}\n backgroundColor={theme.colors.background.primary}\n width=\"100%\"\n height={stretched ? \"100%\" : \"auto\"}\n flexDirection=\"column\"\n alignItems={align === \"center\" ? \"center\" : \"stretch\"}\n style={{\n borderRadius: getBorderRadius(type, sizing.borderRadius),\n boxShadow: showShadow ? sizing.shadow : \"none\",\n overflow: \"hidden\",\n color: theme.colors.content.primary,\n }}\n >\n <Box\n width=\"100%\"\n height=\"100%\"\n flexDirection=\"column\"\n alignItems={align === \"center\" ? \"center\" : \"stretch\"}\n style={{ textAlign: align === \"center\" ? \"center\" : \"left\" }}\n >\n {fetching ? (\n <Box\n alignItems=\"center\"\n justifyContent=\"center\"\n width=\"100%\"\n height=\"100%\"\n >\n <div>Loading...</div>\n </Box>\n ) : (\n children\n )}\n </Box>\n </Box>\n );\n }\n);\n\nWorkArea.displayName = \"WorkArea\";\n","import { useCallback, useMemo, useState } from \"react\";\nimport { ModalContext } from \"./ModalContext\";\nimport { ModalRoot } from \"./ModalRoot\";\nimport type { ModalProviderProps, ModalType } from \"./types\";\n\nexport const ModalProvider = ({ children }: ModalProviderProps) => {\n const [modals, setModals] = useState<Record<string, ModalType>>({});\n\n const onOpenModal = useCallback(\n (key: string, modal: ModalType) =>\n setModals((m) => ({ ...m, [key]: modal })),\n []\n );\n\n const onCloseModal = useCallback(\n (key: string) =>\n setModals((m) => {\n if (!m[key]) return m;\n const newModals = { ...m };\n delete newModals[key];\n return newModals;\n }),\n []\n );\n\n const contextValue = useMemo(\n () => ({ onOpenModal, onCloseModal }),\n [onOpenModal, onCloseModal]\n );\n\n return (\n <ModalContext.Provider value={contextValue}>\n {children}\n <ModalRoot modals={modals} />\n </ModalContext.Provider>\n );\n};\n","import { createContext } from \"react\";\nimport type { ModalContextType } from \"./types\";\n\nconst invariantViolation = () => {\n throw new Error(\n \"Attempted to call useModal outside of modal context. Make sure your app is rendered inside ModalProvider.\"\n );\n};\n\nexport const ModalContext = createContext<ModalContextType>({\n onOpenModal: invariantViolation,\n onCloseModal: invariantViolation,\n});\n","import React, { memo } from \"react\";\nimport type { ModalRootProps } from \"./types\";\n\n// Web portal not available on React Native\n// Native modal implementation would use RN-specific approach\nexport const ModalRoot = memo(({ modals }: ModalRootProps) => {\n return null;\n});\n\nModalRoot.displayName = \"ModalRoot\";\n","import { useContext, useEffect, useMemo, useRef, useCallback } from \"react\";\nimport { ModalContext } from \"./ModalContext\";\nimport { ModalType } from \"./types\";\n\nexport const useModal = (modal: ModalType): [() => void, () => void] => {\n const { onOpenModal, onCloseModal } = useContext(ModalContext);\n const key = useMemo(() => Math.random().toString(36).substr(2, 9), []);\n const modalRef = useRef(modal);\n\n useEffect(() => {\n modalRef.current = modal;\n }, [modal]);\n\n const open = useCallback(() => {\n onOpenModal(key, modalRef.current);\n }, [key, onOpenModal]);\n\n const close = useCallback(() => {\n onCloseModal(key);\n }, [key, onCloseModal]);\n\n return [open, close];\n};\n"],"mappings":"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","names":["import_react","import_xui_core","import_jsx_runtime","import_jsx_runtime","handleKeyDown","import_react","import_react","import_react","import_jsx_runtime","import_react","import_xui_core"]}
|
package/native/index.mjs
CHANGED
package/native/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Modal.tsx","../../../primitives-native/src/Box.tsx","../../src/WorkArea.tsx","../../src/ModalProvider.tsx","../../src/ModalContext.ts","../../src/ModalRoot.native.tsx","../../src/useModal.ts","../../src/index.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useCallback } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme, useId, ModalIdContext } from \"@xsolla/xui-core\";\nimport { FlexButton } from \"@xsolla/xui-button\";\nimport { ChevronLeft, Remove } from \"@xsolla/xui-icons-base\";\nimport type { ModalProps } from \"./types\";\nimport { WorkArea } from \"./WorkArea\";\n\nconst FOCUSABLE_SELECTORS =\n 'button:not([disabled]), [href], input:not([disabled]):not([type=\"hidden\"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nconst isElementVisible = (el: HTMLElement): boolean => {\n if (el.offsetParent === null && getComputedStyle(el).position !== \"fixed\")\n return false;\n const style = getComputedStyle(el);\n return style.visibility !== \"hidden\" && style.display !== \"none\";\n};\n\nconst getFocusableElements = (container: HTMLElement): HTMLElement[] =>\n Array.from(\n container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTORS)\n ).filter(isElementVisible);\n\nexport const Modal = forwardRef<any, ModalProps>(\n (\n {\n children,\n type = \"popup\",\n openContent = false,\n closeOutside = true,\n onClose,\n onBack,\n align,\n header,\n footer,\n styled: styledProps,\n maxWidth,\n minHeight,\n title,\n \"aria-label\": ariaLabel,\n \"aria-describedby\": ariaDescribedBy,\n initialFocusRef,\n themeMode,\n themeProductContext,\n ...rest\n },\n ref\n ) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const sizing = theme.sizing.modal();\n const modalRef = useRef<HTMLDivElement>(null);\n const closeButtonRef = useRef<HTMLDivElement>(null);\n const previousActiveElement = useRef<HTMLElement | null>(null);\n const titleId = useId();\n\n useEffect(() => {\n previousActiveElement.current = document.activeElement as HTMLElement;\n\n const focusTarget =\n initialFocusRef?.current ||\n closeButtonRef.current ||\n (modalRef.current && getFocusableElements(modalRef.current)[0]);\n\n if (focusTarget) {\n focusTarget.focus();\n } else {\n modalRef.current?.focus();\n }\n\n return () => {\n previousActiveElement.current?.focus();\n };\n }, [initialFocusRef]);\n\n useEffect(() => {\n if (!onClose) return;\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") onClose();\n };\n document.addEventListener(\"keydown\", handleKeyDown);\n return () => document.removeEventListener(\"keydown\", handleKeyDown);\n }, [onClose]);\n\n useEffect(() => {\n if (!closeOutside || !onClose) return;\n const handleClickOutside = (event: MouseEvent) => {\n const target = event.target;\n if (!target || !(target instanceof Node)) return;\n if (modalRef.current && !modalRef.current.contains(target)) {\n const portalContent = (target as Element).closest?.(\n `[data-modal-id=\"${titleId}\"]`\n );\n if (!portalContent) {\n onClose();\n }\n }\n };\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () =>\n document.removeEventListener(\"mousedown\", handleClickOutside);\n }, [closeOutside, onClose, titleId]);\n\n const handleKeyDown = useCallback((event: React.KeyboardEvent) => {\n if (event.key !== \"Tab\" || !modalRef.current) return;\n\n const focusableElements = getFocusableElements(modalRef.current);\n const firstElement = focusableElements[0];\n const lastElement = focusableElements[focusableElements.length - 1];\n\n if (!firstElement) {\n event.preventDefault();\n return;\n }\n\n if (event.shiftKey && document.activeElement === firstElement) {\n event.preventDefault();\n lastElement.focus();\n } else if (!event.shiftKey && document.activeElement === lastElement) {\n event.preventDefault();\n firstElement.focus();\n }\n }, []);\n\n const maxWidthValue =\n type === \"full-screen\" || type === \"bottom-sheet\"\n ? \"100%\"\n : (maxWidth ?? sizing.maxWidth);\n const hasDefaultHeader = !header && (onBack || onClose);\n const hasHeader = !!header || hasDefaultHeader;\n\n const typeStyles: React.CSSProperties =\n type === \"full-screen\"\n ? {\n position: \"fixed\",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n zIndex: 1,\n maxWidth: \"100%\",\n }\n : type === \"bottom-sheet\"\n ? {\n position: \"fixed\",\n bottom: 0,\n left: 0,\n right: 0,\n zIndex: 1,\n maxWidth: \"100%\",\n }\n : {};\n\n return (\n <Box\n ref={modalRef}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={title ? titleId : undefined}\n aria-label={!title ? ariaLabel : undefined}\n aria-describedby={ariaDescribedBy}\n data-modal-id={titleId}\n data-modal-type={type}\n tabIndex={-1}\n onKeyDown={handleKeyDown}\n flexGrow={1}\n position=\"relative\"\n width=\"100%\"\n style={{\n maxWidth:\n typeof maxWidthValue === \"number\"\n ? `${maxWidthValue}px`\n : maxWidthValue,\n minHeight:\n typeof minHeight === \"number\" ? `${minHeight}px` : minHeight,\n outline: \"none\",\n ...typeStyles,\n ...styledProps,\n }}\n {...rest}\n >\n {title && (\n <Box\n id={titleId}\n position=\"absolute\"\n style={{\n clip: \"rect(0 0 0 0)\",\n clipPath: \"inset(50%)\",\n height: 1,\n width: 1,\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n }}\n >\n {title}\n </Box>\n )}\n <ModalIdContext.Provider value={titleId}>\n <WorkArea\n ref={ref}\n stretched\n openContent={openContent}\n type={type}\n align={align}\n >\n {hasHeader && (\n <Box\n flexDirection=\"row\"\n justifyContent=\"space-between\"\n alignItems=\"center\"\n width=\"100%\"\n padding={sizing.headerPadding}\n style={{ flexShrink: 0 }}\n >\n {header ?? (\n <>\n <Box style={{ minWidth: 36 }}>\n {onBack && (\n <FlexButton\n variant=\"secondary\"\n size={sizing.headerButtonSize}\n background\n onPress={onBack}\n aria-label=\"Go back\"\n >\n <ChevronLeft />\n </FlexButton>\n )}\n </Box>\n <Box\n ref={closeButtonRef}\n style={{ minWidth: 36 }}\n alignItems=\"flex-end\"\n >\n {onClose && (\n <FlexButton\n variant=\"secondary\"\n size={sizing.headerButtonSize}\n background\n onPress={onClose}\n aria-label=\"Close modal\"\n >\n <Remove />\n </FlexButton>\n )}\n </Box>\n </>\n )}\n </Box>\n )}\n <Box\n flexGrow={1}\n width=\"100%\"\n padding={openContent ? 0 : sizing.contentPadding}\n style={{ paddingTop: hasHeader ? 0 : undefined }}\n >\n {children}\n </Box>\n {footer && (\n <Box\n width=\"100%\"\n padding={openContent ? 0 : sizing.contentPadding}\n style={{ paddingTop: 0, flexShrink: 0 }}\n >\n {footer}\n </Box>\n )}\n </WorkArea>\n </ModalIdContext.Provider>\n </Box>\n );\n }\n);\n\nModal.displayName = \"Modal\";\n","import React from \"react\";\nimport {\n View,\n Pressable,\n Image,\n ViewStyle,\n ImageStyle,\n DimensionValue,\n AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n children,\n onPress,\n onLayout,\n onMoveShouldSetResponder,\n onResponderGrant,\n onResponderMove,\n onResponderRelease,\n onResponderTerminate,\n backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius,\n borderStyle,\n height,\n padding,\n paddingHorizontal,\n paddingVertical,\n margin,\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n flexDirection,\n alignItems,\n justifyContent,\n position,\n top,\n bottom,\n left,\n right,\n width,\n minWidth,\n minHeight,\n maxWidth,\n maxHeight,\n flex,\n overflow,\n zIndex,\n hoverStyle,\n pressStyle,\n style,\n \"data-testid\": dataTestId,\n testID,\n as,\n src,\n alt,\n ...rest\n}) => {\n const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n backgroundColor:\n pressed && pressStyle?.backgroundColor\n ? pressStyle.backgroundColor\n : backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius: borderRadius as AnimatableNumericValue,\n borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n overflow,\n zIndex,\n height: height as DimensionValue,\n width: width as DimensionValue,\n minWidth: minWidth as DimensionValue,\n minHeight: minHeight as DimensionValue,\n maxWidth: maxWidth as DimensionValue,\n maxHeight: maxHeight as DimensionValue,\n padding: padding as DimensionValue,\n paddingHorizontal: paddingHorizontal as DimensionValue,\n paddingVertical: paddingVertical as DimensionValue,\n margin: margin as DimensionValue,\n marginTop: marginTop as DimensionValue,\n marginBottom: marginBottom as DimensionValue,\n marginLeft: marginLeft as DimensionValue,\n marginRight: marginRight as DimensionValue,\n flexDirection,\n alignItems,\n justifyContent,\n position: position as ViewStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n flex,\n ...(style as ViewStyle),\n });\n\n const finalTestID = dataTestId || testID;\n\n // Destructure and drop web-only props from rest before passing to RN components\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const {\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n \"aria-label\": _ariaLabel,\n \"aria-labelledby\": _ariaLabelledBy,\n \"aria-current\": _ariaCurrent,\n \"aria-disabled\": _ariaDisabled,\n \"aria-live\": _ariaLive,\n className,\n \"data-testid\": _dataTestId,\n ...nativeRest\n } = rest as Record<string, unknown>;\n\n // Handle as=\"img\" for React Native\n if (as === \"img\" && src) {\n const imageStyle: ImageStyle = {\n width: width as DimensionValue,\n height: height as DimensionValue,\n borderRadius: borderRadius as number,\n position: position as ImageStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n ...(style as ImageStyle),\n };\n\n return (\n <Image\n source={{ uri: src }}\n style={imageStyle}\n testID={finalTestID}\n resizeMode=\"cover\"\n {...nativeRest}\n />\n );\n }\n\n if (onPress) {\n return (\n <Pressable\n onPress={onPress}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n style={({ pressed }) => getContainerStyle(pressed)}\n testID={finalTestID}\n {...nativeRest}\n >\n {children}\n </Pressable>\n );\n }\n\n return (\n <View\n style={getContainerStyle()}\n testID={finalTestID}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n {...nativeRest}\n >\n {children}\n </View>\n );\n};\n","import { forwardRef } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme } from \"@xsolla/xui-core\";\nimport type { WorkAreaProps } from \"./types\";\n\nconst getBorderRadius = (\n type: WorkAreaProps[\"type\"],\n baseRadius: number\n): string | number => {\n switch (type) {\n case \"full-screen\":\n return 0;\n case \"bottom-sheet\":\n return `${baseRadius}px ${baseRadius}px 0 0`;\n default:\n return baseRadius;\n }\n};\n\nexport const WorkArea = forwardRef<any, WorkAreaProps>(\n (\n {\n children,\n openContent = false,\n stretched = false,\n fetching = false,\n type = \"popup\",\n align,\n themeMode,\n themeProductContext,\n },\n ref\n ) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const sizing = theme.sizing.modal();\n const showShadow = type !== \"full-screen\";\n\n return (\n <Box\n ref={ref}\n backgroundColor={theme.colors.background.primary}\n width=\"100%\"\n height={stretched ? \"100%\" : \"auto\"}\n flexDirection=\"column\"\n alignItems={align === \"center\" ? \"center\" : \"stretch\"}\n style={{\n borderRadius: getBorderRadius(type, sizing.borderRadius),\n boxShadow: showShadow ? sizing.shadow : \"none\",\n overflow: \"hidden\",\n color: theme.colors.content.primary,\n }}\n >\n <Box\n width=\"100%\"\n height=\"100%\"\n flexDirection=\"column\"\n alignItems={align === \"center\" ? \"center\" : \"stretch\"}\n style={{ textAlign: align === \"center\" ? \"center\" : \"left\" }}\n >\n {fetching ? (\n <Box\n alignItems=\"center\"\n justifyContent=\"center\"\n width=\"100%\"\n height=\"100%\"\n >\n <div>Loading...</div>\n </Box>\n ) : (\n children\n )}\n </Box>\n </Box>\n );\n }\n);\n\nWorkArea.displayName = \"WorkArea\";\n","import { useCallback, useMemo, useState } from \"react\";\nimport { ModalContext } from \"./ModalContext\";\nimport { ModalRoot } from \"./ModalRoot\";\nimport type { ModalProviderProps, ModalType } from \"./types\";\n\nexport const ModalProvider = ({ children }: ModalProviderProps) => {\n const [modals, setModals] = useState<Record<string, ModalType>>({});\n\n const onOpenModal = useCallback(\n (key: string, modal: ModalType) =>\n setModals((m) => ({ ...m, [key]: modal })),\n []\n );\n\n const onCloseModal = useCallback(\n (key: string) =>\n setModals((m) => {\n if (!m[key]) return m;\n const newModals = { ...m };\n delete newModals[key];\n return newModals;\n }),\n []\n );\n\n const contextValue = useMemo(\n () => ({ onOpenModal, onCloseModal }),\n [onOpenModal, onCloseModal]\n );\n\n return (\n <ModalContext.Provider value={contextValue}>\n {children}\n <ModalRoot modals={modals} />\n </ModalContext.Provider>\n );\n};\n","import { createContext } from \"react\";\nimport type { ModalContextType } from \"./types\";\n\nconst invariantViolation = () => {\n throw new Error(\n \"Attempted to call useModal outside of modal context. Make sure your app is rendered inside ModalProvider.\"\n );\n};\n\nexport const ModalContext = createContext<ModalContextType>({\n onOpenModal: invariantViolation,\n onCloseModal: invariantViolation,\n});\n","import React, { memo } from \"react\";\nimport type { ModalRootProps } from \"./types\";\n\n// Web portal not available on React Native\n// Native modal implementation would use RN-specific approach\nexport const ModalRoot = memo(({ modals }: ModalRootProps) => {\n return null;\n});\n\nModalRoot.displayName = \"ModalRoot\";\n","import { useContext, useEffect, useMemo, useRef, useCallback } from \"react\";\nimport { ModalContext } from \"./ModalContext\";\nimport { ModalType } from \"./types\";\n\nexport const useModal = (modal: ModalType): [() => void, () => void] => {\n const { onOpenModal, onCloseModal } = useContext(ModalContext);\n const key = useMemo(() => Math.random().toString(36).substr(2, 9), []);\n const modalRef = useRef(modal);\n\n useEffect(() => {\n modalRef.current = modal;\n }, [modal]);\n\n const open = useCallback(() => {\n onOpenModal(key, modalRef.current);\n }, [key, onOpenModal]);\n\n const close = useCallback(() => {\n onCloseModal(key);\n }, [key, onCloseModal]);\n\n return [open, close];\n};\n","export * from \"./Modal\";\nexport * from \"./ModalProvider\";\nexport * from \"./useModal\";\nexport * from \"./types\";\nexport * from \"./WorkArea\";\nexport { useModalId } from \"@xsolla/xui-core\";\n"],"mappings":"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","names":["forwardRef","useResolvedTheme","jsx","jsx","forwardRef","useResolvedTheme","handleKeyDown","useCallback","jsx","jsxs","useCallback","useEffect","useMemo","useRef","useCallback","useMemo","useRef","useEffect","useCallback"]}
|
|
1
|
+
{"version":3,"sources":["../../src/Modal.tsx","../../../../foundation/primitives-native/src/Box.tsx","../../src/WorkArea.tsx","../../src/ModalProvider.tsx","../../src/ModalContext.ts","../../src/ModalRoot.native.tsx","../../src/useModal.ts","../../src/index.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useCallback } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme, useId, ModalIdContext } from \"@xsolla/xui-core\";\nimport { FlexButton } from \"@xsolla/xui-button\";\nimport { ChevronLeft, Remove } from \"@xsolla/xui-icons-base\";\nimport type { ModalProps } from \"./types\";\nimport { WorkArea } from \"./WorkArea\";\n\nconst FOCUSABLE_SELECTORS =\n 'button:not([disabled]), [href], input:not([disabled]):not([type=\"hidden\"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nconst isElementVisible = (el: HTMLElement): boolean => {\n if (el.offsetParent === null && getComputedStyle(el).position !== \"fixed\")\n return false;\n const style = getComputedStyle(el);\n return style.visibility !== \"hidden\" && style.display !== \"none\";\n};\n\nconst getFocusableElements = (container: HTMLElement): HTMLElement[] =>\n Array.from(\n container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTORS)\n ).filter(isElementVisible);\n\nexport const Modal = forwardRef<any, ModalProps>(\n (\n {\n children,\n type = \"popup\",\n openContent = false,\n closeOutside = true,\n onClose,\n onBack,\n align,\n header,\n footer,\n styled: styledProps,\n maxWidth,\n minHeight,\n title,\n \"aria-label\": ariaLabel,\n \"aria-describedby\": ariaDescribedBy,\n initialFocusRef,\n themeMode,\n themeProductContext,\n ...rest\n },\n ref\n ) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const sizing = theme.sizing.modal();\n const modalRef = useRef<HTMLDivElement>(null);\n const closeButtonRef = useRef<HTMLDivElement>(null);\n const previousActiveElement = useRef<HTMLElement | null>(null);\n const titleId = useId();\n\n useEffect(() => {\n previousActiveElement.current = document.activeElement as HTMLElement;\n\n const focusTarget =\n initialFocusRef?.current ||\n closeButtonRef.current ||\n (modalRef.current && getFocusableElements(modalRef.current)[0]);\n\n if (focusTarget) {\n focusTarget.focus();\n } else {\n modalRef.current?.focus();\n }\n\n return () => {\n previousActiveElement.current?.focus();\n };\n }, [initialFocusRef]);\n\n useEffect(() => {\n if (!onClose) return;\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") onClose();\n };\n document.addEventListener(\"keydown\", handleKeyDown);\n return () => document.removeEventListener(\"keydown\", handleKeyDown);\n }, [onClose]);\n\n useEffect(() => {\n if (!closeOutside || !onClose) return;\n const handleClickOutside = (event: MouseEvent) => {\n const target = event.target;\n if (!target || !(target instanceof Node)) return;\n if (modalRef.current && !modalRef.current.contains(target)) {\n const portalContent = (target as Element).closest?.(\n `[data-modal-id=\"${titleId}\"]`\n );\n if (!portalContent) {\n onClose();\n }\n }\n };\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () =>\n document.removeEventListener(\"mousedown\", handleClickOutside);\n }, [closeOutside, onClose, titleId]);\n\n const handleKeyDown = useCallback((event: React.KeyboardEvent) => {\n if (event.key !== \"Tab\" || !modalRef.current) return;\n\n const focusableElements = getFocusableElements(modalRef.current);\n const firstElement = focusableElements[0];\n const lastElement = focusableElements[focusableElements.length - 1];\n\n if (!firstElement) {\n event.preventDefault();\n return;\n }\n\n if (event.shiftKey && document.activeElement === firstElement) {\n event.preventDefault();\n lastElement.focus();\n } else if (!event.shiftKey && document.activeElement === lastElement) {\n event.preventDefault();\n firstElement.focus();\n }\n }, []);\n\n const maxWidthValue =\n type === \"full-screen\" || type === \"bottom-sheet\"\n ? \"100%\"\n : (maxWidth ?? sizing.maxWidth);\n const hasDefaultHeader = !header && (onBack || onClose);\n const hasHeader = !!header || hasDefaultHeader;\n\n const typeStyles: React.CSSProperties =\n type === \"full-screen\"\n ? {\n position: \"fixed\",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n zIndex: 1,\n maxWidth: \"100%\",\n }\n : type === \"bottom-sheet\"\n ? {\n position: \"fixed\",\n bottom: 0,\n left: 0,\n right: 0,\n zIndex: 1,\n maxWidth: \"100%\",\n }\n : {};\n\n return (\n <Box\n ref={modalRef}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={title ? titleId : undefined}\n aria-label={!title ? ariaLabel : undefined}\n aria-describedby={ariaDescribedBy}\n data-modal-id={titleId}\n data-modal-type={type}\n tabIndex={-1}\n onKeyDown={handleKeyDown}\n flexGrow={1}\n position=\"relative\"\n width=\"100%\"\n style={{\n maxWidth:\n typeof maxWidthValue === \"number\"\n ? `${maxWidthValue}px`\n : maxWidthValue,\n minHeight:\n typeof minHeight === \"number\" ? `${minHeight}px` : minHeight,\n outline: \"none\",\n ...typeStyles,\n ...styledProps,\n }}\n {...rest}\n >\n {title && (\n <Box\n id={titleId}\n position=\"absolute\"\n style={{\n clip: \"rect(0 0 0 0)\",\n clipPath: \"inset(50%)\",\n height: 1,\n width: 1,\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n }}\n >\n {title}\n </Box>\n )}\n <ModalIdContext.Provider value={titleId}>\n <WorkArea\n ref={ref}\n stretched\n openContent={openContent}\n type={type}\n align={align}\n >\n {hasHeader && (\n <Box\n flexDirection=\"row\"\n justifyContent=\"space-between\"\n alignItems=\"center\"\n width=\"100%\"\n padding={sizing.headerPadding}\n style={{ flexShrink: 0 }}\n >\n {header ?? (\n <>\n <Box style={{ minWidth: 36 }}>\n {onBack && (\n <FlexButton\n variant=\"secondary\"\n size={sizing.headerButtonSize}\n background\n onPress={onBack}\n aria-label=\"Go back\"\n >\n <ChevronLeft />\n </FlexButton>\n )}\n </Box>\n <Box\n ref={closeButtonRef}\n style={{ minWidth: 36 }}\n alignItems=\"flex-end\"\n >\n {onClose && (\n <FlexButton\n variant=\"secondary\"\n size={sizing.headerButtonSize}\n background\n onPress={onClose}\n aria-label=\"Close modal\"\n >\n <Remove />\n </FlexButton>\n )}\n </Box>\n </>\n )}\n </Box>\n )}\n <Box\n flexGrow={1}\n width=\"100%\"\n padding={openContent ? 0 : sizing.contentPadding}\n style={{ paddingTop: hasHeader ? 0 : undefined }}\n >\n {children}\n </Box>\n {footer && (\n <Box\n width=\"100%\"\n padding={openContent ? 0 : sizing.contentPadding}\n style={{ paddingTop: 0, flexShrink: 0 }}\n >\n {footer}\n </Box>\n )}\n </WorkArea>\n </ModalIdContext.Provider>\n </Box>\n );\n }\n);\n\nModal.displayName = \"Modal\";\n","import React from \"react\";\nimport {\n View,\n Pressable,\n Image,\n ViewStyle,\n ImageStyle,\n DimensionValue,\n AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n children,\n onPress,\n onLayout,\n onMoveShouldSetResponder,\n onResponderGrant,\n onResponderMove,\n onResponderRelease,\n onResponderTerminate,\n backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius,\n borderStyle,\n height,\n padding,\n paddingHorizontal,\n paddingVertical,\n margin,\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n flexDirection,\n alignItems,\n justifyContent,\n position,\n top,\n bottom,\n left,\n right,\n width,\n minWidth,\n minHeight,\n maxWidth,\n maxHeight,\n flex,\n overflow,\n zIndex,\n hoverStyle,\n pressStyle,\n style,\n \"data-testid\": dataTestId,\n testID,\n as,\n src,\n alt,\n ...rest\n}) => {\n const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n backgroundColor:\n pressed && pressStyle?.backgroundColor\n ? pressStyle.backgroundColor\n : backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius: borderRadius as AnimatableNumericValue,\n borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n overflow,\n zIndex,\n height: height as DimensionValue,\n width: width as DimensionValue,\n minWidth: minWidth as DimensionValue,\n minHeight: minHeight as DimensionValue,\n maxWidth: maxWidth as DimensionValue,\n maxHeight: maxHeight as DimensionValue,\n padding: padding as DimensionValue,\n paddingHorizontal: paddingHorizontal as DimensionValue,\n paddingVertical: paddingVertical as DimensionValue,\n margin: margin as DimensionValue,\n marginTop: marginTop as DimensionValue,\n marginBottom: marginBottom as DimensionValue,\n marginLeft: marginLeft as DimensionValue,\n marginRight: marginRight as DimensionValue,\n flexDirection,\n alignItems,\n justifyContent,\n position: position as ViewStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n flex,\n ...(style as ViewStyle),\n });\n\n const finalTestID = dataTestId || testID;\n\n // Destructure and drop web-only props from rest before passing to RN components\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const {\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n \"aria-label\": _ariaLabel,\n \"aria-labelledby\": _ariaLabelledBy,\n \"aria-current\": _ariaCurrent,\n \"aria-disabled\": _ariaDisabled,\n \"aria-live\": _ariaLive,\n className,\n \"data-testid\": _dataTestId,\n ...nativeRest\n } = rest as Record<string, unknown>;\n\n // Handle as=\"img\" for React Native\n if (as === \"img\" && src) {\n const imageStyle: ImageStyle = {\n width: width as DimensionValue,\n height: height as DimensionValue,\n borderRadius: borderRadius as number,\n position: position as ImageStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n ...(style as ImageStyle),\n };\n\n return (\n <Image\n source={{ uri: src }}\n style={imageStyle}\n testID={finalTestID}\n resizeMode=\"cover\"\n {...nativeRest}\n />\n );\n }\n\n if (onPress) {\n return (\n <Pressable\n onPress={onPress}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n style={({ pressed }) => getContainerStyle(pressed)}\n testID={finalTestID}\n {...nativeRest}\n >\n {children}\n </Pressable>\n );\n }\n\n return (\n <View\n style={getContainerStyle()}\n testID={finalTestID}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n {...nativeRest}\n >\n {children}\n </View>\n );\n};\n","import { forwardRef } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme } from \"@xsolla/xui-core\";\nimport type { WorkAreaProps } from \"./types\";\n\nconst getBorderRadius = (\n type: WorkAreaProps[\"type\"],\n baseRadius: number\n): string | number => {\n switch (type) {\n case \"full-screen\":\n return 0;\n case \"bottom-sheet\":\n return `${baseRadius}px ${baseRadius}px 0 0`;\n default:\n return baseRadius;\n }\n};\n\nexport const WorkArea = forwardRef<any, WorkAreaProps>(\n (\n {\n children,\n openContent = false,\n stretched = false,\n fetching = false,\n type = \"popup\",\n align,\n themeMode,\n themeProductContext,\n },\n ref\n ) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const sizing = theme.sizing.modal();\n const showShadow = type !== \"full-screen\";\n\n return (\n <Box\n ref={ref}\n backgroundColor={theme.colors.background.primary}\n width=\"100%\"\n height={stretched ? \"100%\" : \"auto\"}\n flexDirection=\"column\"\n alignItems={align === \"center\" ? \"center\" : \"stretch\"}\n style={{\n borderRadius: getBorderRadius(type, sizing.borderRadius),\n boxShadow: showShadow ? sizing.shadow : \"none\",\n overflow: \"hidden\",\n color: theme.colors.content.primary,\n }}\n >\n <Box\n width=\"100%\"\n height=\"100%\"\n flexDirection=\"column\"\n alignItems={align === \"center\" ? \"center\" : \"stretch\"}\n style={{ textAlign: align === \"center\" ? \"center\" : \"left\" }}\n >\n {fetching ? (\n <Box\n alignItems=\"center\"\n justifyContent=\"center\"\n width=\"100%\"\n height=\"100%\"\n >\n <div>Loading...</div>\n </Box>\n ) : (\n children\n )}\n </Box>\n </Box>\n );\n }\n);\n\nWorkArea.displayName = \"WorkArea\";\n","import { useCallback, useMemo, useState } from \"react\";\nimport { ModalContext } from \"./ModalContext\";\nimport { ModalRoot } from \"./ModalRoot\";\nimport type { ModalProviderProps, ModalType } from \"./types\";\n\nexport const ModalProvider = ({ children }: ModalProviderProps) => {\n const [modals, setModals] = useState<Record<string, ModalType>>({});\n\n const onOpenModal = useCallback(\n (key: string, modal: ModalType) =>\n setModals((m) => ({ ...m, [key]: modal })),\n []\n );\n\n const onCloseModal = useCallback(\n (key: string) =>\n setModals((m) => {\n if (!m[key]) return m;\n const newModals = { ...m };\n delete newModals[key];\n return newModals;\n }),\n []\n );\n\n const contextValue = useMemo(\n () => ({ onOpenModal, onCloseModal }),\n [onOpenModal, onCloseModal]\n );\n\n return (\n <ModalContext.Provider value={contextValue}>\n {children}\n <ModalRoot modals={modals} />\n </ModalContext.Provider>\n );\n};\n","import { createContext } from \"react\";\nimport type { ModalContextType } from \"./types\";\n\nconst invariantViolation = () => {\n throw new Error(\n \"Attempted to call useModal outside of modal context. Make sure your app is rendered inside ModalProvider.\"\n );\n};\n\nexport const ModalContext = createContext<ModalContextType>({\n onOpenModal: invariantViolation,\n onCloseModal: invariantViolation,\n});\n","import React, { memo } from \"react\";\nimport type { ModalRootProps } from \"./types\";\n\n// Web portal not available on React Native\n// Native modal implementation would use RN-specific approach\nexport const ModalRoot = memo(({ modals }: ModalRootProps) => {\n return null;\n});\n\nModalRoot.displayName = \"ModalRoot\";\n","import { useContext, useEffect, useMemo, useRef, useCallback } from \"react\";\nimport { ModalContext } from \"./ModalContext\";\nimport { ModalType } from \"./types\";\n\nexport const useModal = (modal: ModalType): [() => void, () => void] => {\n const { onOpenModal, onCloseModal } = useContext(ModalContext);\n const key = useMemo(() => Math.random().toString(36).substr(2, 9), []);\n const modalRef = useRef(modal);\n\n useEffect(() => {\n modalRef.current = modal;\n }, [modal]);\n\n const open = useCallback(() => {\n onOpenModal(key, modalRef.current);\n }, [key, onOpenModal]);\n\n const close = useCallback(() => {\n onCloseModal(key);\n }, [key, onCloseModal]);\n\n return [open, close];\n};\n","export * from \"./Modal\";\nexport * from \"./ModalProvider\";\nexport * from \"./useModal\";\nexport * from \"./types\";\nexport * from \"./WorkArea\";\nexport { useModalId } from \"@xsolla/xui-core\";\n"],"mappings":"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","names":["forwardRef","useResolvedTheme","jsx","jsx","forwardRef","useResolvedTheme","handleKeyDown","useCallback","jsx","jsxs","useCallback","useEffect","useMemo","useRef","useCallback","useMemo","useRef","useEffect","useCallback"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-modal",
|
|
3
|
-
"version": "0.141.
|
|
3
|
+
"version": "0.141.1",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -13,10 +13,10 @@
|
|
|
13
13
|
"test:coverage": "vitest run --coverage"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@xsolla/xui-button": "0.141.
|
|
17
|
-
"@xsolla/xui-core": "0.141.
|
|
18
|
-
"@xsolla/xui-icons-base": "0.141.
|
|
19
|
-
"@xsolla/xui-primitives-core": "0.141.
|
|
16
|
+
"@xsolla/xui-button": "0.141.1",
|
|
17
|
+
"@xsolla/xui-core": "0.141.1",
|
|
18
|
+
"@xsolla/xui-icons-base": "0.141.1",
|
|
19
|
+
"@xsolla/xui-primitives-core": "0.141.1"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|
|
22
22
|
"react": ">=16.8.0",
|
package/web/index.js
CHANGED
|
@@ -41,14 +41,14 @@ module.exports = __toCommonJS(index_exports);
|
|
|
41
41
|
// src/Modal.tsx
|
|
42
42
|
var import_react4 = require("react");
|
|
43
43
|
|
|
44
|
-
//
|
|
44
|
+
// ../../foundation/primitives-web/src/Box.tsx
|
|
45
45
|
var import_react2 = __toESM(require("react"));
|
|
46
46
|
var import_styled_components = __toESM(require("styled-components"));
|
|
47
47
|
|
|
48
|
-
//
|
|
48
|
+
// ../../foundation/primitives-web/src/filterDOMProps.ts
|
|
49
49
|
var import_react = __toESM(require("react"));
|
|
50
50
|
|
|
51
|
-
//
|
|
51
|
+
// ../../../node_modules/@emotion/memoize/dist/memoize.esm.js
|
|
52
52
|
function memoize(fn) {
|
|
53
53
|
var cache = {};
|
|
54
54
|
return function(arg) {
|
|
@@ -58,7 +58,7 @@ function memoize(fn) {
|
|
|
58
58
|
}
|
|
59
59
|
var memoize_esm_default = memoize;
|
|
60
60
|
|
|
61
|
-
//
|
|
61
|
+
// ../../../node_modules/@emotion/is-prop-valid/dist/is-prop-valid.esm.js
|
|
62
62
|
var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|inert|itemProp|itemScope|itemType|itemID|itemRef|on|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/;
|
|
63
63
|
var index = memoize_esm_default(
|
|
64
64
|
function(prop) {
|
|
@@ -68,7 +68,7 @@ var index = memoize_esm_default(
|
|
|
68
68
|
);
|
|
69
69
|
var is_prop_valid_esm_default = index;
|
|
70
70
|
|
|
71
|
-
//
|
|
71
|
+
// ../../foundation/primitives-web/src/filterDOMProps.ts
|
|
72
72
|
var ADDITIONAL_BLOCKED_PROPS = /* @__PURE__ */ new Set([
|
|
73
73
|
// RN-only event handlers (pass isPropValid's on* pattern)
|
|
74
74
|
"onPress",
|
|
@@ -114,7 +114,7 @@ function createFilteredElement(defaultTag) {
|
|
|
114
114
|
return Component;
|
|
115
115
|
}
|
|
116
116
|
|
|
117
|
-
//
|
|
117
|
+
// ../../foundation/primitives-web/src/Box.tsx
|
|
118
118
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
119
119
|
var FilteredDiv = createFilteredElement("div");
|
|
120
120
|
var StyledBox = (0, import_styled_components.default)(FilteredDiv)`
|