@uniformdev/design-system 19.123.1-alpha.9 → 19.125.2-alpha.3

package/dist/esm/index.js

@@ -2557,7 +2557,7 @@ import { css as css15 } from "@emotion/react";
 var PageHeaderSectionContainer = css15`
   display: flex;
   justify-content: space-between;
-  margin-bottom: var(--spacing-lg);
+  margin-bottom: var(--spacing-sm);
   flex-direction: column;
   gap: var(--spacing-sm);
 
@@ -13845,7 +13845,8 @@ function InputComboBox(props) {
               background: "var(--gray-100)",
               "&:hover": {
                 borderColor: "var(--gray-300)"
-              }
+              },
+              ...state.isFocused ? { borderColor: "var(--gray-300)" } : {}
             },
             ...(_b = (_a2 = props.styles) == null ? void 0 : _a2.control) == null ? void 0 : _b.call(_a2, base, state)
           };
@@ -20519,7 +20520,6 @@ var AddConditionalBtn = css92`
   gap: var(--spacing-sm);
   transition: color var(--duration-fast) var(--timing-ease-out);
   padding: 0;
-  font-size: var(--fs-sm);
 
   &:hover,
   &:focus {
@@ -20574,7 +20574,7 @@ var SearchAndFilterOptionsContainer = css92`
   padding: var(--spacing-md) var(--spacing-md) var(--spacing-base);
   will-change: height;
   position: relative;
-  z-index: 2;
+  z-index: 1;
 `;
 var SearchAndFilterOptionsInnerContainer = css92`
   display: flex;
@@ -20584,6 +20584,11 @@ var SearchAndFilterOptionsInnerContainer = css92`
 var SearchAndFilterButtonGroup = css92`
   margin-top: var(--spacing-base);
 `;
+var SortFilterInputRow = css92`
+  align-items: center;
+  display: flex;
+  gap: var(--spacing-sm);
+`;
 
 // src/components/SearchAndFilter/FilterButton.tsx
 import { jsx as jsx117, jsxs as jsxs79 } from "@emotion/react/jsx-runtime";
@@ -20616,7 +20621,7 @@ var FilterButton2 = ({
 
 // src/components/SearchAndFilter/FilterControls.tsx
 import { useEffect as useEffect18, useState as useState17 } from "react";
-import { useDebounce as useDebounce2 } from "react-use";
+import { useDebounce as useDebounce2, useEffectOnce } from "react-use";
 
 // src/components/SearchAndFilter/hooks/useSearchAndFilter.tsx
 import {
@@ -20765,7 +20770,9 @@ var FilterControls = ({
     sortByValue,
     filterOptions
   } = useSearchAndFilter();
+  const [initialSortValue, setInitialSortValue] = useState17(sortByValue);
   const [localeSearchTerm, setLocaleSearchTerm] = useState17("");
+  const [userHasChangedSortByValue, setUserHasChangedSortByValue] = useState17(false);
   useDebounce2(
     () => {
       setSearchTerm(localeSearchTerm);
@@ -20779,7 +20786,7 @@ var FilterControls = ({
     }
   }, [searchTerm]);
   const handleFilterToggle = (mode) => {
-    if (filterVisibility && ["sort", "filters"].includes(filterVisibility)) {
+    if (filterVisibility === "filters" && mode === "filters" || filterVisibility === "sort" && mode === "sort") {
       return setFilterVisibility(void 0);
     }
     return setFilterVisibility(mode);
@@ -20789,7 +20796,15 @@ var FilterControls = ({
   const sortField = sortValue == null ? void 0 : sortValue.join("_");
   const sortOn = sortField.startsWith("fields.") ? "contentTypeFields" : "metadata";
   const sortByValueLabel = (_c = (_b = (_a = filterOptions == null ? void 0 : filterOptions.find((op) => op.value === sortOn)) == null ? void 0 : _a.options) == null ? void 0 : _b.find((f) => f.value === sortField)) == null ? void 0 : _c.label;
-  const sortByIcon = sortDirection === "ASC" ? "arrow-up" : "arrow-down";
+  const sortByIcon = userHasChangedSortByValue ? sortDirection === "ASC" ? "arrow-up" : "arrow-down" : "sort-az";
+  useEffectOnce(() => {
+    setInitialSortValue(sortByValue);
+  });
+  useEffect18(() => {
+    if (initialSortValue !== sortByValue) {
+      setUserHasChangedSortByValue(true);
+    }
+  }, [initialSortValue, sortByValue]);
   return /* @__PURE__ */ jsxs80(Fragment19, { children: [
     /* @__PURE__ */ jsx119(
       FilterButton2,
@@ -20808,7 +20823,7 @@ var FilterControls = ({
         "aria-controls": "search-and-filter-sortBy",
         "aria-label": "sort by options",
         "aria-haspopup": "true",
-        text: sortByValueLabel,
+        text: !userHasChangedSortByValue ? "Sort" : sortByValueLabel,
         icon: sortByIcon,
         "aria-expanded": filterVisibility === "sort",
         hasSelectedValue: sortByValue !== "",
@@ -20980,6 +20995,14 @@ var FilterMultiChoiceEditor = ({
       },
       value,
       "aria-readonly": readOnly,
+      styles: {
+        menu(base) {
+          return {
+            ...base,
+            minWidth: "max-content"
+          };
+        }
+      },
       ...readOnlyProps
     }
   ) });
@@ -21006,6 +21029,14 @@ var FilterSingleChoiceEditor = ({
       isDisabled,
       value,
       "aria-readonly": readOnly,
+      styles: {
+        menu(base) {
+          return {
+            ...base,
+            minWidth: "max-content"
+          };
+        }
+      },
       ...readOnlyProps
     }
   ) });
@@ -21034,6 +21065,14 @@ var StatusMultiEditor = ({
       formatOptionLabel: CustomOptions,
       value,
       isDisabled,
+      styles: {
+        menu(base) {
+          return {
+            ...base,
+            minWidth: "max-content"
+          };
+        }
+      },
       ...readOnlyProps
     }
   ) });
@@ -21058,6 +21097,14 @@ var StatusSingleEditor = ({
       formatOptionLabel: CustomOptions,
       value,
       isDisabled,
+      styles: {
+        menu(base) {
+          return {
+            ...base,
+            minWidth: "max-content"
+          };
+        }
+      },
       ...readOnlyProps
     }
   ) });
@@ -21323,7 +21370,7 @@ var SearchAndFilterOptionsContainer2 = ({
     ) : null
   ] });
 };
-var FilterMenu = ({ id, filterTitle = "Show records", menuControls, children }) => {
+var FilterMenu = ({ id, filterTitle = "Show results", menuControls, children }) => {
   const { filterVisibility, setFilterVisibility } = useSearchAndFilter();
   const innerMenuRef = React24.useRef(null);
   useEffect20(() => {
@@ -21398,7 +21445,7 @@ var FilterItem = ({
     isClearable: false
   } : {};
   return /* @__PURE__ */ jsxs83("div", { css: ConditionalFilterRow, "data-testid": "filter-item", children: [
-    /* @__PURE__ */ jsx123("span", { children: index === 0 ? "where" : "and" }),
+    /* @__PURE__ */ jsx123("span", { children: index === 0 ? "Where" : "and" }),
     /* @__PURE__ */ jsxs83("div", { css: ConditionalInputRow, children: [
       /* @__PURE__ */ jsx123(
         InputComboBox,
@@ -21409,6 +21456,18 @@ var FilterItem = ({
             var _a2;
             onParamChange((_a2 = e == null ? void 0 : e.value) != null ? _a2 : "");
           },
+          isOptionDisabled: (option) => {
+            var _a2;
+            return (_a2 = option == null ? void 0 : option.disabled) != null ? _a2 : false;
+          },
+          styles: {
+            menu(base) {
+              return {
+                ...base,
+                minWidth: "max-content"
+              };
+            }
+          },
           value: selectedFieldValue,
           ...readOnlyProps,
           id: "filter-field"
@@ -21425,6 +21484,14 @@ var FilterItem = ({
           },
           isDisabled: !filters[index].field,
           value: selectedOperatorValue,
+          styles: {
+            menu(base) {
+              return {
+                ...base,
+                minWidth: "max-content"
+              };
+            }
+          },
           ...readOnlyProps,
           id: "filter-operator"
         }
@@ -21442,7 +21509,7 @@ var FilterItem = ({
           valueTestId: "filter-value"
         }
       ),
-      /* @__PURE__ */ jsx123(
+      readOnly ? null : /* @__PURE__ */ jsx123(
         "button",
         {
           type: "button",
@@ -21462,6 +21529,7 @@ var FilterItems = ({
 }) => {
   const { filterOptions, filters, setFilters, handleAddFilter, handleResetFilters, setFilterVisibility } = useSearchAndFilter();
   const handleUpdateFilter = (index, prop, value) => {
+    var _a, _b, _c, _d, _e;
     const next = [...filters];
     next[index] = { ...next[index], [prop]: value };
     if (prop === "operator") {
@@ -21474,7 +21542,11 @@ var FilterItems = ({
       }
     }
     if (prop === "field") {
-      next[index].operator = "";
+      const firstOperatorInAvailableOperators = (_e = (_d = (_c = (_b = (_a = filterOptions.find((fo) => {
+        var _a2;
+        return (_a2 = fo.options) == null ? void 0 : _a2.find((op) => op.value === value);
+      })) == null ? void 0 : _a.options) == null ? void 0 : _b.find((op) => op.value === next[index].field)) == null ? void 0 : _c.operatorOptions) == null ? void 0 : _d[0].value) != null ? _e : "eq";
+      next[index].operator = firstOperatorInAvailableOperators;
       next[index].value = "";
     }
     setFilters(next);
@@ -21753,7 +21825,7 @@ var SortItems = () => {
     var _a2;
     return (_a2 = item.options) == null ? void 0 : _a2.find((option) => option.value === sortField);
   })) == null ? void 0 : _a.options) == null ? void 0 : _b.find((nestedOption) => nestedOption.value === sortField);
-  return /* @__PURE__ */ jsx125(FilterMenu, { id: "search-and-filter-options", filterTitle: "Sort by", children: /* @__PURE__ */ jsx125("div", { css: ConditionalFilterRow, children: /* @__PURE__ */ jsxs85("div", { css: ConditionalInputRow, children: [
+  return /* @__PURE__ */ jsx125(FilterMenu, { id: "search-and-filter-options", filterTitle: "Sort by", children: /* @__PURE__ */ jsxs85("div", { css: SortFilterInputRow, children: [
     /* @__PURE__ */ jsx125(
       InputComboBox,
       {
@@ -21762,6 +21834,14 @@ var SortItems = () => {
           const fieldName = e == null ? void 0 : e.value;
           setSortBy(`${fieldName}_${sortDirection}`);
         },
+        styles: {
+          menu(base) {
+            return {
+              ...base,
+              minWidth: "max-content"
+            };
+          }
+        },
         value: currentSelectedOption
       }
     ),
@@ -21778,7 +21858,7 @@ var SortItems = () => {
         value: sortDirection
       }
     )
-  ] }) }) });
+  ] }) });
 };
 
 // src/components/SearchAndFilter/FilterModeView.tsx

package/dist/index.d.mts

@@ -23028,6 +23028,8 @@ type FilterOption = {
     valueOptions?: InputOption[];
     /** Set a readonly state on the input */
     readOnly?: boolean;
+    /** Set a disabled state on the input */
+    disabled?: boolean;
 };
 /** @deprecated beta - Filter selected and query value props */
 type Filter = {

package/dist/index.d.ts

@@ -23028,6 +23028,8 @@ type FilterOption = {
     valueOptions?: InputOption[];
     /** Set a readonly state on the input */
     readOnly?: boolean;
+    /** Set a disabled state on the input */
+    disabled?: boolean;
 };
 /** @deprecated beta - Filter selected and query value props */
 type Filter = {

package/dist/index.js

@@ -4201,7 +4201,7 @@ var import_react22 = require("@emotion/react");
 var PageHeaderSectionContainer = import_react22.css`
   display: flex;
   justify-content: space-between;
-  margin-bottom: var(--spacing-lg);
+  margin-bottom: var(--spacing-sm);
   flex-direction: column;
   gap: var(--spacing-sm);
 
@@ -15580,7 +15580,8 @@ function InputComboBox(props) {
               background: "var(--gray-100)",
               "&:hover": {
                 borderColor: "var(--gray-300)"
-              }
+              },
+              ...state.isFocused ? { borderColor: "var(--gray-300)" } : {}
             },
             ...(_b = (_a2 = props.styles) == null ? void 0 : _a2.control) == null ? void 0 : _b.call(_a2, base, state)
           };
@@ -22351,7 +22352,6 @@ var AddConditionalBtn = import_react138.css`
   gap: var(--spacing-sm);
   transition: color var(--duration-fast) var(--timing-ease-out);
   padding: 0;
-  font-size: var(--fs-sm);
 
   &:hover,
   &:focus {
@@ -22406,7 +22406,7 @@ var SearchAndFilterOptionsContainer = import_react138.css`
   padding: var(--spacing-md) var(--spacing-md) var(--spacing-base);
   will-change: height;
   position: relative;
-  z-index: 2;
+  z-index: 1;
 `;
 var SearchAndFilterOptionsInnerContainer = import_react138.css`
   display: flex;
@@ -22416,6 +22416,11 @@ var SearchAndFilterOptionsInnerContainer = import_react138.css`
 var SearchAndFilterButtonGroup = import_react138.css`
   margin-top: var(--spacing-base);
 `;
+var SortFilterInputRow = import_react138.css`
+  align-items: center;
+  display: flex;
+  gap: var(--spacing-sm);
+`;
 
 // src/components/SearchAndFilter/FilterButton.tsx
 var import_jsx_runtime117 = require("@emotion/react/jsx-runtime");
@@ -22591,7 +22596,9 @@ var FilterControls = ({
     sortByValue,
     filterOptions
   } = useSearchAndFilter();
+  const [initialSortValue, setInitialSortValue] = (0, import_react140.useState)(sortByValue);
   const [localeSearchTerm, setLocaleSearchTerm] = (0, import_react140.useState)("");
+  const [userHasChangedSortByValue, setUserHasChangedSortByValue] = (0, import_react140.useState)(false);
   (0, import_react_use3.useDebounce)(
     () => {
       setSearchTerm(localeSearchTerm);
@@ -22605,7 +22612,7 @@ var FilterControls = ({
     }
   }, [searchTerm]);
   const handleFilterToggle = (mode) => {
-    if (filterVisibility && ["sort", "filters"].includes(filterVisibility)) {
+    if (filterVisibility === "filters" && mode === "filters" || filterVisibility === "sort" && mode === "sort") {
       return setFilterVisibility(void 0);
     }
     return setFilterVisibility(mode);
@@ -22615,7 +22622,15 @@ var FilterControls = ({
   const sortField = sortValue == null ? void 0 : sortValue.join("_");
   const sortOn = sortField.startsWith("fields.") ? "contentTypeFields" : "metadata";
   const sortByValueLabel = (_c = (_b = (_a = filterOptions == null ? void 0 : filterOptions.find((op) => op.value === sortOn)) == null ? void 0 : _a.options) == null ? void 0 : _b.find((f) => f.value === sortField)) == null ? void 0 : _c.label;
-  const sortByIcon = sortDirection === "ASC" ? "arrow-up" : "arrow-down";
+  const sortByIcon = userHasChangedSortByValue ? sortDirection === "ASC" ? "arrow-up" : "arrow-down" : "sort-az";
+  (0, import_react_use3.useEffectOnce)(() => {
+    setInitialSortValue(sortByValue);
+  });
+  (0, import_react140.useEffect)(() => {
+    if (initialSortValue !== sortByValue) {
+      setUserHasChangedSortByValue(true);
+    }
+  }, [initialSortValue, sortByValue]);
   return /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(import_jsx_runtime119.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
       FilterButton2,
@@ -22634,7 +22649,7 @@ var FilterControls = ({
         "aria-controls": "search-and-filter-sortBy",
         "aria-label": "sort by options",
         "aria-haspopup": "true",
-        text: sortByValueLabel,
+        text: !userHasChangedSortByValue ? "Sort" : sortByValueLabel,
         icon: sortByIcon,
         "aria-expanded": filterVisibility === "sort",
         hasSelectedValue: sortByValue !== "",
@@ -22812,6 +22827,14 @@ var FilterMultiChoiceEditor = ({
       },
       value,
       "aria-readonly": readOnly,
+      styles: {
+        menu(base) {
+          return {
+            ...base,
+            minWidth: "max-content"
+          };
+        }
+      },
       ...readOnlyProps
     }
   ) });
@@ -22838,6 +22861,14 @@ var FilterSingleChoiceEditor = ({
       isDisabled,
       value,
       "aria-readonly": readOnly,
+      styles: {
+        menu(base) {
+          return {
+            ...base,
+            minWidth: "max-content"
+          };
+        }
+      },
       ...readOnlyProps
     }
   ) });
@@ -22866,6 +22897,14 @@ var StatusMultiEditor = ({
       formatOptionLabel: CustomOptions,
       value,
       isDisabled,
+      styles: {
+        menu(base) {
+          return {
+            ...base,
+            minWidth: "max-content"
+          };
+        }
+      },
       ...readOnlyProps
     }
   ) });
@@ -22890,6 +22929,14 @@ var StatusSingleEditor = ({
       formatOptionLabel: CustomOptions,
       value,
       isDisabled,
+      styles: {
+        menu(base) {
+          return {
+            ...base,
+            minWidth: "max-content"
+          };
+        }
+      },
       ...readOnlyProps
     }
   ) });
@@ -23156,7 +23203,7 @@ var SearchAndFilterOptionsContainer2 = ({
     ) : null
   ] });
 };
-var FilterMenu = ({ id, filterTitle = "Show records", menuControls, children }) => {
+var FilterMenu = ({ id, filterTitle = "Show results", menuControls, children }) => {
   const { filterVisibility, setFilterVisibility } = useSearchAndFilter();
   const innerMenuRef = import_react143.default.useRef(null);
   (0, import_react143.useEffect)(() => {
@@ -23231,7 +23278,7 @@ var FilterItem = ({
     isClearable: false
   } : {};
   return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { css: ConditionalFilterRow, "data-testid": "filter-item", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("span", { children: index === 0 ? "where" : "and" }),
+    /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("span", { children: index === 0 ? "Where" : "and" }),
     /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { css: ConditionalInputRow, children: [
       /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
         InputComboBox,
@@ -23242,6 +23289,18 @@ var FilterItem = ({
             var _a2;
             onParamChange((_a2 = e == null ? void 0 : e.value) != null ? _a2 : "");
           },
+          isOptionDisabled: (option) => {
+            var _a2;
+            return (_a2 = option == null ? void 0 : option.disabled) != null ? _a2 : false;
+          },
+          styles: {
+            menu(base) {
+              return {
+                ...base,
+                minWidth: "max-content"
+              };
+            }
+          },
           value: selectedFieldValue,
           ...readOnlyProps,
           id: "filter-field"
@@ -23258,6 +23317,14 @@ var FilterItem = ({
           },
           isDisabled: !filters[index].field,
           value: selectedOperatorValue,
+          styles: {
+            menu(base) {
+              return {
+                ...base,
+                minWidth: "max-content"
+              };
+            }
+          },
           ...readOnlyProps,
           id: "filter-operator"
         }
@@ -23275,7 +23342,7 @@ var FilterItem = ({
           valueTestId: "filter-value"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+      readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
         "button",
         {
           type: "button",
@@ -23295,6 +23362,7 @@ var FilterItems = ({
 }) => {
   const { filterOptions, filters, setFilters, handleAddFilter, handleResetFilters, setFilterVisibility } = useSearchAndFilter();
   const handleUpdateFilter = (index, prop, value) => {
+    var _a, _b, _c, _d, _e;
     const next = [...filters];
     next[index] = { ...next[index], [prop]: value };
     if (prop === "operator") {
@@ -23307,7 +23375,11 @@ var FilterItems = ({
       }
     }
     if (prop === "field") {
-      next[index].operator = "";
+      const firstOperatorInAvailableOperators = (_e = (_d = (_c = (_b = (_a = filterOptions.find((fo) => {
+        var _a2;
+        return (_a2 = fo.options) == null ? void 0 : _a2.find((op) => op.value === value);
+      })) == null ? void 0 : _a.options) == null ? void 0 : _b.find((op) => op.value === next[index].field)) == null ? void 0 : _c.operatorOptions) == null ? void 0 : _d[0].value) != null ? _e : "eq";
+      next[index].operator = firstOperatorInAvailableOperators;
       next[index].value = "";
     }
     setFilters(next);
@@ -23597,7 +23669,7 @@ var SortItems = () => {
     var _a2;
     return (_a2 = item.options) == null ? void 0 : _a2.find((option) => option.value === sortField);
   })) == null ? void 0 : _a.options) == null ? void 0 : _b.find((nestedOption) => nestedOption.value === sortField);
-  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(FilterMenu, { id: "search-and-filter-options", filterTitle: "Sort by", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { css: ConditionalFilterRow, children: /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { css: ConditionalInputRow, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(FilterMenu, { id: "search-and-filter-options", filterTitle: "Sort by", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { css: SortFilterInputRow, children: [
     /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
       InputComboBox,
       {
@@ -23606,6 +23678,14 @@ var SortItems = () => {
           const fieldName = e == null ? void 0 : e.value;
           setSortBy(`${fieldName}_${sortDirection}`);
         },
+        styles: {
+          menu(base) {
+            return {
+              ...base,
+              minWidth: "max-content"
+            };
+          }
+        },
         value: currentSelectedOption
       }
     ),
@@ -23622,7 +23702,7 @@ var SortItems = () => {
         value: sortDirection
       }
     )
-  ] }) }) });
+  ] }) });
 };
 
 // src/components/SearchAndFilter/FilterModeView.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "19.123.1-alpha.9+0f8fa37358",
+  "version": "19.125.2-alpha.3+6bb657551a",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -23,8 +23,8 @@
     "@storybook/react": "6.5.16",
     "@types/react": "18.2.40",
     "@types/react-dom": "18.2.17",
-    "@uniformdev/canvas": "^19.123.1-alpha.9+0f8fa37358",
-    "@uniformdev/richtext": "^19.123.1-alpha.9+0f8fa37358",
+    "@uniformdev/canvas": "^19.125.2-alpha.3+6bb657551a",
+    "@uniformdev/richtext": "^19.125.2-alpha.3+6bb657551a",
     "autoprefixer": "10.4.16",
     "hygen": "6.2.11",
     "postcss": "8.4.32",
@@ -71,5 +71,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0f8fa37358fa0d8bc2e77e00b09d456c7053ee63"
+  "gitHead": "6bb657551ac6e37a7990deace389c581b94176fc"
 }