@uniformdev/design-system 19.116.0 → 19.116.2-alpha.0

package/dist/index.js

@@ -22128,6 +22128,12 @@ var SearchAndFilterControlsWrapper = import_react138.css`
   grid-template-columns: auto 1fr 1fr;
   gap: var(--spacing-base);
 `;
+var SearchAndFilterOutterControlWrapper = import_react138.css`
+  align-items: stretch;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: var(--spacing-sm);
+`;
 var ConditionalFilterRow = import_react138.css`
   display: grid;
   grid-template-columns: 35px 1fr;
@@ -22305,6 +22311,7 @@ var FilterButton2 = ({ text = "Filters", filterCount, ...props }) => {
       type: "button",
       css: [FilterButton, filterCount ? FilterButtonWithOptions : void 0],
       ...props,
+      "data-testid": "filters-button",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Icon, { icon: "filter-add", iconColor: "currentColor", size: "1rem" }),
         text,
@@ -22343,13 +22350,20 @@ var SearchAndFilterContext = (0, import_react139.createContext)({
 var SearchAndFilterProvider = ({
   filters,
   filterOptions,
+  onSearchChange,
   onChange,
   children
 }) => {
   const [searchTerm, setSearchTerm] = (0, import_react139.useState)("");
   const deferredSearchTerm = (0, import_react139.useDeferredValue)(searchTerm);
   const [filterVisibility, setFilterVisibility] = (0, import_react139.useState)(false);
-  const handleSearchTerm = (0, import_react139.useCallback)((term) => setSearchTerm(term), [setSearchTerm]);
+  const handleSearchTerm = (0, import_react139.useCallback)(
+    (term) => {
+      setSearchTerm(term);
+      onSearchChange(term);
+    },
+    [setSearchTerm, onSearchChange]
+  );
   const handleToggleFilterVisibilty = (0, import_react139.useCallback)(
     (visible) => setFilterVisibility(visible),
     [setFilterVisibility]
@@ -22414,7 +22428,7 @@ var useSearchAndFilter = () => {
 // src/components/SearchAndFilter/FilterControls.tsx
 var import_jsx_runtime119 = require("@emotion/react/jsx-runtime");
 var FilterControls = ({ children }) => {
-  const { setFilterVisibility, filterVisibility, setSearchTerm, validFilterQuery } = useSearchAndFilter();
+  const { setFilterVisibility, filterVisibility, setSearchTerm, validFilterQuery, searchTerm } = useSearchAndFilter();
   return /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(import_jsx_runtime119.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
       FilterButton2,
@@ -22428,11 +22442,11 @@ var FilterControls = ({ children }) => {
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
-      InputKeywordSearch,
+      DebouncedInputKeywordSearch,
       {
-        type: "search",
         placeholder: "Search...",
         onSearchTextChanged: (e) => setSearchTerm(e),
+        defaultValue: searchTerm,
         compact: true,
         rounded: true
       }
@@ -22443,11 +22457,12 @@ var FilterControls = ({ children }) => {
 
 // src/components/SearchAndFilter/FilterItem.tsx
 init_emotion_jsx_shim();
+var import_react142 = require("react");
 
 // src/components/SearchAndFilter/FilterEditor.tsx
 init_emotion_jsx_shim();
-var import_react141 = require("@emotion/react");
-var import_react142 = require("react");
+var import_react141 = require("react");
+var import_react_use3 = require("react-use");
 
 // src/components/Validation/StatusBullet.tsx
 init_emotion_jsx_shim();
@@ -22564,6 +22579,7 @@ var import_jsx_runtime121 = require("@emotion/react/jsx-runtime");
 var FilterMultiChoiceEditor = ({
   value,
   options,
+  isDisabled,
   ...props
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
@@ -22573,28 +22589,32 @@ var FilterMultiChoiceEditor = ({
       options,
       isMulti: true,
       isClearable: true,
+      isDisabled,
       onChange: (e) => {
         var _a;
         return props.onChange((_a = e.map((item) => item.value)) != null ? _a : []);
-      }
+      },
+      value
     }
   );
 };
 var FilterSingleChoiceEditor = ({
   options,
   value,
-  ...props
+  isDisabled,
+  onChange
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
     InputComboBox,
     {
       options,
       isClearable: true,
-      ...props,
       onChange: (e) => {
         var _a;
-        return props.onChange((_a = e == null ? void 0 : e.value) != null ? _a : "");
-      }
+        return onChange((_a = e == null ? void 0 : e.value) != null ? _a : "");
+      },
+      isDisabled,
+      value
     }
   );
 };
@@ -22604,56 +22624,62 @@ var CustomOptions = ({ label, value }) => {
 var StatusMultiEditor = ({
   options,
   value,
-  ...props
+  isDisabled,
+  onChange
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
     InputComboBox,
     {
       options,
       isMulti: true,
-      ...props,
       onChange: (e) => {
         var _a;
-        return props.onChange((_a = e.map((item) => item.value)) != null ? _a : []);
+        return onChange((_a = e.map((item) => item.value)) != null ? _a : []);
       },
-      formatOptionLabel: CustomOptions
+      formatOptionLabel: CustomOptions,
+      value,
+      isDisabled
     }
   );
 };
 var StatusSingleEditor = ({
   options,
   value,
-  ...props
+  isDisabled,
+  onChange
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
     InputComboBox,
     {
       options,
-      ...props,
       onChange: (e) => {
         var _a;
-        return props.onChange((_a = e == null ? void 0 : e.value) != null ? _a : "");
+        return onChange((_a = e == null ? void 0 : e.value) != null ? _a : "");
       },
-      formatOptionLabel: CustomOptions
+      formatOptionLabel: CustomOptions,
+      value,
+      isDisabled
     }
   );
 };
-var TextEditor = ({ onChange, ariaLabel }) => {
+var TextEditor = ({ onChange, ariaLabel, value }) => {
+  (0, import_react_use3.useDebounce)(() => onChange, 500, [value]);
   return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
     Input,
     {
       showLabel: false,
-      "aria-label": ariaLabel,
+      label: ariaLabel,
       onChange: (e) => onChange(e.currentTarget.value),
-      placeholder: "Enter phrase to search\u2026"
+      placeholder: "Enter phrase to search\u2026",
+      value
     }
   );
 };
-var NumberRangeEditor = ({ onChange, ...props }) => {
-  const [minValue, setMinValue] = (0, import_react142.useState)("");
-  const [maxValue, setMaxValue] = (0, import_react142.useState)("");
-  const [error, setError] = (0, import_react142.useState)("");
-  (0, import_react142.useEffect)(() => {
+var NumberRangeEditor = ({ onChange, disabled: disabled2, ariaLabel, value }) => {
+  const [minValue, setMinValue] = (0, import_react141.useState)("");
+  const [maxValue, setMaxValue] = (0, import_react141.useState)("");
+  const [error, setError] = (0, import_react141.useState)("");
+  (0, import_react141.useEffect)(() => {
     if (!maxValue && !minValue) {
       return;
     }
@@ -22676,50 +22702,66 @@ var NumberRangeEditor = ({ onChange, ...props }) => {
     /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
       Input,
       {
-        ...props,
+        label: `${ariaLabel}-min`,
         type: "number",
         showLabel: false,
         min: 0,
         placeholder: "Low",
         onChange: (e) => setMinValue(e.currentTarget.value),
-        "aria-invalid": !error ? false : true
+        "aria-invalid": !error ? false : true,
+        disabled: disabled2,
+        value: value ? value[0] : ""
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
       Input,
       {
-        ...props,
         type: "number",
+        label: `${ariaLabel}-max`,
         showLabel: false,
         min: 0,
         placeholder: "High",
         onChange: (e) => setMaxValue(e.currentTarget.value),
-        "aria-invalid": !error ? false : true
+        "aria-invalid": !error ? false : true,
+        disabled: disabled2,
+        value: value ? value[1] : ""
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(ErrorContainer, { errorMessage: error })
   ] });
 };
-var NumberEditor = ({ ariaLabel, onChange }) => {
+var NumberEditor = ({ ariaLabel, onChange, disabled: disabled2, value }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
     Input,
     {
-      "aria-label": ariaLabel,
+      label: ariaLabel,
       type: "number",
       showLabel: false,
       min: 0,
-      onChange: (e) => onChange(e.currentTarget.value)
+      onChange: (e) => onChange(e.currentTarget.value),
+      disabled: disabled2,
+      value
     }
   );
 };
-var DateEditor = ({ onChange, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Input, { type: "date", ...props, showLabel: false, onChange: (e) => onChange(e.currentTarget.value) });
+var DateEditor = ({ onChange, ariaLabel, disabled: disabled2, value }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+    Input,
+    {
+      type: "date",
+      label: ariaLabel,
+      showLabel: false,
+      onChange: (e) => onChange(e.currentTarget.value),
+      disabled: disabled2,
+      value
+    }
+  );
 };
-var DateRangeEditor = ({ ariaLabel, onChange }) => {
-  const [minDateValue, setMinDateValue] = (0, import_react142.useState)("");
-  const [maxDateValue, setMaxDateValue] = (0, import_react142.useState)("");
-  const [error, setError] = (0, import_react142.useState)("");
-  (0, import_react142.useEffect)(() => {
+var DateRangeEditor = ({ ariaLabel, onChange, disabled: disabled2, value }) => {
+  const [minDateValue, setMinDateValue] = (0, import_react141.useState)(value ? value[0] : "");
+  const [maxDateValue, setMaxDateValue] = (0, import_react141.useState)(value ? value[1] : "");
+  const [error, setError] = (0, import_react141.useState)("");
+  (0, import_react141.useEffect)(() => {
     if (!minDateValue || !maxDateValue) {
       return;
     }
@@ -22754,23 +22796,25 @@ var DateRangeEditor = ({ ariaLabel, onChange }) => {
     /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
       Input,
       {
-        "aria-label": `${ariaLabel}-min-date`,
+        label: `${ariaLabel}-min-date`,
         type: "date",
         showLabel: false,
         value: minDateValue,
         onChange: (e) => setMinDateValue(e.currentTarget.value),
-        "aria-invalid": !error ? false : true
+        "aria-invalid": !error ? false : true,
+        disabled: disabled2
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
       Input,
       {
-        "aria-label": `${ariaLabel}-max-date`,
+        label: `${ariaLabel}-max-date`,
         type: "date",
         showLabel: false,
         value: maxDateValue,
         onChange: (e) => setMaxDateValue(e.currentTarget.value),
-        "aria-invalid": !error ? false : true
+        "aria-invalid": !error ? false : true,
+        disabled: disabled2
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(ErrorContainer, { errorMessage: error })
@@ -22784,7 +22828,7 @@ var FilterEditorRenderer = ({ editorType, ...props }) => {
   if (editorType === "empty") {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Editor, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Editor, { ...props, disabled: props.isDisabled });
 };
 var filterMapper = {
   multiChoice: FilterMultiChoiceEditor,
@@ -22802,10 +22846,10 @@ var ErrorContainer = ({ errorMessage }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
     "div",
     {
-      css: import_react141.css`
-        grid-column: span 6;
-        order: 6;
-      `,
+      css: {
+        gridColumn: "span 6",
+        order: 6
+      },
       children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(FieldMessage, { errorMessage })
     }
   );
@@ -22818,7 +22862,7 @@ var SearchAndFilterOptionsContainer2 = ({
   buttonRow,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("div", { css: SearchAndFilterOptionsContainer, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("div", { css: SearchAndFilterOptionsContainer, "data-testid": "search-and-filter-options", children: [
     /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("div", { css: SearchAndFilterOptionsInnerContainer, children }),
     buttonRow ? /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
       HorizontalRhythm,
@@ -22901,11 +22945,35 @@ var FilterItem = ({
   onValueChange
 }) => {
   var _a, _b;
-  const { filters, handleDeleteFilter } = useSearchAndFilter();
+  const { filters, handleDeleteFilter, filterOptions } = useSearchAndFilter();
   const label = filters[index].field !== "" ? filters[index].field : "unknown filter field";
   const operatorLabel = filters[index].operator !== "" ? `operator ${filters[index].operator}` : "unknown operator";
   const metaDataLabel = filters[index].value !== "" ? `value ${filters[index].value}` : "unknown value";
   const metaDataPossibleOptions = (_b = (_a = operatorOptions.find((op) => filters[index].operator === op.value)) == null ? void 0 : _a.editorType) != null ? _b : "singleChoice";
+  const { selectedFieldValue, selectedOperatorValue, selectedMetaValue } = (0, import_react142.useMemo)(() => {
+    var _a2, _b2;
+    const currentSelectedFilter = filterOptions.find((item) => {
+      var _a3;
+      return (_a3 = item.options) == null ? void 0 : _a3.find((op) => op.value === filters[index].field);
+    });
+    const selectedFieldValue2 = (_b2 = (_a2 = currentSelectedFilter == null ? void 0 : currentSelectedFilter.options) == null ? void 0 : _a2.find((item) => {
+      return filters[index].field === item.value;
+    })) != null ? _b2 : [];
+    const selectedOperatorValue2 = operatorOptions == null ? void 0 : operatorOptions.find((item) => {
+      return filters[index].operator === item.value;
+    });
+    const selectedMetaValue2 = valueOptions.filter((item) => {
+      if (Array.isArray(filters[index].value) && item.value) {
+        return filters[index].value.includes(item.value);
+      }
+      return filters[index].value === item.value;
+    });
+    return {
+      selectedFieldValue: selectedFieldValue2,
+      selectedOperatorValue: selectedOperatorValue2 != null ? selectedOperatorValue2 : void 0,
+      selectedMetaValue: selectedMetaValue2.length > 0 ? selectedMetaValue2 : filters[index].value
+    };
+  }, [filters, filterOptions, index, operatorOptions, valueOptions]);
   return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { css: ConditionalFilterRow, children: [
     /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("span", { children: index === 0 ? "where" : "and" }),
     /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { css: ConditionalInputRow, children: [
@@ -22917,7 +22985,8 @@ var FilterItem = ({
           onChange: (e) => {
             var _a2;
             onParamChange((_a2 = e == null ? void 0 : e.value) != null ? _a2 : "");
-          }
+          },
+          value: selectedFieldValue
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
@@ -22929,7 +22998,8 @@ var FilterItem = ({
             var _a2;
             return onOperatorChange((_a2 = e == null ? void 0 : e.value) != null ? _a2 : "");
           },
-          isDisabled: !filters[index].field
+          isDisabled: !filters[index].field,
+          value: selectedOperatorValue
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
@@ -22938,7 +23008,9 @@ var FilterItem = ({
           "aria-label": metaDataLabel,
           editorType: metaDataPossibleOptions,
           options: valueOptions,
-          onChange: (e) => onValueChange(e != null ? e : "")
+          onChange: (e) => onValueChange(e != null ? e : ""),
+          isDisabled: !filters[index].operator,
+          value: selectedMetaValue
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
@@ -23005,13 +23077,27 @@ var SearchAndFilter = ({
   filters,
   filterOptions,
   filterControls = /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(FilterControls, {}),
+  viewSwitchControls,
   children = /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(FilterItems, {}),
-  onChange
+  onChange,
+  onSearchChange
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(SearchAndFilterProvider, { filters, filterOptions, onChange, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(VerticalRhythm, { css: SearchAndFilterContainer, "data-testid": "search-and-filter", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("div", { css: SearchAndFilterControlsWrapper, children: filterControls }),
-    children
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+    SearchAndFilterProvider,
+    {
+      filters,
+      filterOptions,
+      onChange,
+      onSearchChange,
+      children: /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(VerticalRhythm, { css: SearchAndFilterContainer, "data-testid": "search-and-filter", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("div", { css: SearchAndFilterOutterControlWrapper, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("div", { css: SearchAndFilterControlsWrapper, children: filterControls }),
+          viewSwitchControls
+        ] }),
+        children
+      ] })
+    }
+  );
 };
 
 // src/components/SegmentedControl/SegmentedControl.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "19.116.0",
+  "version": "19.116.2-alpha.0+48367f95e7",
   "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.116.0",
-    "@uniformdev/richtext": "^19.116.0",
+    "@uniformdev/canvas": "^19.116.2-alpha.0+48367f95e7",
+    "@uniformdev/richtext": "^19.116.2-alpha.0+48367f95e7",
     "autoprefixer": "10.4.16",
     "hygen": "6.2.11",
     "postcss": "8.4.32",
@@ -71,5 +71,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "eb2d8d8485cd6c1d4cb6ea5ad1d4d230405ede2e"
+  "gitHead": "48367f95e7d44220c5e8c479c023e90c20f0b6c9"
 }