@xsolla/xui-b2b-drawer 0.147.1

package/native/index.d.mts

@@ -0,0 +1,64 @@
+import * as react from 'react';
+import { ReactNode, RefObject } from 'react';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
+
+type DrawerSize = "sm" | "md" | "lg";
+type DrawerFooterAlign = "center" | "right";
+/** @deprecated Use individual `title` and `onBack` props instead */
+interface LegacyDrawerHeader {
+    title?: ReactNode;
+    onBack?: () => void;
+}
+interface DrawerProps extends ThemeOverrideProps {
+    /** Whether the drawer is open */
+    open?: boolean;
+    /** @deprecated Use `open` instead */
+    isOpen?: boolean;
+    /** Called when the drawer should close */
+    onClose?: () => void;
+    /** Width preset: sm=480px, md=620px, lg=1056px */
+    size?: DrawerSize;
+    /** Title text displayed in the header (18px compact/Medium, ellipsis) */
+    title?: ReactNode;
+    /** @deprecated Use `title` and `onBack` props instead */
+    header?: LegacyDrawerHeader;
+    /** Renders a back arrow button in the header when provided */
+    onBack?: () => void;
+    /** Optional action element in the header, rendered between title and close button */
+    headerAction?: ReactNode;
+    /** Whether clicking the scrim backdrop closes the drawer. Defaults to true. */
+    closeOnOverlayClick?: boolean;
+    /** Whether pressing Escape closes the drawer. Defaults to true. */
+    closeOnEscape?: boolean;
+    /** Footer content (typically a ButtonGroup) */
+    footer?: ReactNode;
+    /** @deprecated Use `footer` instead */
+    bottom?: ReactNode;
+    /** Alignment of footer content. Defaults to "right". */
+    footerAlign?: DrawerFooterAlign;
+    /** Show a drop shadow above the footer. Defaults to false. */
+    footerShadow?: boolean;
+    /** Whether footer buttons stretch to full width. Defaults to true. */
+    footerFullWidth?: boolean;
+    /** Optional stepper sidebar rendered to the left of the content panel */
+    stepper?: ReactNode;
+    /** Main drawer content */
+    children: ReactNode;
+    /** Ref to element that should receive focus when the drawer opens */
+    initialFocusRef?: RefObject<HTMLElement>;
+}
+
+declare const Drawer: react.ForwardRefExoticComponent<DrawerProps & react.RefAttributes<HTMLDivElement>>;
+
+interface UseDrawerOptions {
+    onOpen?: () => void;
+    onClose?: () => void;
+}
+interface UseDrawerReturn {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+}
+declare function useDrawer(options?: UseDrawerOptions): UseDrawerReturn;
+
+export { Drawer, type DrawerFooterAlign, type DrawerProps, type DrawerSize, type LegacyDrawerHeader, type UseDrawerOptions, type UseDrawerReturn, useDrawer };

package/native/index.d.ts

@@ -0,0 +1,64 @@
+import * as react from 'react';
+import { ReactNode, RefObject } from 'react';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
+
+type DrawerSize = "sm" | "md" | "lg";
+type DrawerFooterAlign = "center" | "right";
+/** @deprecated Use individual `title` and `onBack` props instead */
+interface LegacyDrawerHeader {
+    title?: ReactNode;
+    onBack?: () => void;
+}
+interface DrawerProps extends ThemeOverrideProps {
+    /** Whether the drawer is open */
+    open?: boolean;
+    /** @deprecated Use `open` instead */
+    isOpen?: boolean;
+    /** Called when the drawer should close */
+    onClose?: () => void;
+    /** Width preset: sm=480px, md=620px, lg=1056px */
+    size?: DrawerSize;
+    /** Title text displayed in the header (18px compact/Medium, ellipsis) */
+    title?: ReactNode;
+    /** @deprecated Use `title` and `onBack` props instead */
+    header?: LegacyDrawerHeader;
+    /** Renders a back arrow button in the header when provided */
+    onBack?: () => void;
+    /** Optional action element in the header, rendered between title and close button */
+    headerAction?: ReactNode;
+    /** Whether clicking the scrim backdrop closes the drawer. Defaults to true. */
+    closeOnOverlayClick?: boolean;
+    /** Whether pressing Escape closes the drawer. Defaults to true. */
+    closeOnEscape?: boolean;
+    /** Footer content (typically a ButtonGroup) */
+    footer?: ReactNode;
+    /** @deprecated Use `footer` instead */
+    bottom?: ReactNode;
+    /** Alignment of footer content. Defaults to "right". */
+    footerAlign?: DrawerFooterAlign;
+    /** Show a drop shadow above the footer. Defaults to false. */
+    footerShadow?: boolean;
+    /** Whether footer buttons stretch to full width. Defaults to true. */
+    footerFullWidth?: boolean;
+    /** Optional stepper sidebar rendered to the left of the content panel */
+    stepper?: ReactNode;
+    /** Main drawer content */
+    children: ReactNode;
+    /** Ref to element that should receive focus when the drawer opens */
+    initialFocusRef?: RefObject<HTMLElement>;
+}
+
+declare const Drawer: react.ForwardRefExoticComponent<DrawerProps & react.RefAttributes<HTMLDivElement>>;
+
+interface UseDrawerOptions {
+    onOpen?: () => void;
+    onClose?: () => void;
+}
+interface UseDrawerReturn {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+}
+declare function useDrawer(options?: UseDrawerOptions): UseDrawerReturn;
+
+export { Drawer, type DrawerFooterAlign, type DrawerProps, type DrawerSize, type LegacyDrawerHeader, type UseDrawerOptions, type UseDrawerReturn, useDrawer };

package/native/index.js

@@ -0,0 +1,586 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  Drawer: () => Drawer,
+  useDrawer: () => useDrawer
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/Drawer.tsx
+var import_react4 = require("react");
+
+// ../../foundation/primitives-native/src/Box.tsx
+var import_react_native = require("react-native");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Box = ({
+  children,
+  onPress,
+  onLayout,
+  onMoveShouldSetResponder,
+  onResponderGrant,
+  onResponderMove,
+  onResponderRelease,
+  onResponderTerminate,
+  backgroundColor,
+  borderColor,
+  borderWidth,
+  borderBottomWidth,
+  borderBottomColor,
+  borderTopWidth,
+  borderTopColor,
+  borderLeftWidth,
+  borderLeftColor,
+  borderRightWidth,
+  borderRightColor,
+  borderRadius,
+  borderStyle,
+  height,
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+  margin,
+  marginTop,
+  marginBottom,
+  marginLeft,
+  marginRight,
+  flexDirection,
+  alignItems,
+  justifyContent,
+  position,
+  top,
+  bottom,
+  left,
+  right,
+  width,
+  minWidth,
+  minHeight,
+  maxWidth,
+  maxHeight,
+  flex,
+  overflow,
+  zIndex,
+  hoverStyle,
+  pressStyle,
+  style,
+  "data-testid": dataTestId,
+  testID,
+  as,
+  src,
+  alt,
+  ...rest
+}) => {
+  const getContainerStyle = (pressed) => ({
+    backgroundColor: pressed && pressStyle?.backgroundColor ? pressStyle.backgroundColor : backgroundColor,
+    borderColor,
+    borderWidth,
+    borderBottomWidth,
+    borderBottomColor,
+    borderTopWidth,
+    borderTopColor,
+    borderLeftWidth,
+    borderLeftColor,
+    borderRightWidth,
+    borderRightColor,
+    borderRadius,
+    borderStyle,
+    overflow,
+    zIndex,
+    height,
+    width,
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight,
+    padding,
+    paddingHorizontal,
+    paddingVertical,
+    margin,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    flexDirection,
+    alignItems,
+    justifyContent,
+    position,
+    top,
+    bottom,
+    left,
+    right,
+    flex,
+    ...style
+  });
+  const finalTestID = dataTestId || testID;
+  const {
+    role,
+    tabIndex,
+    onKeyDown,
+    onKeyUp,
+    "aria-label": _ariaLabel,
+    "aria-labelledby": _ariaLabelledBy,
+    "aria-current": _ariaCurrent,
+    "aria-disabled": _ariaDisabled,
+    "aria-live": _ariaLive,
+    className,
+    "data-testid": _dataTestId,
+    ...nativeRest
+  } = rest;
+  if (as === "img" && src) {
+    const imageStyle = {
+      width,
+      height,
+      borderRadius,
+      position,
+      top,
+      bottom,
+      left,
+      right,
+      ...style
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native.Image,
+      {
+        source: { uri: src },
+        style: imageStyle,
+        testID: finalTestID,
+        resizeMode: "cover",
+        ...nativeRest
+      }
+    );
+  }
+  if (onPress) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native.Pressable,
+      {
+        onPress,
+        onLayout,
+        onMoveShouldSetResponder,
+        onResponderGrant,
+        onResponderMove,
+        onResponderRelease,
+        onResponderTerminate,
+        style: ({ pressed }) => getContainerStyle(pressed),
+        testID: finalTestID,
+        ...nativeRest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_native.View,
+    {
+      style: getContainerStyle(),
+      testID: finalTestID,
+      onLayout,
+      onMoveShouldSetResponder,
+      onResponderGrant,
+      onResponderMove,
+      onResponderRelease,
+      onResponderTerminate,
+      ...nativeRest,
+      children
+    }
+  );
+};
+
+// src/Drawer.tsx
+var import_xui_core = require("@xsolla/xui-core");
+
+// src/DrawerRoot.native.tsx
+var import_react = require("react");
+var DrawerRoot = (0, import_react.memo)((_props) => {
+  return null;
+});
+DrawerRoot.displayName = "DrawerRoot";
+
+// src/DrawerHeader.tsx
+var import_react2 = require("react");
+var import_xui_button = require("@xsolla/xui-button");
+var import_xui_icons_base = require("@xsolla/xui-icons-base");
+var import_xui_typography = require("@xsolla/xui-typography");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var DrawerHeader = (0, import_react2.memo)(
+  ({
+    title,
+    onBack,
+    onClose,
+    headerAction,
+    paddingX,
+    paddingY,
+    gap
+  }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "div",
+      {
+        style: {
+          flexShrink: 0,
+          height: 80,
+          width: "100%",
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+          paddingLeft: paddingX,
+          paddingRight: paddingX,
+          paddingTop: paddingY,
+          paddingBottom: paddingY,
+          gap,
+          boxSizing: "border-box"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            "div",
+            {
+              style: {
+                flex: 1,
+                minWidth: 0,
+                display: "flex",
+                flexDirection: "row",
+                alignItems: "center",
+                gap: 16
+              },
+              children: [
+                onBack && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  import_xui_button.IconButton,
+                  {
+                    variant: "secondary",
+                    tone: "mono",
+                    size: "xs",
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_xui_icons_base.ArrowLeft, {}),
+                    onPress: onBack,
+                    "aria-label": "Go back"
+                  }
+                ),
+                title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { flex: 1, minWidth: 0, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_xui_typography.Typography, { variant: "bodyLgAccent", noWrap: true, children: title }) })
+              ]
+            }
+          ),
+          headerAction && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { flexShrink: 0 }, children: headerAction }),
+          onClose && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            import_xui_button.IconButton,
+            {
+              variant: "secondary",
+              tone: "mono",
+              size: "xs",
+              icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_xui_icons_base.Remove, {}),
+              onPress: onClose,
+              "aria-label": "Close drawer"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+DrawerHeader.displayName = "DrawerHeader";
+
+// src/DrawerFooter.tsx
+var import_react3 = __toESM(require("react"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var flattenChildren = (children) => {
+  const result = [];
+  import_react3.default.Children.forEach(children, (child) => {
+    if (import_react3.default.isValidElement(child) && child.type === import_react3.default.Fragment) {
+      result.push(
+        ...flattenChildren(
+          child.props.children
+        )
+      );
+    } else if (child !== null && child !== void 0) {
+      result.push(child);
+    }
+  });
+  return result;
+};
+var DrawerFooter = (0, import_react3.memo)(
+  ({ children, align, shadow, fullWidth }) => {
+    const justifyContent = align === "center" ? "center" : "flex-end";
+    const renderedChildren = fullWidth ? flattenChildren(children).map(
+      (child, i) => import_react3.default.isValidElement(child) ? import_react3.default.cloneElement(
+        child,
+        {
+          key: child.key ?? i,
+          fullWidth: true
+        }
+      ) : child
+    ) : children;
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        style: {
+          flexShrink: 0,
+          width: "100%",
+          boxShadow: shadow ? "0px 2px 25px 0px rgba(7, 7, 8, 0.15)" : "none"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: fullWidth ? "stretch" : justifyContent,
+              padding: 16,
+              gap: 8
+            },
+            children: renderedChildren
+          }
+        )
+      }
+    );
+  }
+);
+DrawerFooter.displayName = "DrawerFooter";
+
+// src/Drawer.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var FOCUSABLE_SELECTORS = 'button:not([disabled]), [href], input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+var isElementVisible = (el) => {
+  if (el.offsetParent === null && getComputedStyle(el).position !== "fixed")
+    return false;
+  const style = getComputedStyle(el);
+  return style.visibility !== "hidden" && style.display !== "none";
+};
+var getFocusableElements = (container) => Array.from(
+  container.querySelectorAll(FOCUSABLE_SELECTORS)
+).filter(isElementVisible);
+var DRAWER_WIDTHS = {
+  sm: 480,
+  md: 620,
+  lg: 1056
+};
+var Drawer = (0, import_react4.forwardRef)(
+  ({
+    open: openProp,
+    isOpen,
+    onClose,
+    size = "md",
+    title: titleProp,
+    header: headerProp,
+    onBack: onBackProp,
+    headerAction,
+    closeOnOverlayClick = true,
+    closeOnEscape = true,
+    footer: footerProp,
+    bottom,
+    footerAlign = "right",
+    footerShadow = false,
+    footerFullWidth = true,
+    stepper,
+    children,
+    initialFocusRef,
+    themeMode,
+    themeProductContext
+  }, ref) => {
+    const open = openProp ?? isOpen ?? false;
+    const title = titleProp ?? headerProp?.title;
+    const onBack = onBackProp ?? headerProp?.onBack;
+    const footer = footerProp ?? bottom;
+    const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
+    const sizing = theme.sizing.drawer();
+    const [mounted, setMounted] = (0, import_react4.useState)(open);
+    (0, import_react4.useEffect)(() => {
+      if (open) setMounted(true);
+    }, [open]);
+    const drawerRef = (0, import_react4.useRef)(null);
+    const closeButtonRef = (0, import_react4.useRef)(null);
+    const previousActiveElement = (0, import_react4.useRef)(null);
+    (0, import_react4.useEffect)(() => {
+      if (!open) return;
+      if (typeof document === "undefined") return;
+      previousActiveElement.current = document.activeElement;
+      const focusTarget = initialFocusRef?.current || closeButtonRef.current || drawerRef.current && getFocusableElements(drawerRef.current)[0];
+      if (focusTarget) {
+        focusTarget.focus();
+      } else {
+        drawerRef.current?.focus();
+      }
+    }, [open, initialFocusRef]);
+    (0, import_react4.useEffect)(() => {
+      if (!open || !closeOnEscape || !onClose) return;
+      if (typeof document === "undefined") return;
+      const handleKeyDown2 = (event) => {
+        if (event.key === "Escape") onClose();
+      };
+      document.addEventListener("keydown", handleKeyDown2);
+      return () => document.removeEventListener("keydown", handleKeyDown2);
+    }, [open, closeOnEscape, onClose]);
+    const handleKeyDown = (0, import_react4.useCallback)((event) => {
+      if (event.key !== "Tab" || !drawerRef.current) return;
+      if (typeof document === "undefined") return;
+      const focusableElements = getFocusableElements(drawerRef.current);
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+      if (!firstElement) {
+        event.preventDefault();
+        return;
+      }
+      if (event.shiftKey && document.activeElement === firstElement) {
+        event.preventDefault();
+        lastElement.focus();
+      } else if (!event.shiftKey && document.activeElement === lastElement) {
+        event.preventDefault();
+        firstElement.focus();
+      }
+    }, []);
+    if (!mounted) return null;
+    const contentWidth = DRAWER_WIDTHS[size];
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      DrawerRoot,
+      {
+        open,
+        onExited: () => {
+          setMounted(false);
+          previousActiveElement.current?.focus();
+        },
+        onBackdropClick: closeOnOverlayClick ? onClose : void 0,
+        scrimColor: sizing.scrimColor,
+        outerPadding: sizing.outerPadding,
+        animationDuration: sizing.animationDuration,
+        zIndex: sizing.zIndex,
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "div",
+          {
+            style: {
+              height: "100%",
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "stretch",
+              backgroundColor: theme.colors.background.primary,
+              borderRadius: sizing.containerRadius,
+              overflow: "hidden",
+              gap: stepper ? sizing.stepperContentGap : 0
+            },
+            children: [
+              stepper && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "div",
+                {
+                  style: {
+                    flexShrink: 0,
+                    alignSelf: "stretch",
+                    backgroundColor: theme.colors.background.secondary,
+                    borderRadius: sizing.contentRadius,
+                    padding: sizing.stepperPadding,
+                    display: "flex",
+                    flexDirection: "column"
+                  },
+                  children: stepper
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                Box,
+                {
+                  ref: (node) => {
+                    drawerRef.current = node;
+                    if (typeof ref === "function") ref(node);
+                    else if (ref)
+                      ref.current = node;
+                  },
+                  role: "dialog",
+                  "aria-modal": "true",
+                  "aria-label": typeof title === "string" ? title : void 0,
+                  tabIndex: -1,
+                  onKeyDown: handleKeyDown,
+                  style: {
+                    width: contentWidth,
+                    height: "100%",
+                    flexShrink: 0,
+                    display: "flex",
+                    flexDirection: "column",
+                    outline: "none",
+                    color: theme.colors.content.primary
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      DrawerHeader,
+                      {
+                        title,
+                        onBack,
+                        onClose,
+                        headerAction,
+                        paddingX: sizing.headerPaddingX,
+                        paddingY: sizing.headerPaddingY,
+                        gap: sizing.headerGap
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      Box,
+                      {
+                        style: {
+                          flex: 1,
+                          minHeight: 0,
+                          overflowY: "auto",
+                          paddingLeft: sizing.contentPaddingX,
+                          paddingRight: sizing.contentPaddingX
+                        },
+                        children
+                      }
+                    ),
+                    footer ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      DrawerFooter,
+                      {
+                        align: footerAlign,
+                        shadow: footerShadow,
+                        fullWidth: footerFullWidth,
+                        children: footer
+                      }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { flexShrink: 0, height: 32 } })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+Drawer.displayName = "Drawer";
+
+// src/useDrawer.ts
+var import_react5 = require("react");
+function useDrawer(options) {
+  const [isOpen, setIsOpen] = (0, import_react5.useState)(false);
+  const open = (0, import_react5.useCallback)(() => {
+    setIsOpen(true);
+    options?.onOpen?.();
+  }, [options]);
+  const close = (0, import_react5.useCallback)(() => {
+    setIsOpen(false);
+    options?.onClose?.();
+  }, [options]);
+  return { isOpen, open, close };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Drawer,
+  useDrawer
+});
+//# sourceMappingURL=index.js.map