@startupjs-ui/dropdown 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.1.3](https://github.com/startupjs/startupjs-ui/compare/v0.1.2...v0.1.3) (2025-12-29)
+
+**Note:** Version bump only for package @startupjs-ui/dropdown
+
+
+
+
+
+## [0.1.2](https://github.com/startupjs/startupjs-ui/compare/v0.1.1...v0.1.2) (2025-12-29)
+
+
+### Features
+
+* add mdx and docs packages. Refactor docs to get rid of any @startupjs/ui usage and use startupjs-ui instead ([703c926](https://github.com/startupjs/startupjs-ui/commit/703c92636efb0421ffd11783f692fc892b74018f))
+* **dropdown:** refactor Dropdown component ([4305c16](https://github.com/startupjs/startupjs-ui/commit/4305c1606c9b26ae4746932b53dcb91034f713a5))

package/README.mdx

@@ -0,0 +1,91 @@
+import { useState } from 'react'
+import { View } from 'react-native'
+import Dropdown, { _PropsJsonSchema as DropdownPropsJsonSchema } from './index'
+import Icon from '@startupjs-ui/icon'
+import { Sandbox } from '@startupjs-ui/docs'
+import {
+  faEllipsisV,
+  faPencilAlt,
+  faTrashAlt
+} from '@fortawesome/free-solid-svg-icons'
+
+# Dropdown
+
+Pop-up menus. Adaptable depending on the extension.
+
+```jsx
+import { Dropdown } from 'startupjs-ui'
+```
+
+## Simple example
+
+```jsx example
+const [sort, setSort] = useState('')
+
+return (
+  <Dropdown value={sort} onChange={v => setSort(v)}>
+    <Dropdown.Caption placeholder="Sort by" />
+    <Dropdown.Item value="popular" label="Popular" />
+    <Dropdown.Item value="brand" label="Brand" />
+    <Dropdown.Item value="name" label="Name" />
+  </Dropdown>
+)
+```
+
+## Custom caption
+
+```jsx example
+const [sort, setSort] = useState('')
+
+const captionStyle = {
+  width: 30,
+  height: 30,
+  backgroundColor: 'white',
+  borderRadius: 50,
+  justifyContent: 'center',
+  alignItems: 'center'
+}
+
+return (
+  <Dropdown value={sort} onChange={v => setSort(v)}>
+    <Dropdown.Caption>
+      <View style={captionStyle}>
+        <Icon icon={faEllipsisV} />
+      </View>
+    </Dropdown.Caption>
+    <Dropdown.Item value="popular" label="Popular" />
+    <Dropdown.Item value="brand" label="Brand" />
+    <Dropdown.Item value="name" label="Name" />
+  </Dropdown>
+)
+```
+
+## Icons in items
+
+```jsx example
+const [value, setValue] = useState('')
+
+return (
+  <Dropdown value={value} onChange={v => setValue(v)}>
+    <Dropdown.Item icon={faPencilAlt} value="edit" label="Edit" />
+    <Dropdown.Item icon={faTrashAlt} value="delete" label="Delete" />
+  </Dropdown>
+)
+```
+
+## Sandbox
+
+<Sandbox
+  Component={Dropdown}
+  propsJsonSchema={DropdownPropsJsonSchema}
+  props={{
+    value: 'popular',
+    onChange: v => alert(`Selected: ${v}`),
+    children: [
+      <Dropdown.Caption placeholder="Sort by" />,
+      <Dropdown.Item value="popular" label="Popular" />,
+      <Dropdown.Item value="brand" label="Brand" />,
+      <Dropdown.Item value="name" label="Name" />
+    ]
+  }}
+/>

package/components/Caption/index.cssx.styl

@@ -0,0 +1,17 @@
+.select
+  background-color var(--color-bg-main-strong)
+  height 4u
+  border-radius .5u
+  border-style solid
+  border-width 1px
+  border-color var(--color-border-main)
+  padding 0 1u
+  align-items center
+  justify-content space-between
+  min-width 150px
+
+.placeholder
+  color var(--color-text-placeholder)
+
+.active
+  color var(--color-text-main)

package/components/Caption/index.tsx

@@ -0,0 +1,48 @@
+import { type ReactNode } from 'react'
+import { pug, observer } from 'startupjs'
+import Div from '@startupjs-ui/div'
+import Span from '@startupjs-ui/span'
+import Icon from '@startupjs-ui/icon'
+import Button from '@startupjs-ui/button'
+import { themed } from '@startupjs-ui/core'
+import { faAngleDown } from '@fortawesome/free-solid-svg-icons/faAngleDown'
+import './index.cssx.styl'
+
+export interface DropdownCaptionProps {
+  /** Caption content (used when `variant='custom'`) */
+  children?: ReactNode
+  /** Placeholder text shown when no active item */
+  placeholder?: string
+  /** Visual variant @default 'select' */
+  variant?: 'select' | 'button' | 'custom'
+  /** @private Active item label injected by Dropdown */
+  _activeLabel?: string
+}
+
+function DropdownCaption ({
+  children,
+  placeholder = 'Select a state...',
+  variant = 'select',
+  _activeLabel
+}: DropdownCaptionProps): ReactNode {
+  if (variant === 'custom') return children
+
+  if (variant === 'button') {
+    return pug`
+      Button(
+        variant='flat'
+        color='primary'
+        pointerEvents='box-none'
+      )= placeholder
+    `
+  }
+
+  return pug`
+    Div.select(row)
+      Span.placeholder(styleName={ active: !!_activeLabel })
+        = _activeLabel || placeholder
+      Icon(icon=faAngleDown)
+  `
+}
+
+export default observer(themed('DropdownCaption', DropdownCaption))

package/components/Item/index.cssx.styl

@@ -0,0 +1,47 @@
+.item
+  &.list
+    flex-direction row
+    justify-content space-between
+    border-bottom-width 1px
+    border-bottom-color #cccccc
+
+  &.buttons
+    justify-content center
+    align-items center
+    height 6u
+    border-bottom-width 1px
+    border-bottom-color #cccccc
+
+  &.popover
+    padding 12px
+
+  &.itemDown
+    border-bottom-width 0
+
+.itemText
+  &.list
+    padding 2u
+
+  &.buttons
+    padding 2u
+
+  &.active
+    color var(--color-text-primary)
+
+.iconActive
+  &.list
+    position absolute
+    top 17px
+    right 14px
+    width 2u
+    height 2u
+
+  &.buttons
+    position absolute
+    top 17px
+    left 14px
+    width 2u
+    height 2u
+
+.selectMenu
+  background-color #eeeeee

package/components/Item/index.tsx

@@ -0,0 +1,117 @@
+import { type ReactNode } from 'react'
+import { Text, View, TouchableOpacity, type StyleProp, type ViewStyle } from 'react-native'
+import { pug, observer } from 'startupjs'
+import Icon from '@startupjs-ui/icon'
+import Menu from '@startupjs-ui/menu'
+import Link from '@startupjs-ui/link'
+import { themed } from '@startupjs-ui/core'
+import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck'
+import './index.cssx.styl'
+
+export interface DropdownItemProps {
+  /** Custom styles applied to the wrapper */
+  style?: StyleProp<ViewStyle>
+  /** Navigation target (renders as Link when provided) */
+  to?: any
+  /** Item label */
+  label?: string
+  /** Item value reported to Dropdown.onChange */
+  value?: string | number
+  /** Optional icon displayed in Menu.Item (popover variant) */
+  icon?: any
+  /** Disable item interactions */
+  disabled?: boolean
+  /** Custom press handler (bypasses Dropdown.onChange) */
+  onPress?: () => void
+  /** Custom content when used as a pure/custom item */
+  children?: ReactNode
+  /** @private Active value injected by Dropdown */
+  _activeValue?: any
+  /** @private Selected index for keyboard navigation */
+  _selectIndexValue?: number
+  /** @private Variant injected by Dropdown */
+  _variant?: 'list' | 'buttons' | 'popover' | 'pure'
+  /** @private Style for active item injected by Dropdown */
+  _styleActiveItem?: StyleProp<ViewStyle>
+  /** @private Change handler injected by Dropdown */
+  _onChange?: (value: any) => void
+  /** @private Dismiss handler injected by Dropdown */
+  _onDismissDropdown?: () => void
+  /** @private Item index injected by Dropdown */
+  _index?: number
+  /** @private Items count injected by Dropdown */
+  _childrenLength?: number
+}
+
+function DropdownItem ({
+  style,
+  to,
+  label,
+  value,
+  icon,
+  disabled,
+  onPress,
+  children,
+  _activeValue,
+  _selectIndexValue,
+  _variant,
+  _styleActiveItem,
+  _onChange,
+  _onDismissDropdown,
+  _index,
+  _childrenLength
+}: DropdownItemProps): ReactNode {
+  const isPure = _variant === 'pure'
+
+  const handlePress = () => {
+    if (disabled) return
+
+    if (onPress) {
+      onPress()
+      _onDismissDropdown && _onDismissDropdown()
+    } else {
+      _onChange && _onChange(value)
+    }
+  }
+
+  if (_variant === 'popover' && !isPure) {
+    return pug`
+      Menu.Item(
+        to=to
+        style=style
+        active=_activeValue === value
+        disabled=disabled
+        styleName={ selectMenu: _selectIndexValue === _index }
+        onPress=handlePress
+        icon=icon
+      )= label
+    `
+  }
+
+  const Wrapper: any = to ? Link : TouchableOpacity
+  return pug`
+    Wrapper(
+      to=to
+      style=style
+      onPress=handlePress
+    )
+      View.item(
+        style=(!isPure && _activeValue === value) ? _styleActiveItem : undefined
+        styleName=[!isPure && _variant, {
+          active: !isPure && (_activeValue === value),
+          itemUp: !isPure && (_index === 0),
+          itemDown: !isPure && (_index === (_childrenLength || 0) - 1),
+          selectMenu: _selectIndexValue === _index
+        }]
+      )
+        if isPure
+          = children
+        else
+          Text.itemText(styleName=[_variant, { active: _activeValue && _activeValue === value }])
+            = label
+          if _activeValue === value
+            Icon.iconActive(styleName=_variant icon=faCheck)
+  `
+}
+
+export default observer(themed('DropdownItem', DropdownItem))

package/helpers/index.ts

@@ -0,0 +1 @@
+export { default as useKeyboard } from './useKeyboard'

package/helpers/useKeyboard.ts

@@ -0,0 +1,76 @@
+import { useState, useEffect } from 'react'
+import { Platform } from 'react-native'
+
+export default function useKeyboard ({
+  isShow,
+  renderContent,
+  value,
+  onChange,
+  onChangeShow
+}: {
+  isShow: boolean
+  renderContent: { current: any[] }
+  value: any
+  onChange?: (value: any) => void
+  onChangeShow: (visible: boolean) => void
+}): [number] {
+  const [selectIndexValue, setSelectIndexValue] = useState(-1)
+
+  useEffect(() => {
+    if (Platform.OS !== 'web') return
+
+    if (isShow) {
+      document.addEventListener('keydown', onKeyDown)
+    } else {
+      document.removeEventListener('keydown', onKeyDown)
+      setSelectIndexValue(-1)
+    }
+
+    return () => { document.removeEventListener('keydown', onKeyDown) }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isShow, selectIndexValue])
+
+  function onKeyDown (e: KeyboardEvent) {
+    e.preventDefault()
+    e.stopPropagation()
+
+    let item: any
+    let index: number
+    const keyName = e.key
+
+    switch (keyName) {
+      case 'ArrowUp':
+        if (selectIndexValue === 0 || (selectIndexValue === -1 && !value)) return
+
+        index = selectIndexValue - 1
+        if (selectIndexValue === -1 && value) {
+          index = renderContent.current.findIndex(item => item.props.value === value)
+          index--
+        }
+
+        setSelectIndexValue(index)
+        break
+
+      case 'ArrowDown':
+        if (selectIndexValue === renderContent.current.length - 1) return
+
+        index = selectIndexValue + 1
+        if (selectIndexValue === -1 && value) {
+          index = renderContent.current.findIndex(item => item.props.value === value)
+          index++
+        }
+
+        setSelectIndexValue(index)
+        break
+
+      case 'Enter':
+        if (selectIndexValue === -1) return
+        item = renderContent.current.find((_, i) => i === selectIndexValue)
+        onChange && onChange(item.props.value)
+        onChangeShow(false)
+        break
+    }
+  }
+
+  return [selectIndexValue]
+}

package/index.cssx.styl

@@ -0,0 +1,49 @@
+.dropdown
+  &.list
+    padding 2u
+    padding-bottom 1u
+
+  &.buttons
+    max-height 100%
+
+.case
+  &.buttons
+    margin 1.5u 1.5u 2u
+    border-radius 1u
+    background-color var(--color-bg-main-strong)
+
+.caption
+  align-self flex-start
+
+.captionText
+  &.list
+    padding 1u 2u 2u
+    font-size 21px
+
+    +web()
+      fontFamily('normal', 600)
+
+    +native()
+      fontFamily('normal', 600)
+
+.button
+  &.buttons
+    justify-content center
+    align-items center
+    margin -1u 1.5u 1.5u
+    padding 2u
+    border-radius 1u
+    background-color var(--color-bg-main-strong)
+
+.popover
+  border-radius .5u
+  shadow(2)
+
+.drawerReset
+  background-color transparent
+  height auto
+  box-shadow none
+  border-radius 0
+
+:export
+  media: $UI.media

package/index.d.ts

@@ -0,0 +1,50 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+import { type ReactNode, type RefObject } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+export declare const _PropsJsonSchema: {};
+export interface DropdownProps {
+    /** Ref to control dropdown programmatically */
+    ref?: RefObject<DropdownRef>;
+    /** Custom styles applied to the dropdown content container */
+    style?: StyleProp<ViewStyle>;
+    /** Custom styles applied to the caption wrapper */
+    captionStyle?: StyleProp<ViewStyle>;
+    /** Custom styles applied to the active item view */
+    activeItemStyle?: StyleProp<ViewStyle>;
+    /** Dropdown caption and items */
+    children?: ReactNode;
+    /** Currently selected value @default '' */
+    value?: string | number;
+    /** Popover position @default 'bottom' */
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    /** Popover attachment @default 'start' */
+    attachment?: 'start' | 'center' | 'end';
+    /** Fallback placements order */
+    placements?: any;
+    /** Drawer items rendering variant @default 'buttons' */
+    drawerVariant?: 'list' | 'buttons' | 'pure';
+    /** Title shown in list drawer variant */
+    drawerListTitle?: string;
+    /** Cancel button label in buttons drawer variant @default 'Cancel' */
+    drawerCancelLabel?: string;
+    /** Disable caption press */
+    disabled?: boolean;
+    /** Enable drawer behavior on small screens @default true */
+    hasDrawer?: boolean;
+    /** Show swipe responder zone in drawer */
+    showDrawerResponder?: boolean;
+    /** Called when item is selected */
+    onChange?: (value: string | number | undefined) => void;
+    /** Called when dropdown is dismissed via overlay/cancel */
+    onDismiss?: () => void;
+}
+export interface DropdownRef {
+    /** Open dropdown programmatically */
+    open: () => void;
+    /** Close dropdown programmatically */
+    close: () => void;
+}
+declare const ObservedDropdown: any;
+export default ObservedDropdown;

package/index.tsx

@@ -0,0 +1,313 @@
+import React, { useState, useRef, useImperativeHandle, useEffect, type ReactNode, type RefObject } from 'react'
+import {
+  Dimensions,
+  UIManager,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native'
+import { pug, observer, $ } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import Drawer from '@startupjs-ui/drawer'
+import Popover, { type PopoverRef } from '@startupjs-ui/popover'
+import DropdownCaption from './components/Caption'
+import DropdownItem from './components/Item'
+import { useKeyboard } from './helpers'
+import STYLES from './index.cssx.styl'
+
+export const _PropsJsonSchema = {/* DropdownProps */}
+
+export interface DropdownProps {
+  /** Ref to control dropdown programmatically */
+  ref?: RefObject<DropdownRef>
+  /** Custom styles applied to the dropdown content container */
+  style?: StyleProp<ViewStyle>
+  /** Custom styles applied to the caption wrapper */
+  captionStyle?: StyleProp<ViewStyle>
+  /** Custom styles applied to the active item view */
+  activeItemStyle?: StyleProp<ViewStyle>
+  /** Dropdown caption and items */
+  children?: ReactNode
+  /** Currently selected value @default '' */
+  value?: string | number
+  /** Popover position @default 'bottom' */
+  position?: 'top' | 'bottom' | 'left' | 'right'
+  /** Popover attachment @default 'start' */
+  attachment?: 'start' | 'center' | 'end'
+  /** Fallback placements order */
+  placements?: any
+  /** Drawer items rendering variant @default 'buttons' */
+  drawerVariant?: 'list' | 'buttons' | 'pure'
+  /** Title shown in list drawer variant */
+  drawerListTitle?: string
+  /** Cancel button label in buttons drawer variant @default 'Cancel' */
+  drawerCancelLabel?: string
+  /** Disable caption press */
+  disabled?: boolean
+  /** Enable drawer behavior on small screens @default true */
+  hasDrawer?: boolean
+  /** Show swipe responder zone in drawer */
+  showDrawerResponder?: boolean
+  /** Called when item is selected */
+  onChange?: (value: string | number | undefined) => void
+  /** Called when dropdown is dismissed via overlay/cancel */
+  onDismiss?: () => void
+}
+
+export interface DropdownRef {
+  /** Open dropdown programmatically */
+  open: () => void
+  /** Close dropdown programmatically */
+  close: () => void
+}
+
+// TODO: key event change scroll
+function Dropdown ({
+  style = [],
+  captionStyle,
+  activeItemStyle,
+  children,
+  value = '',
+  position = 'bottom',
+  attachment = 'start',
+  placements,
+  drawerVariant = 'buttons',
+  drawerListTitle = '',
+  drawerCancelLabel = 'Cancel',
+  disabled,
+  hasDrawer = true,
+  showDrawerResponder,
+  onChange,
+  onDismiss,
+  ref
+}: DropdownProps): ReactNode {
+  const popoverRef = useRef<PopoverRef>(null)
+  const refScroll = useRef<any>(null)
+  const renderContent = useRef<any[]>([])
+  const closeReason = useRef<null | 'toggle' | 'select' | 'dismiss' | 'resize'>(null)
+
+  const $isShow = $(false)
+  const [activeInfo, setActiveInfo] = useState<any>(null)
+  const $layoutWidth = $(
+    Math.min(Dimensions.get('window').width, Dimensions.get('screen').width)
+  )
+
+  const [selectIndexValue] = useKeyboard({
+    value,
+    isShow: $isShow.get(),
+    renderContent,
+    onChange: (v: any) => {
+      closeReason.current = 'select'
+      onChange && onChange(v)
+    },
+    onChangeShow: v => { handleVisibleChange(v) }
+  })
+
+  const isPopover = !hasDrawer || ($layoutWidth.get() > STYLES.media.tablet)
+
+  function handleWidthChange () {
+    closeReason.current = 'resize'
+    popoverRef.current?.close?.()
+    $isShow.set(false)
+    $layoutWidth.set(Math.min(Dimensions.get('window').width, Dimensions.get('screen').width))
+  }
+
+  useEffect(() => {
+    const listener = Dimensions.addEventListener('change', handleWidthChange)
+
+    return () => {
+      $isShow.del()
+      listener?.remove?.()
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  useImperativeHandle(ref, () => ({
+    open: () => {
+      handleVisibleChange(true)
+    },
+    close: () => {
+      handleVisibleChange(false, { reason: 'toggle' })
+    }
+  }))
+
+  function handleVisibleChange (nextVisible: boolean, meta: { reason?: typeof closeReason.current } = {}) {
+    if (typeof meta.reason !== 'undefined') closeReason.current = meta.reason
+
+    if (isPopover) {
+      if (nextVisible) {
+        closeReason.current = null
+        popoverRef.current?.open?.()
+        $isShow.set(true)
+      } else {
+        popoverRef.current?.close?.()
+        $isShow.set(false)
+      }
+      return
+    }
+
+    if (!nextVisible && closeReason.current === 'dismiss') onDismiss && onDismiss()
+    $isShow.set(nextVisible)
+  }
+
+  function onLayoutActive ({ nativeEvent }: any) {
+    setActiveInfo(nativeEvent.layout)
+  }
+
+  function onCancel () {
+    handleVisibleChange(false, { reason: 'dismiss' })
+  }
+
+  function onRequestOpen () {
+    const node = refScroll.current?.getScrollableNode
+      ? refScroll.current.getScrollableNode()
+      : refScroll.current
+
+    if (!node) return
+
+    UIManager.measure(node, (x, y, width, curHeight) => {
+      if (activeInfo && activeInfo.y >= (curHeight - activeInfo.height)) {
+        refScroll.current?.scrollTo?.({ y: activeInfo.y, animated: false })
+      }
+    })
+  }
+
+  let caption: ReactNode = null
+  let activeLabel = ''
+  renderContent.current = []
+
+  React.Children.toArray(children).forEach((child: any, index, arr) => {
+    if (child?.type === DropdownCaption) {
+      if (index !== 0) Error('Caption need use first child')
+      if (child.props.children) {
+        caption = React.cloneElement(child, { variant: 'custom' })
+      } else {
+        caption = child
+      }
+      return
+    }
+
+    const _child = React.cloneElement(child, {
+      _variant: child.props.children
+        ? 'pure'
+        : (isPopover ? 'popover' : drawerVariant),
+      _styleActiveItem: activeItemStyle,
+      _activeValue: value,
+      _selectIndexValue: selectIndexValue,
+      _index: caption ? (index - 1) : index,
+      _childrenLength: caption ? (arr.length - 1) : arr.length,
+      _onDismissDropdown: () => { handleVisibleChange(false) },
+      _onChange: (v: any) => {
+        closeReason.current = 'select'
+        onChange && onChange(v)
+        handleVisibleChange(false)
+      }
+    })
+
+    if (value === child.props.value) {
+      activeLabel = child.props.label
+      renderContent.current.push(pug`
+        View(
+          key=index
+          value=child.props.value
+          onLayout=onLayoutActive
+        )=_child
+      `)
+    } else {
+      renderContent.current.push(_child)
+    }
+  })
+
+  if (!caption) {
+    caption = <DropdownCaption _activeLabel={activeLabel} />
+  } else {
+    caption = React.cloneElement(caption as any, { _activeLabel: activeLabel })
+  }
+
+  const _popoverStyle = StyleSheet.flatten(style)
+  if ((caption as any).props?.variant === 'button' || (caption as any).props?.variant === 'custom') {
+    ;(_popoverStyle as any).minWidth = 160
+  }
+
+  const matchAnchorWidth = !(_popoverStyle as any)?.width && !(_popoverStyle as any)?.minWidth
+
+  if (isPopover) {
+    const renderPopoverContent = (): ReactNode => pug`
+      ScrollView(
+        ref=refScroll
+        showsVerticalScrollIndicator=false
+      )= renderContent.current
+    `
+
+    const handlePopoverCloseComplete = () => {
+      $isShow.set(false)
+      if (closeReason.current !== 'select' && closeReason.current !== 'toggle' && closeReason.current !== 'resize') {
+        onDismiss && onDismiss()
+      }
+      closeReason.current = null
+    }
+
+    return pug`
+      Popover(
+        ref=popoverRef
+        style=captionStyle
+        attachmentStyle=_popoverStyle
+        position=position
+        attachment=attachment
+        placements=placements
+        matchAnchorWidth=matchAnchorWidth
+        onOpenComplete=onRequestOpen
+        onCloseComplete=handlePopoverCloseComplete
+        renderContent=renderPopoverContent
+      )
+        TouchableOpacity(
+          disabled=disabled
+          onPress=() => handleVisibleChange(!$isShow.get(), { reason: !$isShow.get() ? null : 'toggle' })
+        )
+          = caption
+    `
+  }
+
+  return pug`
+    if caption
+      TouchableOpacity.caption(
+        disabled=disabled
+        onPress=() => handleVisibleChange(!$isShow.get())
+      )
+        = caption
+    Drawer(
+      visible=$isShow.get()
+      position='bottom'
+      style={ maxHeight: '100%' }
+      styleName={ drawerReset: drawerVariant === 'buttons' }
+      onDismiss=() => handleVisibleChange(false)
+      onRequestOpen=onRequestOpen
+      showResponder=showDrawerResponder
+    )
+      View.dropdown(styleName=drawerVariant)
+        if drawerVariant === 'list'
+          View.caption(styleName=drawerVariant)
+            Text.captionText(styleName=drawerVariant)= drawerListTitle
+        ScrollView.case(
+          ref=refScroll
+          showsVerticalScrollIndicator=false
+          style=_popoverStyle
+          styleName=drawerVariant
+        )= renderContent.current
+        if drawerVariant === 'buttons'
+          TouchableOpacity(onPress=onCancel)
+            View.button(styleName=drawerVariant)
+              Text= drawerCancelLabel
+  `
+}
+
+const ObservedDropdown: any = observer(themed('Dropdown', Dropdown))
+
+ObservedDropdown.Caption = DropdownCaption
+ObservedDropdown.Item = DropdownItem
+
+export default ObservedDropdown

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@startupjs-ui/dropdown",
+  "version": "0.1.3",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "index.tsx",
+  "types": "index.d.ts",
+  "type": "module",
+  "dependencies": {
+    "@startupjs-ui/button": "^0.1.3",
+    "@startupjs-ui/core": "^0.1.3",
+    "@startupjs-ui/div": "^0.1.3",
+    "@startupjs-ui/drawer": "^0.1.3",
+    "@startupjs-ui/icon": "^0.1.3",
+    "@startupjs-ui/link": "^0.1.3",
+    "@startupjs-ui/menu": "^0.1.3",
+    "@startupjs-ui/popover": "^0.1.3",
+    "@startupjs-ui/span": "^0.1.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "startupjs": "*"
+  },
+  "gitHead": "fd964ebc3892d3dd0a6c85438c0af619cc50c3f0"
+}