3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-28 09:17:30 +02:00
Code Issues Projects Releases Packages Wiki Activity

:sparkles Add combobox to select group in token themes modal

Browse source
This commit is contained in:
Juanfran 2025-01-20 15:44:36 +01:00
parent da273c1168
commit fe3a2902bb
13 changed files with 64 additions and 693 deletions
Download patch file Download diff file Expand all files Collapse all files

16
frontend/src/app/main/ui/ds/controls/combobox.cljs
View file

@ -56,7 +56,8 @@
(def ^:private schema:combobox
[:map
[:options [:vector {:min 1} schema:combobox-option]]
[:id {:optional true} :string]
[:options [:vector schema:combobox-option]]
[:class {:optional true} :string]
[:disabled {:optional true} :boolean]
[:default-selected {:optional true} :string]
@ -66,7 +67,7 @@
(mf/defc combobox*
{::mf/props :obj
::mf/schema schema:combobox}
[{:keys [options class disabled has-error default-selected on-change] :rest props}]
[{:keys [id options class disabled has-error default-selected on-change] :rest props}]
(let [open* (mf/use-state false)
open (deref open*)
@ -177,7 +178,7 @@
(mod (+ index 1) len))]
(handle-focus-change options focused* new-index options-nodes-refs))
(or (kbd/space? event) (kbd/enter? event))
(kbd/enter? event)
(when (deref open*)
(dom/prevent-default event)
(handle-selection focused* selected* open*)
@ -191,7 +192,7 @@
on-input-change
(mf/use-fn
(fn [event]
(let [value (.-value (.-currentTarget event))]
(let [value (-> event dom/get-target dom/get-value)]
(reset! selected* value)
(reset! filter-value* value)
(reset! focused* nil)
@ -226,8 +227,10 @@
[:> icon* {:icon-id icon
:size "s"
:aria-hidden true}])
[:input {:type "text"
[:input {:id id
:type "text"
:role "combobox"
:autoComplete "off"
:aria-autocomplete "both"
:aria-expanded open
:aria-controls listbox-id
@ -239,7 +242,8 @@
:on-change on-input-change
:on-key-down on-key-down}]]
[:> :button {:tab-index "-1"
[:> :button {:type "button"
:tab-index "-1"
:aria-expanded open
:aria-controls listbox-id
:class (stl/css :button-toggle-list)