@umami/react-zen 0.90.0 → 0.91.0

package/dist/index.css

@@ -4160,7 +4160,7 @@ body a.Button_button__NDYwM {
 }
 
 /* virtual-css:css:851dd5366a20c382ffec60997ee93e35 */
-.Select_button__ZGY1Y {
+.Select_button__MWY5Z {
   display: flex;
   align-items: center;
   font-size: var(--font-size);
@@ -4172,7 +4172,10 @@ body a.Button_button__NDYwM {
   background: var(--background-color);
   cursor: pointer;
 }
-.Select_popover__MTQ1Y {
+.Select_list__ODI4M {
+  padding: var(--spacing-2);
+}
+.Select_popover__ZDNlZ {
   min-width: 200px;
   border: var(--border);
   border-radius: var(--border-radius);
@@ -4180,25 +4183,22 @@ body a.Button_button__NDYwM {
   background: var(--background-color);
   overflow: hidden;
 }
-.Select_list__MDYyZ > * {
-  border-radius: 0;
-}
-.Select_icon__N2M0O {
+.Select_icon__ZGNhZ {
   color: var(--font-color-disabled);
 }
-.Select_icon__N2M0O:hover {
+.Select_icon__ZGNhZ:hover {
   color: var(--font-color);
   cursor: pointer;
 }
-.Select_search__MWQwM {
+.Select_search__NGY0O {
   border-bottom: var(--border);
   outline: none;
 }
-.Select_search__MWQwM input {
+.Select_search__NGY0O input {
   border: 0;
   box-shadow: none;
 }
-.Select_search__MWQwM input[data-focused] {
+.Select_search__NGY0O input[data-focused] {
   outline: none;
 }
 

package/dist/index.d.ts

@@ -776,6 +776,7 @@ declare module '@umami/react-zen/Select' {
         label?: string;
         isLoading?: boolean;
         allowSearch?: boolean;
+        searchValue?: string;
         searchDelay?: number;
         onSearch?: (value: string) => void;
         onChange?: (e: any) => void;

package/dist/index.js

@@ -40,12 +40,12 @@ var require_use_sync_external_store_shim_production = __commonJS({
       return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
     }
     var objectIs = "function" === typeof Object.is ? Object.is : is2;
-    var useState17 = React7.useState;
+    var useState18 = React7.useState;
     var useEffect13 = React7.useEffect;
     var useLayoutEffect2 = React7.useLayoutEffect;
     var useDebugValue = React7.useDebugValue;
     function useSyncExternalStore$2(subscribe, getSnapshot) {
-      var value = getSnapshot(), _useState = useState17({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
+      var value = getSnapshot(), _useState = useState18({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
       useLayoutEffect2(
         function() {
           inst.value = value;
@@ -103,7 +103,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
             "The result of getSnapshot should be cached to avoid an infinite loop"
           ), didWarnUncachedGetSnapshot = true);
         }
-        cachedValue = useState17({
+        cachedValue = useState18({
           inst: { value, getSnapshot }
         });
         var inst = cachedValue[0].inst, forceUpdate = cachedValue[1];
@@ -141,7 +141,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
         return getSnapshot();
       }
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-      var React7 = import_react195.default, objectIs = "function" === typeof Object.is ? Object.is : is2, useState17 = React7.useState, useEffect13 = React7.useEffect, useLayoutEffect2 = React7.useLayoutEffect, useDebugValue = React7.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
+      var React7 = import_react195.default, objectIs = "function" === typeof Object.is ? Object.is : is2, useState18 = React7.useState, useEffect13 = React7.useEffect, useLayoutEffect2 = React7.useLayoutEffect, useDebugValue = React7.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
       exports.useSyncExternalStore = void 0 !== React7.useSyncExternalStore ? React7.useSyncExternalStore : shim;
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
     })();
@@ -31018,7 +31018,7 @@ var import_react189 = require("react");
 var import_classnames43 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Select.module.css
-var Select_default = { "button": "Select_button__ZGY1Y", "popover": "Select_popover__MTQ1Y", "list": "Select_list__MDYyZ", "icon": "Select_icon__N2M0O", "search": "Select_search__MWQwM" };
+var Select_default = { "button": "Select_button__MWY5Z", "list": "Select_list__ODI4M", "popover": "Select_popover__ZDNlZ", "icon": "Select_icon__ZGNhZ", "search": "Select_search__NGY0O" };
 
 // src/components/Select.tsx
 var import_jsx_runtime53 = require("react/jsx-runtime");
@@ -31029,6 +31029,7 @@ var Select2 = (0, import_react189.forwardRef)(
     label,
     isLoading,
     allowSearch,
+    searchValue,
     searchDelay,
     onSearch,
     onSelectionChange,
@@ -31040,10 +31041,15 @@ var Select2 = (0, import_react189.forwardRef)(
     children,
     ...props
   }, ref) => {
+    const [search, setSearch] = (0, import_react189.useState)("");
     const handleChange = (e) => {
       onSelectionChange?.(e);
       onChange?.(e);
     };
+    const handleSearch = (value2) => {
+      setSearch(value2);
+      onSearch?.(value2);
+    };
     return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
       $82d7e5349645de74$export$ef9b1a59e592288f,
       {
@@ -31063,8 +31069,10 @@ var Select2 = (0, import_react189.forwardRef)(
               SearchField2,
               {
                 className: Select_default.search,
-                onSearch,
+                value: search,
+                onSearch: handleSearch,
                 delay: searchDelay,
+                defaultValue: searchValue,
                 autoFocus: true
               }
             ),

package/dist/index.mjs

@@ -34,12 +34,12 @@ var require_use_sync_external_store_shim_production = __commonJS({
       return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
     }
     var objectIs = "function" === typeof Object.is ? Object.is : is2;
-    var useState17 = React7.useState;
+    var useState18 = React7.useState;
     var useEffect13 = React7.useEffect;
     var useLayoutEffect2 = React7.useLayoutEffect;
     var useDebugValue = React7.useDebugValue;
     function useSyncExternalStore$2(subscribe, getSnapshot) {
-      var value = getSnapshot(), _useState = useState17({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
+      var value = getSnapshot(), _useState = useState18({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
       useLayoutEffect2(
         function() {
           inst.value = value;
@@ -97,7 +97,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
             "The result of getSnapshot should be cached to avoid an infinite loop"
           ), didWarnUncachedGetSnapshot = true);
         }
-        cachedValue = useState17({
+        cachedValue = useState18({
           inst: { value, getSnapshot }
         });
         var inst = cachedValue[0].inst, forceUpdate = cachedValue[1];
@@ -135,7 +135,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
         return getSnapshot();
       }
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-      var React7 = __import_react2, objectIs = "function" === typeof Object.is ? Object.is : is2, useState17 = React7.useState, useEffect13 = React7.useEffect, useLayoutEffect2 = React7.useLayoutEffect, useDebugValue = React7.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
+      var React7 = __import_react2, objectIs = "function" === typeof Object.is ? Object.is : is2, useState18 = React7.useState, useEffect13 = React7.useEffect, useLayoutEffect2 = React7.useLayoutEffect, useDebugValue = React7.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
       exports.useSyncExternalStore = void 0 !== React7.useSyncExternalStore ? React7.useSyncExternalStore : shim;
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
     })();
@@ -30908,10 +30908,10 @@ var SearchField2 = forwardRef8(
 
 // src/components/Select.tsx
 var import_classnames43 = __toESM(require_classnames());
-import { forwardRef as forwardRef9 } from "react";
+import { forwardRef as forwardRef9, useState as useState17 } from "react";
 
 // css-modules:E:\dev\umami-react-zen\src\components\Select.module.css
-var Select_default = { "button": "Select_button__ZGY1Y", "popover": "Select_popover__MTQ1Y", "list": "Select_list__MDYyZ", "icon": "Select_icon__N2M0O", "search": "Select_search__MWQwM" };
+var Select_default = { "button": "Select_button__MWY5Z", "list": "Select_list__ODI4M", "popover": "Select_popover__ZDNlZ", "icon": "Select_icon__ZGNhZ", "search": "Select_search__NGY0O" };
 
 // src/components/Select.tsx
 import { jsx as jsx53, jsxs as jsxs30 } from "react/jsx-runtime";
@@ -30922,6 +30922,7 @@ var Select2 = forwardRef9(
     label,
     isLoading,
     allowSearch,
+    searchValue,
     searchDelay,
     onSearch,
     onSelectionChange,
@@ -30933,10 +30934,15 @@ var Select2 = forwardRef9(
     children,
     ...props
   }, ref) => {
+    const [search, setSearch] = useState17("");
     const handleChange = (e) => {
       onSelectionChange?.(e);
       onChange?.(e);
     };
+    const handleSearch = (value2) => {
+      setSearch(value2);
+      onSearch?.(value2);
+    };
     return /* @__PURE__ */ jsxs30(
       $82d7e5349645de74$export$ef9b1a59e592288f,
       {
@@ -30956,8 +30962,10 @@ var Select2 = forwardRef9(
               SearchField2,
               {
                 className: Select_default.search,
-                onSearch,
+                value: search,
+                onSearch: handleSearch,
                 delay: searchDelay,
+                defaultValue: searchValue,
                 autoFocus: true
               }
             ),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/react-zen",
-  "version": "0.90.0",
+  "version": "0.91.0",
   "description": "Modern, minimalist React component library",
   "author": "Umami <hello@umami.is>",
   "license": "MIT",

package/styles.css

@@ -4476,7 +4476,7 @@ body a.Button_button__NDYwM {
 }
 
 /* virtual-css:css:851dd5366a20c382ffec60997ee93e35 */
-.Select_button__ZGY1Y {
+.Select_button__MWY5Z {
   display: flex;
   align-items: center;
   font-size: var(--font-size);
@@ -4488,7 +4488,10 @@ body a.Button_button__NDYwM {
   background: var(--background-color);
   cursor: pointer;
 }
-.Select_popover__MTQ1Y {
+.Select_list__ODI4M {
+  padding: var(--spacing-2);
+}
+.Select_popover__ZDNlZ {
   min-width: 200px;
   border: var(--border);
   border-radius: var(--border-radius);
@@ -4496,25 +4499,22 @@ body a.Button_button__NDYwM {
   background: var(--background-color);
   overflow: hidden;
 }
-.Select_list__MDYyZ > * {
-  border-radius: 0;
-}
-.Select_icon__N2M0O {
+.Select_icon__ZGNhZ {
   color: var(--font-color-disabled);
 }
-.Select_icon__N2M0O:hover {
+.Select_icon__ZGNhZ:hover {
   color: var(--font-color);
   cursor: pointer;
 }
-.Select_search__MWQwM {
+.Select_search__NGY0O {
   border-bottom: var(--border);
   outline: none;
 }
-.Select_search__MWQwM input {
+.Select_search__NGY0O input {
   border: 0;
   box-shadow: none;
 }
-.Select_search__MWQwM input[data-focused] {
+.Select_search__NGY0O input[data-focused] {
   outline: none;
 }