@cleartrip/ct-design-dropdown 5.21.0-SNAPSHOT-native-main.1 → 5.21.0

package/dist/Dropdown.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.native.d.ts","sourceRoot":"","sources":["../packages/components/Dropdown/src/Dropdown.native.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAAQ,MAAM,QAAQ,CAAC;AA8C7C,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAmLrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Dropdown.native.d.ts","sourceRoot":"","sources":["../packages/components/Dropdown/src/Dropdown.native.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAAQ,MAAM,QAAQ,CAAC;AAsD7C,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAqLrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cleartrip/ct-design-dropdown",
-  "version": "5.21.0-SNAPSHOT-native-main.1",
+  "version": "5.21.0",
   "description": "Dropdown Component",
   "types": "dist/index.d.ts",
   "main": "./dist/ct-design-dropdown.cjs.js",
@@ -24,12 +24,12 @@
     "src"
   ],
   "dependencies": {
-    "@cleartrip/ct-design-theme": "5.21.0-SNAPSHOT-native-main.1",
-    "@cleartrip/ct-design-types": "5.21.0-SNAPSHOT-native-main.1",
-    "@cleartrip/ct-design-container": "5.21.0-SNAPSHOT-native-main.1",
-    "@cleartrip/ct-design-typography": "5.21.0-SNAPSHOT-native-main.1",
-    "@cleartrip/ct-design-icons": "54.0.0-SNAPSHOT-native-main.1",
-    "@cleartrip/ct-design-style-manager": "5.21.0-SNAPSHOT-native-main.1"
+    "@cleartrip/ct-design-theme": "5.21.0",
+    "@cleartrip/ct-design-types": "5.21.0",
+    "@cleartrip/ct-design-typography": "5.21.0",
+    "@cleartrip/ct-design-container": "5.21.0",
+    "@cleartrip/ct-design-icons": "55.0.0",
+    "@cleartrip/ct-design-style-manager": "5.21.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

package/src/Dropdown.native.tsx

@@ -11,17 +11,24 @@ import { DropdownProps, Item } from './type';
 const { height: screenHeight } = Dimensions.get('screen');
 
 const staticStyle = makeStyles(() => ({
-  dropDownItemListContainer: {
+  // Outer shell owns the shadow. iOS clips shadows when overflow:'hidden' is on
+  // the same view, so clipping stays on the inner container below.
+  dropDownItemListShadow: {
     width: '100%',
-    maxHeight: screenHeight * 0.19,
-    borderRadius: 5,
     position: 'absolute',
-    overflow: 'hidden',
+    borderRadius: 5,
+    backgroundColor: 'white',
     shadowColor: '#000',
     shadowOffset: { width: 0, height: 1 },
     shadowOpacity: 0.22,
     shadowRadius: 2.22,
     elevation: 3,
+  },
+  dropDownItemListContainer: {
+    width: '100%',
+    maxHeight: screenHeight * 0.19,
+    borderRadius: 5,
+    overflow: 'hidden',
     backgroundColor: 'white',
   },
   modalBackground: {
@@ -31,6 +38,7 @@ const staticStyle = makeStyles(() => ({
   overlayButtonWrapper: {
     position: 'absolute',
     alignItems: 'center',
+    overflow: 'visible',
   },
   dropDownItemContainer: {
     width: '100%',
@@ -146,51 +154,53 @@ const Dropdown: React.FC<DropdownProps> = ({
     <Container
       styleConfig={{
         root: [
-          staticStyle.dropDownItemListContainer,
+          staticStyle.dropDownItemListShadow,
           ...dropDownItemListContainer,
           isShowDropDownOnTop ? { bottom: -height } : { top: 0 },
         ],
       }}
     >
-      <ScrollView
-        ref={scrollRef}
-        contentContainerStyle={[staticStyle.scrollContent]}
-        showsVerticalScrollIndicator={false}
-      >
-        {itemList.map((item, index) => {
-          const dropdownItem = renderItem?.(item, index) || item?.label;
-          const backgroundColor = index === singleSelectIndex ? '#1a1a1a' : 'white';
-          const isSelected = index === singleSelectIndex;
-
-          return (
-            <Pressable
-              key={`${item.value}-${index}`}
-              onLayout={(event: LayoutChangeEvent) => {
-                const layout = event.nativeEvent.layout;
-                itemsRef.current[index] = layout.y;
-                if (itemList.length - 1 === index && focus) {
-                  scrollToIndex(singleSelectIndex);
-                }
-              }}
-              style={({ pressed }) => [
-                { backgroundColor: pressed ? 'rgb(231, 231, 231)' : backgroundColor },
-                staticStyle.dropDownItemContainer,
-                ...dropDownItemContainer,
-              ]}
-              onPress={() => singleSelectClickHandler(item, index)}
-            >
-              <Typography
-                styleConfig={dropDownItemTextContainer}
-                variant={TypographyVariant.HM4}
-                color={isSelected ? TypographyColor.NEUTRAL : TypographyColor.PRIMARY}
+      <Container styleConfig={{ root: [staticStyle.dropDownItemListContainer] }}>
+        <ScrollView
+          ref={scrollRef}
+          contentContainerStyle={[staticStyle.scrollContent]}
+          showsVerticalScrollIndicator={false}
+        >
+          {itemList.map((item, index) => {
+            const dropdownItem = renderItem?.(item, index) || item?.label;
+            const backgroundColor = index === singleSelectIndex ? '#1a1a1a' : 'white';
+            const isSelected = index === singleSelectIndex;
+
+            return (
+              <Pressable
+                key={`${item.value}-${index}`}
+                onLayout={(event: LayoutChangeEvent) => {
+                  const layout = event.nativeEvent.layout;
+                  itemsRef.current[index] = layout.y;
+                  if (itemList.length - 1 === index && focus) {
+                    scrollToIndex(singleSelectIndex);
+                  }
+                }}
+                style={({ pressed }) => [
+                  { backgroundColor: pressed ? 'rgb(231, 231, 231)' : backgroundColor },
+                  staticStyle.dropDownItemContainer,
+                  ...dropDownItemContainer,
+                ]}
+                onPress={() => singleSelectClickHandler(item, index)}
               >
-                {' '}
-                {dropdownItem}
-              </Typography>
-            </Pressable>
-          );
-        })}
-      </ScrollView>
+                <Typography
+                  styleConfig={dropDownItemTextContainer}
+                  variant={TypographyVariant.HM4}
+                  color={isSelected ? TypographyColor.NEUTRAL : TypographyColor.PRIMARY}
+                >
+                  {' '}
+                  {dropdownItem}
+                </Typography>
+              </Pressable>
+            );
+          })}
+        </ScrollView>
+      </Container>
     </Container>
   );