Update example project

example/.gitignore

@@ -1,3 +1,8 @@
 /checkouts
 /target
 /resources/public/js
+/node_modules
+.cpcache
+.idea
+.lsp
+.shadow-cljs

example/README.md

@@ -2,6 +2,10 @@
 
 Example project demonstrating `arttuka/reagent-material-ui`. Server will run at http://localhost:9500/
 
+If you're running this example with NPM deps,
+you can also uncomment the `example.data-grid` require
+and its use in `core.cljs` to see an example of `@mui/x-data-grid`.
+
 ### Run with Figwheel Main
 
 #### Leiningen + CLJSJS deps

example/deps.edn

@@ -1,8 +1,8 @@
 {:paths   ["src" "target" "resources"]
- :deps    {arttuka/reagent-material-ui {:mvn/version "5.2.4-0"
+ :deps    {arttuka/reagent-material-ui {:mvn/version "5.4.3-0"
                                         #_#_:exclusions [arttuka/reagent-material-ui-js]}
            cljsjs/react                {:mvn/version "17.0.2-0"}
            cljsjs/react-dom            {:mvn/version "17.0.2-0"}
-           com.bhauman/figwheel-main   {:mvn/version "0.2.13"}}
+           com.bhauman/figwheel-main   {:mvn/version "0.2.16"}}
  :aliases {:run-dev {:main-opts ["-m" "figwheel.main" "-b" "dev" "-r"]}
            :run-npm {:main-opts ["-m" "figwheel.main" "-b" "npm" "-r"]}}}

example/package.json

@@ -2,19 +2,19 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@mui/lab": "5.0.0-alpha.60",
-    "@mui/material": "5.2.4",
-    "@mui/x-data-grid": "5.2.0",
+    "@mui/lab": "5.0.0-alpha.70",
+    "@mui/material": "5.4.3",
+    "@mui/x-data-grid": "5.5.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-transition-group": "^4.4.2",
-    "shadow-cljs": "^2.16.8"
+    "shadow-cljs": "2.16.12"
   },
   "scripts": {
     "watch": "shadow-cljs watch dev"
   },
   "devDependencies": {
-    "webpack": "^5.65.0",
-    "webpack-cli": "^4.9.1"
+    "webpack": "^5.69.0",
+    "webpack-cli": "^4.9.2"
   }
 }

example/project.clj

@@ -1,12 +1,12 @@
 (defproject reagent-material-ui-example "1.0.0"
   :dependencies [[org.clojure/clojure "1.10.3"]
-                 [org.clojure/clojurescript "1.10.896"]
-                 [arttuka/reagent-material-ui "5.2.4-0"
+                 [org.clojure/clojurescript "1.11.4"]
+                 [arttuka/reagent-material-ui "5.4.3-0"
                   #_#_ :exclusions [arttuka/reagent-material-ui-js]]
                  [cljsjs/react "17.0.2-0"]
                  [cljsjs/react-dom "17.0.2-0"]]
   :source-paths ["src"]
-  :profiles {:dev {:dependencies   [[com.bhauman/figwheel-main "0.2.15" :exclusions [org.clojure/clojurescript]]]
+  :profiles {:dev {:dependencies   [[com.bhauman/figwheel-main "0.2.16" :exclusions [org.clojure/clojurescript]]]
                    :resource-paths ["target"]}}
   :clean-targets ^{:protect false} ["target" "resources/public/js" ".shadow-cljs"]
   :aliases {"run:dev" ["trampoline" "run" "-m" "figwheel.main" "-b" "dev" "-r"]

example/shadow-cljs.edn

@@ -1,5 +1,5 @@
 {:dependencies [[reagent "1.1.0"]
-                [arttuka/reagent-material-ui "5.2.4-0"]]
+                [arttuka/reagent-material-ui "5.4.3-0"]]
  :source-paths ["src"]
  :builds       {:dev {:target           :browser
                       :output-dir       "resources/public/js"

example/src/example/core.cljs

@@ -21,6 +21,7 @@
             [reagent-mui.lab.localization-provider :refer [localization-provider]]
             [reagent-mui.styles :as styles]
             [example.autocomplete :refer [autocomplete]]
+            [example.select :as select]
             [example.data-grid :as data-grid])
   (:import (goog.i18n DateTimeSymbols_en_US)))
 
@@ -160,7 +161,12 @@
                   :on-change (fn [new-value]
                                (reset! autocomplete-state new-value))}]
    [typography {:variant :h5} "Data Grid"]
-   [data-grid/component]])
+   [data-grid/component]
+   [stack {:direction :row
+           :spacing   2}
+    [:> select/component {:options [{:label "Red" :value "#D32F2F"}
+                                    {:label "Blue" :value "#2196F3"}]
+                          :placeholder "Select a color"}]]])
 
 (def form (styles/styled form* custom-styles))
 

example/src/example/select.cljs

@@ -0,0 +1,52 @@
+(ns example.select
+  (:require-macros [reagent-mui.util :refer [react-component]])
+  (:require [reagent.core :as r]
+            [reagent-mui.styles :as styles]
+            [reagent-mui.base.use-select :refer [use-select]]
+            [reagent-mui.util :refer [use-effect use-ref use-state wrap-all-js-functions]]))
+
+(def root (styles/styled "div" {:position "relative"}))
+
+(def toggle (styles/styled "div" {:width            256
+                                  :border           "1px solid #CDD2D7"
+                                  :background-color "var(--color, white)"
+                                  :padding          10
+                                  :display          "inline-flex"
+                                  :align-items      "center"
+                                  :justify-content  "center"
+                                  "& .placeholder"  {:opacity "0.8"}}))
+
+(def listbox (styles/styled "div" {:padding    5
+                                   :list-style "none"
+                                   :position   "absolute"
+                                   :width      "100%"
+                                   :border     "1px solid #CDD2D7"
+                                   :outline    0
+                                   "&.hidden"  {:opacity    0
+                                                :visibility "hidden"
+                                                :transition "opacity 0.4s 0.5s ease, visibility 0.4s 0.5s step-end"}
+                                   "& > li"    {:padding                  8
+                                                "&:hover"                 {:background-color "#E7EBF0"}
+                                                "&[aria-selected='true']" {:background-color "#E0E3E7"}}}))
+
+(def component (react-component [{:keys [options placeholder]}]
+                 (let [listbox-ref (use-ref nil)
+                       [listbox-visible? set-listbox-visible] (use-state false)
+                       {:keys [get-button-props get-listbox-props get-option-props value]} (wrap-all-js-functions
+                                                                                            (use-select {:listbox-ref listbox-ref
+                                                                                                         :options     options}))]
+                   (use-effect #(when listbox-visible?
+                                  (some-> (.-current listbox-ref) (.focus)))
+                               #js [listbox-visible?])
+                   [root {:on-mouse-over #(set-listbox-visible true)
+                          :on-mouse-out  #(set-listbox-visible false)
+                          :on-focus      #(set-listbox-visible true)
+                          :on-blur       #(set-listbox-visible false)}
+                    [toggle (merge {:style {"--color" value}}
+                                   (get-button-props))
+                     (or value [:span.placeholder placeholder])]
+                    [listbox (merge {:class-name (when-not listbox-visible? "hidden")}
+                                    (get-listbox-props))
+                     (for [option options]
+                       ^{:key (:value option)} [:li (get-option-props option)
+                                                (:label option)])]])))