revising custom integrations; rollup builds

.gitignore

@@ -32,6 +32,7 @@ dist
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
 
 # Misc
 .DS_Store

apps/docs/package.json

@@ -24,16 +24,18 @@
     "@mui/material": "^6.1.9",
     "clsx": "^2.0.0",
     "prism-react-renderer": "^2.3.0",
-    "react": "^18.0.0",
+    "react": "^18.3.1",
     "react-country-region-selector": "workspace:*",
-    "react-dom": "^18.0.0",
+    "react-dom": "^18.3.1",
     "react-select": "^5.8.3"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.6.3",
     "@docusaurus/tsconfig": "3.6.3",
     "@docusaurus/types": "3.6.3",
-    "typescript": "~5.6.2"
+    "typescript": "~5.6.2",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0"
   },
   "browserslist": {
     "production": [

apps/docs/src/components/demos/integrations/MaterialUI.tsx

@@ -6,8 +6,8 @@ import Select from '@mui/material/Select';
 import Grid from '@mui/material/Grid2';
 import { CountryDropdown, RegionDropdown } from 'react-country-region-selector';
 
-const customRender = ({ options, ...selectProps }) => (
-  <Select {...selectProps}>
+const customRender = ({ options, customProps, ...selectProps }) => (
+  <Select {...selectProps} {...customProps}>
     {options.map(({ label, value, key }) => (
       <MenuItem value={value} key={key}>
         {label}
@@ -27,14 +27,16 @@ const MaterialUISelect = () => {
           <InputLabel id="label-mui-country-field">Country</InputLabel>
           <CountryDropdown
             value={country}
-            labelId="label-mui-country-field"
             id="mui-country-field"
-            label="Country"
             onChange={(val) => {
               setCountry(val);
               setRegion('');
             }}
             customRender={customRender}
+            customProps={{
+              labelId: 'label-mui-country-field',
+              label: 'Country',
+            }}
           />
         </FormControl>
       </Grid>
@@ -44,12 +46,14 @@ const MaterialUISelect = () => {
           <RegionDropdown
             country={country}
             value={region}
-            labelId="label-mui-region-field"
-            label="Region"
             id="mui-region-field"
             onChange={(val) => setRegion(val)}
             disableWhenEmpty={true}
             customRender={customRender}
+            customProps={{
+              labelId: 'label-mui-region-field',
+              label: 'Region',
+            }}
           />
         </FormControl>
       </Grid>

apps/docs/src/components/demos/integrations/ReactSelect.tsx

@@ -10,6 +10,7 @@ const customRender = (props) => {
     onChange,
     reactSelectValue,
     onBlur,
+    customProps,
     ...selectProps
   } = props;
 
@@ -29,38 +30,41 @@ const customRender = (props) => {
 };
 
 const ReactSelect = () => {
-  const [country, setCountry] = useState();
+  const [country, setCountry] = useState<{ value: '' }>();
   const [region, setRegion] = useState();
 
   return (
     <>
       <div style={{ width: 200, display: 'inline-block', marginRight: 8 }}>
         <CountryDropdown
           value={country?.value || ''}
-          reactSelectValue={country}
           className="country"
           name="country-field"
-          classNamePrefix="country-"
           onChange={(val) => {
             setCountry(val ? val : undefined);
             setRegion(null);
           }}
           customRender={customRender}
+          customProps={{
+            reactSelectValue: country,
+            classNamePrefix: 'country-',
+          }}
         />
       </div>
       <div style={{ width: 200, display: 'inline-block' }}>
         <RegionDropdown
           country={country?.value || ''}
           value={region?.value || null}
-          reactSelectValue={region}
           className="region"
           name="region-field"
-          classNamePrefix="region-"
           onChange={(val) => {
-            console.log('... ', val);
             setRegion(val);
           }}
           customRender={customRender}
+          customProps={{
+            reactSelectValue: region,
+            classNamePrefix: 'region-',
+          }}
         />
       </div>
     </>

packages/react-country-region-selector/package.json

@@ -13,10 +13,10 @@
   "types": "./dist/types.d.ts",
   "scripts": {
     "test": "jest",
-    "build": "rollup --config config/rollup.config.ts --configPlugin typescript",
-    "dev": "rollup -c -w --config config/rollup.config.ts --configPlugin typescript",
-    "minify-data": "node config/minify-data.js",
-    "prepare": "minify-data"
+    "build": "rollup --config build/rollup.config.ts --configPlugin typescript",
+    "dev": "rollup -w --config build/rollup.config.ts --configPlugin typescript",
+    "minify-data": "node build/minify-data.js",
+    "prepare": "npm run minify-data"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

packages/react-country-region-selector/src/types.d.ts

@@ -123,6 +123,14 @@ export interface CountryDropdownProps extends NativeDropdownProps {
    * Default value: undefined
    */
   readonly customRender?: (data: RenderData) => JSX.Element;
+
+  /**
+   * If you're using a custom render method, this prop can be used to pass along any additional arbitrary props
+   * you want to your render method,
+   *
+   * Default value: undefined
+   */
+  readonly customProps?: object;
 }
 
 export type RegionsWhiteList = {
@@ -278,6 +286,14 @@ export interface RegionDropdownProps extends NativeDropdownProps {
    * Default value: undefined
    */
   readonly customRender?: (data: RenderData) => JSX.Element;
+
+  /**
+   * If you're using a custom render method, this prop can be used to pass along any additional arbitrary props
+   * you want to your render method,
+   *
+   * Default value: undefined
+   */
+  readonly customProps?: object;
 }
 
 type CountryFullName = string;

packages/react-country-region-selector/tsconfig.json

@@ -7,6 +7,6 @@
     "moduleResolution": "node",
     "types": ["@testing-library/jest-dom"]
   },
-  "include": ["src", "config"],
+  "include": ["src", "build/rollup.config.ts", "build/minify-data.js"],
   "exclude": ["node_modules", "dist"]
 }