From 895cd1f44a6da5201adb4c27786b89d9f90abc21 Mon Sep 17 00:00:00 2001
From: rianmandala <rian.putra01@gojek.com>
Date: Mon, 15 Sep 2025 15:19:04 +0700
Subject: [PATCH 1/3] chore: add support custom classname and inline style
 drawer component

---
 .../apsara-ui/src/Drawer/Drawer.stories.tsx   | 21 +++++++-------
 packages/apsara-ui/src/Drawer/Drawer.tsx      | 28 +++++++++++++------
 2 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/packages/apsara-ui/src/Drawer/Drawer.stories.tsx b/packages/apsara-ui/src/Drawer/Drawer.stories.tsx
index 7e9a3ec80..dd2525712 100644
--- a/packages/apsara-ui/src/Drawer/Drawer.stories.tsx
+++ b/packages/apsara-ui/src/Drawer/Drawer.stories.tsx
@@ -1,23 +1,24 @@
-import { useState } from 'react';
-import Drawer from './Drawer';
+import { useState } from "react";
+import Drawer from "./Drawer";
 
 export const Basic = () => {
     const [open, setOpen] = useState(false);
     return (
         <>
-            <button type="button" onClick={() => setOpen(true)}>Click to open Drawer</button>
-            <Drawer
-                open={open}
-                onClose={() => setOpen(false)}
-            >
+            <button type="button" onClick={() => setOpen(true)}>
+                Click to open Drawer
+            </button>
+            <Drawer drawerStyle={{ zIndex: 1 }} open={open} onClose={() => setOpen(false)}>
                 <p>This is sample drawer content</p>
-                <button type="button" onClick={() => console.log('test')}>Test</button>
+                <button type="button" onClick={() => console.log("test")}>
+                    Test
+                </button>
             </Drawer>
         </>
     );
-}
+};
 
 export default {
     title: "Overlay/Drawer",
     component: Drawer,
-};
\ No newline at end of file
+};
diff --git a/packages/apsara-ui/src/Drawer/Drawer.tsx b/packages/apsara-ui/src/Drawer/Drawer.tsx
index 083cb3f70..1be705fe7 100644
--- a/packages/apsara-ui/src/Drawer/Drawer.tsx
+++ b/packages/apsara-ui/src/Drawer/Drawer.tsx
@@ -11,25 +11,37 @@ type DrawerProps = {
     className?: string;
     position?: "left" | "right";
     children?: React.ReactNode;
+    drawerStyle?: React.CSSProperties;
+    drawerClassName?: string;
 };
 
-const Drawer = ({ onOverlayClick, disableCloseOnOverlayClick, onClose, open = false, children, className = "", position = "right" }: DrawerProps) => {
+const Drawer = ({
+    onOverlayClick,
+    disableCloseOnOverlayClick,
+    onClose,
+    open = false,
+    children,
+    className = "",
+    position = "right",
+    drawerStyle = {},
+    drawerClassName = "",
+}: DrawerProps) => {
     const theme = useContext(ThemeContext);
 
     if (!open) return null;
     return (
-        <Wrapper>
-            <Overlay onClick={() => {
-                if (!disableCloseOnOverlayClick) onClose();
-                if (onOverlayClick) onOverlayClick();
-            }}>
-            </Overlay>
+        <Wrapper className={drawerClassName} style={drawerStyle}>
+            <Overlay
+                onClick={() => {
+                    if (!disableCloseOnOverlayClick) onClose();
+                    if (onOverlayClick) onOverlayClick();
+                }}
+            ></Overlay>
             <Body className={className} position={position}>
                 <Icon name="cross" onClick={onClose} color={theme?.drawer?.close} />
                 {children}
             </Body>
         </Wrapper>
-
     );
 };
 

From 704c86227c64fd6bc6a8708eae7620ff36ac9b51 Mon Sep 17 00:00:00 2001
From: rianmandala <rian.putra01@gojek.com>
Date: Mon, 15 Sep 2025 15:24:04 +0700
Subject: [PATCH 2/3] chore: bump version

---
 lerna.json                               |  2 +-
 packages/apsara-icons/package.json       |  2 +-
 packages/apsara-ui/package.json          |  2 +-
 packages/apsara-ui/src/Drawer/Drawer.tsx | 10 +++++-----
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/lerna.json b/lerna.json
index 621b01195..cf519538c 100644
--- a/lerna.json
+++ b/lerna.json
@@ -2,7 +2,7 @@
     "packages": ["packages/*"],
     "npmClient": "yarn",
     "useWorkspaces": true,
-    "version": "0.11.9",
+    "version": "0.12.0-alpha.11",
     "command": {
         "version": {
             "message": "chore(release): publish %s"
diff --git a/packages/apsara-icons/package.json b/packages/apsara-icons/package.json
index 5e715f4bb..5ddf12e75 100644
--- a/packages/apsara-icons/package.json
+++ b/packages/apsara-icons/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@goto-company/icons",
-    "version": "0.11.9",
+    "version": "0.12.0-alpha.11",
     "description": "Apsara icons",
     "scripts": {
         "build": "node scripts/build.js",
diff --git a/packages/apsara-ui/package.json b/packages/apsara-ui/package.json
index 7ca5002f7..365c92347 100644
--- a/packages/apsara-ui/package.json
+++ b/packages/apsara-ui/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@goto-company/apsara",
-    "version": "0.11.9",
+    "version": "0.12.0-alpha.11",
     "description": "A list of base components for apsara",
     "author": "Praveen Yadav <praveen.yadav@go-jek.com>",
     "license": "Apache-2.0",
diff --git a/packages/apsara-ui/src/Drawer/Drawer.tsx b/packages/apsara-ui/src/Drawer/Drawer.tsx
index 1be705fe7..d6e608b17 100644
--- a/packages/apsara-ui/src/Drawer/Drawer.tsx
+++ b/packages/apsara-ui/src/Drawer/Drawer.tsx
@@ -11,8 +11,8 @@ type DrawerProps = {
     className?: string;
     position?: "left" | "right";
     children?: React.ReactNode;
-    drawerStyle?: React.CSSProperties;
-    drawerClassName?: string;
+    ContainerStyle?: React.CSSProperties;
+    ContainerClassName?: string;
 };
 
 const Drawer = ({
@@ -23,14 +23,14 @@ const Drawer = ({
     children,
     className = "",
     position = "right",
-    drawerStyle = {},
-    drawerClassName = "",
+    ContainerStyle = {},
+    ContainerClassName = "",
 }: DrawerProps) => {
     const theme = useContext(ThemeContext);
 
     if (!open) return null;
     return (
-        <Wrapper className={drawerClassName} style={drawerStyle}>
+        <Wrapper className={ContainerClassName} style={ContainerStyle}>
             <Overlay
                 onClick={() => {
                     if (!disableCloseOnOverlayClick) onClose();

From d0d8eb2ea8f180552fb6df5c96b41750386abe4c Mon Sep 17 00:00:00 2001
From: rianmandala <rian.putra01@gojek.com>
Date: Mon, 23 Feb 2026 15:40:40 +0700
Subject: [PATCH 3/3] chore: bump apsara version v0.12.0-alpha.13

---
 lerna.json                         | 2 +-
 packages/apsara-icons/package.json | 2 +-
 packages/apsara-ui/package.json    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/lerna.json b/lerna.json
index cf519538c..a019df3a3 100644
--- a/lerna.json
+++ b/lerna.json
@@ -2,7 +2,7 @@
     "packages": ["packages/*"],
     "npmClient": "yarn",
     "useWorkspaces": true,
-    "version": "0.12.0-alpha.11",
+    "version": "0.12.0-alpha.13",
     "command": {
         "version": {
             "message": "chore(release): publish %s"
diff --git a/packages/apsara-icons/package.json b/packages/apsara-icons/package.json
index 5ddf12e75..669ba134d 100644
--- a/packages/apsara-icons/package.json
+++ b/packages/apsara-icons/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@goto-company/icons",
-    "version": "0.12.0-alpha.11",
+    "version": "0.12.0-alpha.13",
     "description": "Apsara icons",
     "scripts": {
         "build": "node scripts/build.js",
diff --git a/packages/apsara-ui/package.json b/packages/apsara-ui/package.json
index 365c92347..007545608 100644
--- a/packages/apsara-ui/package.json
+++ b/packages/apsara-ui/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@goto-company/apsara",
-    "version": "0.12.0-alpha.11",
+    "version": "0.12.0-alpha.13",
     "description": "A list of base components for apsara",
     "author": "Praveen Yadav <praveen.yadav@go-jek.com>",
     "license": "Apache-2.0",