diff --git a/.clang-format b/.clang-format new file mode 100644 index 0000000000..a52018f391 --- /dev/null +++ b/.clang-format @@ -0,0 +1,92 @@ +--- +AccessModifierOffset: -1 +AlignAfterOpenBracket: AlwaysBreak +AlignConsecutiveAssignments: false +AlignConsecutiveDeclarations: false +AlignEscapedNewlinesLeft: true +AlignOperands: false +AlignTrailingComments: false +AllowAllParametersOfDeclarationOnNextLine: false +AllowShortBlocksOnASingleLine: false +AllowShortCaseLabelsOnASingleLine: false +AllowShortFunctionsOnASingleLine: Empty +AllowShortIfStatementsOnASingleLine: false +AllowShortLoopsOnASingleLine: false +AlwaysBreakAfterReturnType: None +AlwaysBreakBeforeMultilineStrings: true +AlwaysBreakTemplateDeclarations: true +BinPackArguments: false +BinPackParameters: false +BraceWrapping: + AfterClass: false + AfterControlStatement: false + AfterEnum: false + AfterFunction: false + AfterNamespace: false + AfterObjCDeclaration: false + AfterStruct: false + AfterUnion: false + BeforeCatch: false + BeforeElse: false + IndentBraces: false +BreakBeforeBinaryOperators: None +BreakBeforeBraces: Attach +BreakBeforeTernaryOperators: true +BreakConstructorInitializersBeforeComma: false +BreakAfterJavaFieldAnnotations: false +BreakStringLiterals: false +ColumnLimit: 80 +CommentPragmas: '^ IWYU pragma:' +ConstructorInitializerAllOnOneLineOrOnePerLine: true +ConstructorInitializerIndentWidth: 4 +ContinuationIndentWidth: 4 +Cpp11BracedListStyle: true +DerivePointerAlignment: false +DisableFormat: false +ForEachMacros: [ FOR_EACH_RANGE, FOR_EACH, ] +IncludeCategories: + - Regex: '^<.*\.h(pp)?>' + Priority: 1 + - Regex: '^<.*' + Priority: 2 + - Regex: '.*' + Priority: 3 +IndentCaseLabels: true +IndentWidth: 2 +IndentWrappedFunctionNames: false +KeepEmptyLinesAtTheStartOfBlocks: false +MacroBlockBegin: '' +MacroBlockEnd: '' +MaxEmptyLinesToKeep: 1 +NamespaceIndentation: None +ObjCBlockIndentWidth: 2 +ObjCSpaceAfterProperty: true +ObjCSpaceBeforeProtocolList: true +PenaltyBreakBeforeFirstCallParameter: 1 +PenaltyBreakComment: 300 +PenaltyBreakFirstLessLess: 120 +PenaltyBreakString: 1000 +PenaltyExcessCharacter: 1000000 +PenaltyReturnTypeOnItsOwnLine: 200 +PointerAlignment: Left +ReflowComments: true +SortIncludes: true +SpaceAfterCStyleCast: false +SpaceBeforeAssignmentOperators: true +SpaceBeforeParens: ControlStatements +SpaceInEmptyParentheses: false +SpacesBeforeTrailingComments: 1 +SpacesInAngles: false +SpacesInContainerLiterals: true +SpacesInCStyleCastParentheses: false +SpacesInParentheses: false +SpacesInSquareBrackets: false +Standard: Cpp11 +TabWidth: 8 +UseTab: Never +--- +Language: ObjC +ColumnLimit: 120 +BreakBeforeBraces: WebKit +PointerAlignment: Right +... diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000000..93c6ab9c01 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,8 @@ +typings +node_modules +example/android-bundle.js +example/ios-bundle.js +example/web-build + +# generated by bob +dist/ diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000000..f9a57e1a7c --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1 @@ +module.exports = {extends: '@react-native'}; diff --git a/.flowconfig b/.flowconfig new file mode 100644 index 0000000000..70a7f4e439 --- /dev/null +++ b/.flowconfig @@ -0,0 +1,83 @@ +[ignore] +; We fork some components by platform +.*/*[.]android.js +.*/*[.]windows.js + +; Ignore templates for 'react-native init' +/template/.* + +; Ignore the Dangerfile +/bots/dangerfile.js + +; Ignore "BUCK" generated dirs +/\.buckd/ + +; Ignore polyfills +node_modules/react-native/Libraries/polyfills/.* + +; Flow doesn't support platforms +.*/Libraries/Utilities/LoadingView.js + +.*/node_modules/resolve/test/resolver/malformed_package_json/package\.json$ + +; Ignore traveling-fastlane-darwin +.*/node_modules/@expo/traveling-fastlane-darwin/.* + + +[untyped] +.*/node_modules/@react-native-community/cli/.*/.* + +[include] + +[declarations] +.*/node_modules/.* + +[libs] +node_modules/react-native/interface.js +node_modules/react-native/flow/ + +[options] +emoji=true + +exact_by_default=true + +format.bracket_spacing=false + +module.file_ext=.js +module.file_ext=.json +module.file_ext=.ios.js +module.file_ext=.web.js + +munge_underscores=true + +module.name_mapper='^react-native/\(.*\)$' -> '/node_modules/react-native/\1' +module.name_mapper='^@?[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> '/node_modules/react-native/Libraries/Image/RelativeImageStub' + +suppress_type=$FlowIssue +suppress_type=$FlowFixMe +suppress_type=$FlowFixMeProps +suppress_type=$FlowFixMeState + +server.max_workers=2 + +[lints] +sketchy-null-number=warn +sketchy-null-mixed=warn +sketchy-number=warn +untyped-type-import=warn +nonstrict-import=warn +deprecated-type=warn +unsafe-getters-setters=warn +unnecessary-invariant=warn + +[strict] +deprecated-type +nonstrict-import +sketchy-null +unclear-type +unsafe-getters-setters +untyped-import +untyped-type-import + +[version] +^0.222.0 diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS new file mode 100644 index 0000000000..7251df7aa0 --- /dev/null +++ b/.github/CODEOWNERS @@ -0,0 +1 @@ +* @Naturalclar \ No newline at end of file diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 0000000000..82aa0622e3 --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,137 @@ +name: Build +on: pull_request + +jobs: + lint: + runs-on: ubuntu-latest + strategy: + matrix: + node-version: [18, 20] + steps: + - uses: actions/checkout@v2 + - uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - name: Get yarn cache + id: yarn-cache + run: echo "::set-output name=dir::$(yarn cache dir)" + - uses: actions/cache@v2 + with: + path: ${{ steps.yarn-cache.outputs.dir }} + key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} + - name: Install Dependencies + run: yarn + - name: ESLint Checks + run: yarn validate:eslint + flow: + runs-on: ubuntu-latest + strategy: + matrix: + node-version: [18, 20] + steps: + - uses: actions/checkout@v2 + - uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - name: Get yarn cache + id: yarn-cache + run: echo "::set-output name=dir::$(yarn cache dir)" + - uses: actions/cache@v2 + with: + path: ${{ steps.yarn-cache.outputs.dir }} + key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} + - name: Install Dependencies + run: yarn + - name: Flow Checks + run: yarn validate:flow + tsc: + runs-on: ubuntu-latest + strategy: + matrix: + node-version: [18, 20] + steps: + - uses: actions/checkout@v2 + - uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - name: Get yarn cache + id: yarn-cache + run: echo "::set-output name=dir::$(yarn cache dir)" + - uses: actions/cache@v2 + with: + path: ${{ steps.yarn-cache.outputs.dir }} + key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} + - name: Install Dependencies + run: yarn + - name: TypeScript type check + run: yarn validate:typescript + android: + runs-on: ubuntu-latest + strategy: + matrix: + node-version: [18, 20] + steps: + - uses: actions/checkout@v2 + - uses: actions/setup-java@v1 + with: + java-version: '11' + - uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - name: Get yarn cache + id: yarn-cache + run: echo "::set-output name=dir::$(yarn cache dir)" + - uses: actions/cache@v2 + with: + path: ${{ steps.yarn-cache.outputs.dir }} + key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} + - name: Install Dependencies + run: yarn + - name: Build Android Example App and Library + run: cd example/android && ./gradlew clean assembleDebug + ios: + runs-on: macos-latest + strategy: + matrix: + node-version: [18, 20] + steps: + - uses: actions/checkout@v2 + - uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - name: Get yarn cache + id: yarn-cache + run: echo "::set-output name=dir::$(yarn cache dir)" + - uses: actions/cache@v2 + with: + path: ${{ steps.yarn-cache.outputs.dir }} + key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} + - name: Install Dependencies + run: yarn + - name: Install Podfiles + run: cd example && npx pod-install + - name: Build example app + run: yarn ios + macos: + runs-on: macos-latest + strategy: + matrix: + node-version: [18, 20] + steps: + - uses: actions/checkout@v2 + - uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - name: Get yarn cache + id: yarn-cache + run: echo "::set-output name=dir::$(yarn cache dir)" + - uses: actions/cache@v2 + with: + path: ${{ steps.yarn-cache.outputs.dir }} + key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} + - name: Install Dependencies + run: yarn + - name: Install Podfiles + run: cd example/macos && npx pod-install + - name: Build example app + run: yarn macos diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml new file mode 100644 index 0000000000..15bbef2ca2 --- /dev/null +++ b/.github/workflows/publish.yml @@ -0,0 +1,35 @@ +name: Publish +on: + push: + branches: + - 'master' + + +jobs: + publish: + runs-on: ubuntu-latest + strategy: + matrix: + node-version: [18] + steps: + - name: Checkout + uses: actions/checkout@v2 + with: + fetch-depth: 0 + - uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - name: Get yarn cache + id: yarn-cache + run: echo "::set-output name=dir::$(yarn cache dir)" + - uses: actions/cache@v2 + with: + path: ${{ steps.yarn-cache.outputs.dir }} + key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} + - name: Install Dependencies + run: yarn + - name: Publish Package + run: yarn ci:publish + env: + GITHUB_TOKEN: ${{ secrets.GH_TOKEN }} + NPM_TOKEN: ${{ secrets.NPM_TOKEN }} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000000..536aca90f3 --- /dev/null +++ b/.gitignore @@ -0,0 +1,78 @@ + +# OSX +# +.DS_Store + +# node.js +# +node_modules/ +npm-debug.log +yarn-error.log + + +# Xcode +# +build/ +*.pbxuser +!default.pbxuser +*.mode1v3 +!default.mode1v3 +*.mode2v3 +!default.mode2v3 +*.perspectivev3 +!default.perspectivev3 +xcuserdata +*.xccheckout +*.moved-aside +DerivedData +*.hmap +*.ipa +*.xcuserstate +project.xcworkspace + + +# Android/IntelliJ +# +build/ +.idea +.gradle +local.properties +*.iml + +# BUCK +buck-out/ +\.buckd/ + +# Editor config +.vscode + +# Outputs +coverage + +.tmp +example/android-bundle.js +example/ios-bundle.js +index.android.bundle +index.ios.bundle + +# CocoaPods +/ios/Pods/ +example/ios/Pods/ + +# Android generated code +.project +.settings +.classpath + +# expo generated files +.expo +web-build + +# MSBuild logs +*.binlog + +# generated by bob +dist/ + +# yarn files +.yarn \ No newline at end of file diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000000..360d736e61 --- /dev/null +++ b/.npmignore @@ -0,0 +1,8 @@ +/screenshots +__tests__ +/example +/e2e +/.circleci +/webpack.config.js +/app.config.js +/.expo \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000000..b497528177 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,7 @@ +{ + "singleQuote": true, + "trailingComma": "all", + "bracketSpacing": false, + "jsxBracketSameLine": true, + "parser": "flow" +} \ No newline at end of file diff --git a/.releaserc b/.releaserc new file mode 100644 index 0000000000..7786a94636 --- /dev/null +++ b/.releaserc @@ -0,0 +1,16 @@ +{ + "plugins": [ + "@semantic-release/commit-analyzer", + "@semantic-release/release-notes-generator", + "@semantic-release/npm", + "@semantic-release/github", + [ + "@semantic-release/git", + { + "assets": "package.json", + "message": "chore(release): ${nextRelease.version} [skip ci] \n\n${nextRelease.notes}" + } + ] + ] +} + diff --git a/.yarnrc.yml b/.yarnrc.yml new file mode 100644 index 0000000000..3186f3f079 --- /dev/null +++ b/.yarnrc.yml @@ -0,0 +1 @@ +nodeLinker: node-modules diff --git a/FabricExample/.bundle/config b/FabricExample/.bundle/config new file mode 100644 index 0000000000..848943bb52 --- /dev/null +++ b/FabricExample/.bundle/config @@ -0,0 +1,2 @@ +BUNDLE_PATH: "vendor/bundle" +BUNDLE_FORCE_RUBY_PLATFORM: 1 diff --git a/FabricExample/.eslintrc.js b/FabricExample/.eslintrc.js new file mode 100644 index 0000000000..187894b6af --- /dev/null +++ b/FabricExample/.eslintrc.js @@ -0,0 +1,4 @@ +module.exports = { + root: true, + extends: '@react-native', +}; diff --git a/FabricExample/.gitignore b/FabricExample/.gitignore new file mode 100644 index 0000000000..fea7bba3cf --- /dev/null +++ b/FabricExample/.gitignore @@ -0,0 +1,73 @@ +# OSX +# +.DS_Store + +# Xcode +# +build/ +*.pbxuser +!default.pbxuser +*.mode1v3 +!default.mode1v3 +*.mode2v3 +!default.mode2v3 +*.perspectivev3 +!default.perspectivev3 +xcuserdata +*.xccheckout +*.moved-aside +DerivedData +*.hmap +*.ipa +*.xcuserstate +**/.xcode.env.local + +# Android/IntelliJ +# +build/ +.idea +.gradle +local.properties +*.iml +*.hprof +.cxx/ +*.keystore +!debug.keystore + +# node.js +# +node_modules/ +npm-debug.log +yarn-error.log + +# fastlane +# +# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the +# screenshots whenever they are needed. +# For more information about the recommended setup visit: +# https://docs.fastlane.tools/best-practices/source-control/ + +**/fastlane/report.xml +**/fastlane/Preview.html +**/fastlane/screenshots +**/fastlane/test_output + +# Bundle artifact +*.jsbundle + +# Ruby / CocoaPods +**/Pods/ +/vendor/bundle/ + +# Temporary files created by Metro to check the health of the file watcher +.metro-health-check* + +# testing +/coverage + +.yarn/* +!.yarn/patches +!.yarn/plugins +!.yarn/releases +!.yarn/sdks +!.yarn/versions diff --git a/FabricExample/.prettierrc.js b/FabricExample/.prettierrc.js new file mode 100644 index 0000000000..2b540746a7 --- /dev/null +++ b/FabricExample/.prettierrc.js @@ -0,0 +1,7 @@ +module.exports = { + arrowParens: 'avoid', + bracketSameLine: true, + bracketSpacing: false, + singleQuote: true, + trailingComma: 'all', +}; diff --git a/FabricExample/.watchmanconfig b/FabricExample/.watchmanconfig new file mode 100644 index 0000000000..0967ef424b --- /dev/null +++ b/FabricExample/.watchmanconfig @@ -0,0 +1 @@ +{} diff --git a/FabricExample/App.tsx b/FabricExample/App.tsx new file mode 100644 index 0000000000..2109715f21 --- /dev/null +++ b/FabricExample/App.tsx @@ -0,0 +1,86 @@ +import * as React from 'react'; +import { + Platform, + ScrollView, + StyleSheet, + Text, + View, + SafeAreaView, + I18nManager, + Switch, +} from 'react-native'; + +import * as PickerExamples from './PickerExample'; +import * as PickerIOSExamples from './PickerIOSExample'; + +export default function App() { + const [isRTL, setIsRTL] = React.useState(I18nManager.isRTL); + React.useEffect(() => { + I18nManager.allowRTL(true); + }, []); + + return ( + + + + { + setIsRTL(newValue); + I18nManager.forceRTL(newValue); + }} + /> + {I18nManager.isRTL ? 'RTL' : 'LTR'} + + + Picker Examples + {PickerExamples.examples.map(element => ( + + {element.title} + {element.render()} + + ))} + {Platform.OS === 'ios' && ( + PickerIOS Examples + )} + {Platform.OS === 'ios' && + PickerIOSExamples.examples.map(element => ( + + {element.title} + {element.render()} + + ))} + {Platform.OS === 'windows' && ( + PickerWindows Examples + )} + + + + ); +} + +const styles = StyleSheet.create({ + main: { + backgroundColor: '#F5FCFF', + }, + container: { + padding: 24, + paddingBottom: 60, + }, + title: { + fontSize: 18, + }, + elementContainer: { + marginTop: 8, + }, + heading: { + fontSize: 22, + color: 'black', + }, + rtlSwitchContainer: { + flexDirection: 'row', + justifyContent: 'space-between', + paddingHorizontal: 40, + paddingTop: 20, + }, +}); diff --git a/FabricExample/Gemfile b/FabricExample/Gemfile new file mode 100644 index 0000000000..40458149c8 --- /dev/null +++ b/FabricExample/Gemfile @@ -0,0 +1,6 @@ +# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version +ruby ">= 2.6.10" + +# Exclude problematic versions of cocoapods and activesupport that causes build failures. +gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1' +gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0' diff --git a/FabricExample/Gemfile.lock b/FabricExample/Gemfile.lock new file mode 100644 index 0000000000..c8cfb316ed --- /dev/null +++ b/FabricExample/Gemfile.lock @@ -0,0 +1,99 @@ +GEM + remote: https://rubygems.org/ + specs: + CFPropertyList (3.0.6) + rexml + activesupport (7.0.8) + concurrent-ruby (~> 1.0, >= 1.0.2) + i18n (>= 1.6, < 2) + minitest (>= 5.1) + tzinfo (~> 2.0) + addressable (2.8.5) + public_suffix (>= 2.0.2, < 6.0) + algoliasearch (1.27.5) + httpclient (~> 2.8, >= 2.8.3) + json (>= 1.5.1) + atomos (0.1.3) + claide (1.1.0) + cocoapods (1.14.3) + addressable (~> 2.8) + claide (>= 1.0.2, < 2.0) + cocoapods-core (= 1.14.3) + cocoapods-deintegrate (>= 1.0.3, < 2.0) + cocoapods-downloader (>= 2.1, < 3.0) + cocoapods-plugins (>= 1.0.0, < 2.0) + cocoapods-search (>= 1.0.0, < 2.0) + cocoapods-trunk (>= 1.6.0, < 2.0) + cocoapods-try (>= 1.1.0, < 2.0) + colored2 (~> 3.1) + escape (~> 0.0.4) + fourflusher (>= 2.3.0, < 3.0) + gh_inspector (~> 1.0) + molinillo (~> 0.8.0) + nap (~> 1.0) + ruby-macho (>= 2.3.0, < 3.0) + xcodeproj (>= 1.23.0, < 2.0) + cocoapods-core (1.14.3) + activesupport (>= 5.0, < 8) + addressable (~> 2.8) + algoliasearch (~> 1.0) + concurrent-ruby (~> 1.1) + fuzzy_match (~> 2.0.4) + nap (~> 1.0) + netrc (~> 0.11) + public_suffix (~> 4.0) + typhoeus (~> 1.0) + cocoapods-deintegrate (1.0.5) + cocoapods-downloader (2.1) + cocoapods-plugins (1.0.0) + nap + cocoapods-search (1.0.1) + cocoapods-trunk (1.6.0) + nap (>= 0.8, < 2.0) + netrc (~> 0.11) + cocoapods-try (1.2.0) + colored2 (3.1.2) + concurrent-ruby (1.2.2) + escape (0.0.4) + ethon (0.16.0) + ffi (>= 1.15.0) + ffi (1.16.3) + fourflusher (2.3.1) + fuzzy_match (2.0.4) + gh_inspector (1.1.3) + httpclient (2.8.3) + i18n (1.14.1) + concurrent-ruby (~> 1.0) + json (2.6.3) + minitest (5.20.0) + molinillo (0.8.0) + nanaimo (0.3.0) + nap (1.1.0) + netrc (0.11.0) + public_suffix (4.0.7) + rexml (3.2.6) + ruby-macho (2.5.1) + typhoeus (1.4.1) + ethon (>= 0.9.0) + tzinfo (2.0.6) + concurrent-ruby (~> 1.0) + xcodeproj (1.23.0) + CFPropertyList (>= 2.3.3, < 4.0) + atomos (~> 0.1.3) + claide (>= 1.0.2, < 2.0) + colored2 (~> 3.1) + nanaimo (~> 0.3.0) + rexml (~> 3.2.4) + +PLATFORMS + ruby + +DEPENDENCIES + activesupport (>= 6.1.7.3, < 7.1.0) + cocoapods (~> 1.13) + +RUBY VERSION + ruby 2.7.5p203 + +BUNDLED WITH + 2.1.4 diff --git a/FabricExample/PickerExample.tsx b/FabricExample/PickerExample.tsx new file mode 100644 index 0000000000..578bfb2368 --- /dev/null +++ b/FabricExample/PickerExample.tsx @@ -0,0 +1,326 @@ +import * as React from 'react'; +import {Text, View, StyleSheet, Button} from 'react-native'; +import {Picker} from '@react-native-picker/picker'; + +const Item: any = Picker.Item; + +export function BasicPickerExample() { + const [value, setValue] = React.useState('key1'); + return ( + setValue(v)} + accessibilityLabel="Basic Picker Accessibility Label" + > + + + + ); +} + +function StyledPickerExample() { + const [value, setValue] = React.useState('key1'); + return ( + setValue(v)} + accessibilityLabel="Styled Picker Accessibility Label" + > + + + + + ); +} + +function DisabledPickerExample() { + const [value] = React.useState('key1'); + + return ( + + + + + ); +} + +function DisabledSpecificPickerExample() { + const [value] = React.useState('key1'); + + return ( + + + + + + ); +} + +function DropdownPickerExample() { + const [value, setValue] = React.useState('key1'); + + return ( + setValue(v)} + mode="dropdown" + > + + + + ); +} + +function DropdownMultilinePickerExample() { + const [value, setValue] = React.useState('key1'); + + return ( + setValue(v)} + mode="dropdown" + > + + + + ); +} + +function PromptPickerExample() { + const [value, setValue] = React.useState('key1'); + return ( + setValue(v)} + prompt="Pick one, just one" + > + + + + ); +} + +function PromptMultilinePickerExample() { + const [value, setValue] = React.useState('key1'); + return ( + setValue(v)} + prompt="Pick one, just one" + > + + + + ); +} + +function CustomDropdownArrowColorPickerExample() { + return ( + + + + + + + ); +} + +function NoListenerPickerExample() { + return ( + + + + + + + Cannot change the value of this picker because it doesn't update + selectedValue. + + + ); +} + +function ThemeVariantOverridePickerExample() { + const [themeVariantValue, setThemeVariantValue] = React.useState('dark'); + const isDarkMode = themeVariantValue === 'dark'; + + const handleSelect = ({nativeEvent: {newValue}}) => + setThemeVariantValue(newValue); + + return ( + + + + + + + ); +} + +function ColorPickerExample() { + const [value, setValue] = React.useState('red'); + const [isFocused, setIsFocused] = React.useState(false); + const [isSecondFocused, setIsSecondFocused] = React.useState(false); + const pickerRef = React.useRef(null); + + return ( + <> +