@databiosphere/findable-ui 29.0.2 → 31.0.0

package/lib/components/DataDictionary/components/Table/components/BasicCell/utils.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+/**
+ * Returns a parsed value based on the original value.
+ * If the value is a boolean, it is converted to its string representation ("true" or "false").
+ * For all other types of ReactNode, the value is returned unchanged.
+ * @param value - The original value.
+ * @returns Parsed value or original value.
+ */
+export declare function parseValue(value: ReactNode): ReactNode;

package/lib/components/DataDictionary/components/Table/components/BasicCell/utils.js

@@ -0,0 +1,12 @@
+/**
+ * Returns a parsed value based on the original value.
+ * If the value is a boolean, it is converted to its string representation ("true" or "false").
+ * For all other types of ReactNode, the value is returned unchanged.
+ * @param value - The original value.
+ * @returns Parsed value or original value.
+ */
+export function parseValue(value) {
+    if (typeof value === "boolean")
+        return value.toString();
+    return value;
+}

package/lib/components/DataDictionary/components/Table/hook.d.ts

@@ -1,3 +1,3 @@
-import { ColumnDef, Table } from "@tanstack/react-table";
-import { Attribute, AttributeValueTypes } from "../../../../common/entities";
-export declare const useTable: (data: Attribute[], columnDefs: ColumnDef<Attribute, AttributeValueTypes>[]) => Table<Attribute>;
+import { ColumnDef, RowData, Table } from "@tanstack/react-table";
+import { Attribute } from "../../../../common/entities";
+export declare const useTable: <T extends RowData = Attribute>(data: T[], columnDefs: ColumnDef<T, T[keyof T]>[]) => Table<T>;

package/lib/components/DataDictionary/components/Table/hook.js

@@ -1,7 +1,9 @@
-import { useReactTable } from "@tanstack/react-table";
+import { useReactTable, } from "@tanstack/react-table";
 import { useTableOptions } from "./options/hook";
 export const useTable = (data, columnDefs) => {
+    // Table options.
     const tableOptions = useTableOptions();
+    // Table instance.
     return useReactTable({
         ...tableOptions,
         columns: columnDefs,

package/lib/components/DataDictionary/components/Table/options/core/constants.d.ts

@@ -1,3 +1,2 @@
-import { CoreOptions } from "@tanstack/react-table";
-import { Attribute } from "../../../../../../common/entities";
-export declare const CORE_OPTIONS: Pick<CoreOptions<Attribute>, "_features" | "getCoreRowModel">;
+import { CoreOptions, RowData } from "@tanstack/react-table";
+export declare const CORE_OPTIONS: Pick<CoreOptions<RowData>, "_features" | "getCoreRowModel">;

package/lib/components/DataDictionary/components/Table/options/hook.d.ts

@@ -1,3 +1,3 @@
-import { TableOptions } from "@tanstack/react-table";
+import { RowData, TableOptions } from "@tanstack/react-table";
 import { Attribute } from "../../../../../common/entities";
-export declare const useTableOptions: () => Omit<TableOptions<Attribute>, "columns" | "data">;
+export declare const useTableOptions: <T extends RowData = Attribute>() => Omit<TableOptions<T>, "columns" | "data">;

package/lib/components/DataDictionary/components/Table/options/sorting/constants.d.ts

@@ -1,3 +1,2 @@
-import { SortingOptions } from "@tanstack/react-table";
-import { Attribute } from "../../../../../../common/entities";
-export declare const SORTING_OPTIONS: Pick<SortingOptions<Attribute>, "enableSorting">;
+import { RowData, SortingOptions } from "@tanstack/react-table";
+export declare const SORTING_OPTIONS: Pick<SortingOptions<RowData>, "enableSorting">;

package/lib/components/DataDictionary/components/Table/table.d.ts

@@ -1,2 +1,3 @@
+import { RowData } from "@tanstack/react-table";
 import { TableProps } from "./types";
-export declare const Table: ({ table }: TableProps) => JSX.Element;
+export declare const Table: <T extends RowData>({ table, }: TableProps<T>) => JSX.Element;

package/lib/components/DataDictionary/components/Table/table.js

@@ -7,7 +7,7 @@ import { GridTable } from "../../../Table/table.styles";
 import { getColumnTrackSizing } from "../../../TableCreator/options/columnTrackSizing/utils";
 import { GridPaper } from "../../../common/Paper/paper.styles";
 import { StyledRoundedPaper } from "./table.styles";
-export const Table = ({ table }) => {
+export const Table = ({ table, }) => {
     return (React.createElement(StyledRoundedPaper, { variant: "table" },
         React.createElement(GridPaper, null,
             React.createElement(TableContainer, null,

package/lib/components/DataDictionary/components/Table/types.d.ts

@@ -1,5 +1,4 @@
-import { Table } from "@tanstack/react-table";
-import { Attribute } from "../../../../common/entities";
-export interface TableProps {
-    table: Table<Attribute>;
+import { RowData, Table } from "@tanstack/react-table";
+export interface TableProps<T extends RowData> {
+    table: Table<T>;
 }

package/lib/components/DataDictionary/dataDictionary.d.ts

@@ -1,2 +1,4 @@
+import { RowData } from "@tanstack/react-table";
+import { Attribute } from "../../common/entities";
 import { DataDictionaryProps } from "./types";
-export declare const DataDictionary: ({ className, EntitiesLayout, Outline, OutlineLayout, Title, TitleLayout, }: DataDictionaryProps) => JSX.Element;
+export declare const DataDictionary: <T extends RowData = Attribute>({ className, EntitiesLayout, Outline, OutlineLayout, Title, TitleLayout, }: DataDictionaryProps) => JSX.Element;

package/lib/components/DataDictionary/dataDictionary.styles.js

@@ -9,12 +9,11 @@ export const grid = css `
 export const View = styled("div") `
   ${grid};
   flex: 1;
-  margin: 0 auto;
-  max-width: min(calc(100vw - 48px), 1392px);
+  margin: 0 24px;
   position: relative;
 
   ${mediaTabletDown} {
     grid-template-columns: 1fr;
-    max-width: calc(100vw - 32px);
+    margin: 0 16px;
   }
 `;

package/lib/components/DataDictionary/hooks/UseDataDictionary/hook.d.ts

@@ -1,2 +1,4 @@
+import { RowData } from "@tanstack/react-table";
+import { Attribute } from "../../../../common/entities";
 import { UseDataDictionary } from "./types";
-export declare const useDataDictionary: () => UseDataDictionary;
+export declare const useDataDictionary: <T extends RowData = Attribute>() => UseDataDictionary<T>;

package/lib/components/DataDictionary/hooks/UseDataDictionary/types.d.ts

@@ -1,6 +1,6 @@
-import { ColumnDef } from "@tanstack/react-table";
-import { Attribute, AttributeValueTypes, Class } from "../../../../common/entities";
-export interface UseDataDictionary {
-    classes: Class[];
-    columnDefs: ColumnDef<Attribute, AttributeValueTypes>[];
+import { ColumnDef, RowData } from "@tanstack/react-table";
+import { Attribute, Class } from "../../../../common/entities";
+export interface UseDataDictionary<T extends RowData = Attribute> {
+    classes: Class<T>[];
+    columnDefs: ColumnDef<T, T[keyof T]>[];
 }

package/lib/components/Filter/components/Filter/filter.d.ts

@@ -1,10 +1,10 @@
 import { ReactNode } from "react";
-import { SelectCategoryView } from "../../../../common/entities";
+import { CategoryView } from "../../../../common/categories/views/types";
 import { TrackFilterOpenedFunction } from "../../../../config/entities";
 import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
 export interface FilterProps {
     categorySection?: string;
-    categoryView: SelectCategoryView;
+    categoryView: CategoryView;
     closeAncestor?: () => void;
     isFilterDrawer: boolean;
     onFilter: OnFilterFn;

package/lib/components/Filter/components/Filter/filter.js

@@ -1,11 +1,18 @@
 import { CloseRounded } from "@mui/icons-material";
 import { Grow } from "@mui/material";
 import React, { useState } from "react";
+import { isRangeCategoryView } from "../../../../common/categories/views/range/typeGuards";
 import { TEST_IDS } from "../../../../tests/testIds";
 import { FilterLabel } from "../FilterLabel/filterLabel";
 import { FilterMenu } from "../FilterMenu/filterMenu";
+import { FilterRange } from "../FilterRange/filterRange";
 import { DrawerTransition } from "./components/DrawerTransition/drawerTransition";
 import { FilterPopover, IconButton } from "./filter.styles";
+/**
+ * Filter component.
+ * TODO(cc) refactor: build tags from categoryView for selected values.
+ * TODO(cc) tests: add tests for selected values (rending of tags) for select and range categories.
+ */
 const DEFAULT_POSITION = { left: 0, top: 0 };
 const DEFAULT_SLOT_PROPS = {
     paper: { variant: "menu" },
@@ -21,6 +28,7 @@ export const Filter = ({ categorySection, categoryView, closeAncestor, isFilterD
     const TransitionComponent = isFilterDrawer ? DrawerTransition : Grow;
     const transitionDuration = isOpen ? 250 : 300;
     const TransitionDuration = isFilterDrawer ? transitionDuration : undefined;
+    const isRangeView = isRangeCategoryView(categoryView);
     /**
      * Closes filter popover.
      */
@@ -49,9 +57,9 @@ export const Filter = ({ categorySection, categoryView, closeAncestor, isFilterD
         trackFilterOpened?.({ category: categoryView.key });
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(FilterLabel, { annotation: categoryView.annotation, count: categoryView.values.length, disabled: categoryView.isDisabled, isOpen: isOpen, label: categoryView.label, onClick: onOpenFilter }),
-        React.createElement(FilterPopover, { anchorPosition: anchorPosition, anchorReference: "anchorPosition", "data-testid": TEST_IDS.FILTER_POPOVER, marginThreshold: 0, onClose: onCloseFilters, open: isOpen, slotProps: slotProps, TransitionComponent: TransitionComponent, transitionDuration: TransitionDuration },
+        React.createElement(FilterLabel, { annotation: categoryView.annotation, count: isRangeView ? undefined : categoryView.values.length, disabled: categoryView.isDisabled, isOpen: isOpen, label: categoryView.label, onClick: onOpenFilter }),
+        React.createElement(FilterPopover, { anchorPosition: anchorPosition, anchorReference: "anchorPosition", "data-testid": TEST_IDS.FILTER_POPOVER, marginThreshold: 0, onClose: onCloseFilters, open: isOpen, slotProps: slotProps, slots: { transition: TransitionComponent }, transitionDuration: TransitionDuration },
             isOpen && isFilterDrawer && (React.createElement(IconButton, { Icon: CloseRounded, onClick: onCloseFilters, size: "medium" })),
-            React.createElement(FilterMenu, { categorySection: categorySection, categoryKey: categoryView.key, categoryLabel: categoryView.label, isFilterDrawer: isFilterDrawer, onFilter: onFilter, onCloseFilter: onCloseFilter, values: categoryView.values })),
+            isRangeView ? (React.createElement(FilterRange, { categoryKey: categoryView.key, categoryLabel: categoryView.label, categorySection: categorySection, isFilterDrawer: isFilterDrawer, max: categoryView.max, min: categoryView.min, selectedMax: categoryView.selectedMax, selectedMin: categoryView.selectedMin, onCloseFilter: onCloseFilter, onFilter: onFilter, unit: categoryView.unit })) : (React.createElement(FilterMenu, { categoryKey: categoryView.key, categoryLabel: categoryView.label, categorySection: categorySection, isFilterDrawer: isFilterDrawer, onCloseFilter: onCloseFilter, onFilter: onFilter, values: categoryView.values }))),
         tags));
 };

package/lib/components/Filter/components/Filter/stories/args.d.ts

@@ -0,0 +1,5 @@
+import { ComponentProps } from "react";
+import { Filter } from "../filter";
+export declare const SELECT_ARGS: ComponentProps<typeof Filter>;
+export declare const DISABLED_SELECT_ARGS: ComponentProps<typeof Filter>;
+export declare const RANGE_ARGS: ComponentProps<typeof Filter>;

package/lib/components/Filter/components/Filter/stories/args.js

@@ -0,0 +1,19 @@
+import { fn } from "@storybook/test";
+import { DONOR_COUNT, GENUS_SPECIES } from "../../Filters/stories/constants";
+export const SELECT_ARGS = {
+    categoryView: GENUS_SPECIES,
+    isFilterDrawer: false,
+    onFilter: fn(),
+};
+export const DISABLED_SELECT_ARGS = {
+    ...SELECT_ARGS,
+    categoryView: {
+        ...SELECT_ARGS.categoryView,
+        isDisabled: true,
+    },
+};
+export const RANGE_ARGS = {
+    categoryView: DONOR_COUNT,
+    isFilterDrawer: false,
+    onFilter: fn(),
+};

package/lib/components/Filter/components/Filter/stories/filter.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Filter } from "../filter";
+declare const meta: Meta<typeof Filter>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const SelectCategory: Story;
+export declare const DisabledSelectCategory: Story;
+export declare const RangeCategory: Story;

package/lib/components/Filter/components/Filter/stories/filter.stories.js

@@ -0,0 +1,21 @@
+import { Box } from "@mui/material";
+import React from "react";
+import { Filter } from "../filter";
+import { DISABLED_SELECT_ARGS, RANGE_ARGS, SELECT_ARGS } from "./args";
+const meta = {
+    component: Filter,
+    decorators: [
+        (Story) => (React.createElement(Box, { sx: { width: 248 } },
+            React.createElement(Story, null))),
+    ],
+};
+export default meta;
+export const SelectCategory = {
+    args: SELECT_ARGS,
+};
+export const DisabledSelectCategory = {
+    args: DISABLED_SELECT_ARGS,
+};
+export const RangeCategory = {
+    args: RANGE_ARGS,
+};

package/lib/components/Filter/components/FilterMenu/filterMenu.js

@@ -6,14 +6,14 @@ import { List } from "../FilterList/filterList.styles";
 import { FilterMenuSearch } from "../FilterMenuSearch/filterMenuSearch";
 import { FilterNoResultsFound } from "../FilterNoResultsFound/filterNoResultsFound";
 import { VariableSizeList } from "../VariableSizeList/VariableSizeList";
-import { Button, FilterView, FilterViewTools } from "./filterMenu.styles";
+import { FilterView, FilterViewTools, StyledButtonBase, } from "./filterMenu.styles";
 export const FilterMenu = ({ categoryKey, categoryLabel, categorySection, isFilterDrawer, menuWidth = 312, onCloseFilter, onFilter, values, }) => {
     const [searchTerm, setSearchTerm] = useState("");
     const isSearchable = isFilterDrawer || values.length > MAX_DISPLAYABLE_LIST_ITEMS;
     const matchedItems = applyMenuFilter(values, isSearchable ? searchTerm : "");
     return (React.createElement(FilterView, { menuWidth: menuWidth },
         React.createElement(FilterViewTools, null,
-            isFilterDrawer && (React.createElement(Button, { onClick: onCloseFilter },
+            isFilterDrawer && (React.createElement(StyledButtonBase, { onClick: onCloseFilter },
                 React.createElement(SouthIcon, { fontSize: "small" }),
                 categoryLabel)),
             isSearchable && (React.createElement(FilterMenuSearch, { searchTerm: searchTerm, setSearchTerm: setSearchTerm }))),

package/lib/components/Filter/components/FilterMenu/filterMenu.styles.d.ts

@@ -9,7 +9,7 @@ export declare const FilterViewTools: import("@emotion/styled").StyledComponent<
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Button: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonBaseOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+export declare const StyledButtonBase: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonBaseOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
 }, "style" | "className" | "classes" | "tabIndex" | "children" | "sx" | "disabled" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef"> & {
     theme?: import("@emotion/react").Theme;

package/lib/components/Filter/components/FilterMenu/filterMenu.styles.js

@@ -13,7 +13,7 @@ export const FilterViewTools = styled.div `
   }
 }
 `;
-export const Button = styled(ButtonBase) `
+export const StyledButtonBase = styled(ButtonBase) `
   ${textBodyLarge500};
   align-items: center;
   display: flex;

package/lib/components/Filter/components/FilterRange/constants.d.ts

@@ -1,8 +1,6 @@
 import { ButtonProps, DividerProps, InputLabelProps, OutlinedInputProps, ToggleButtonGroupProps } from "@mui/material";
-import { RANGE_OPERATOR } from "./types";
 export declare const BUTTON_PROPS: ButtonProps;
 export declare const DIVIDER_PROPS: DividerProps;
 export declare const INPUT_PROPS: OutlinedInputProps;
 export declare const INPUT_LABEL_PROPS: InputLabelProps;
-export declare const RANGE_OPERATOR_DISPLAY: Record<RANGE_OPERATOR, string>;
 export declare const TOGGLE_BUTTON_GROUP_PROPS: ToggleButtonGroupProps;

package/lib/components/Filter/components/FilterRange/constants.js

@@ -16,11 +16,6 @@ export const INPUT_LABEL_PROPS = {
     disableAnimation: true,
     shrink: true,
 };
-export const RANGE_OPERATOR_DISPLAY = {
-    between: "From",
-    greaterThan: "Greater Than",
-    lessThan: "Less Than",
-};
 export const TOGGLE_BUTTON_GROUP_PROPS = {
     exclusive: true,
     fullWidth: true,

package/lib/components/Filter/components/FilterRange/filterRange.d.ts

@@ -1,2 +1,2 @@
 import { FilterRangeProps } from "./types";
-export declare const FilterRange: ({ className }: FilterRangeProps) => JSX.Element;
+export declare const FilterRange: ({ categoryKey, categoryLabel, categorySection, className, isFilterDrawer, max, min, onCloseFilter, onFilter, selectedMax, selectedMin, unit, }: FilterRangeProps) => JSX.Element;

package/lib/components/Filter/components/FilterRange/filterRange.js

@@ -1,26 +1,55 @@
-import { Button, Divider, FormControl, Grid, InputLabel, OutlinedInput, ToggleButton, ToggleButtonGroup, } from "@mui/material";
+import { Button, Divider, FormControl, FormHelperText, Grid, InputLabel, OutlinedInput, ToggleButton, ToggleButtonGroup, } from "@mui/material";
 import React, { Fragment } from "react";
 import { TEST_IDS } from "../../../../tests/testIds";
-import { BUTTON_PROPS, DIVIDER_PROPS, INPUT_LABEL_PROPS, INPUT_PROPS, RANGE_OPERATOR_DISPLAY, TOGGLE_BUTTON_GROUP_PROPS, } from "./constants";
+import { SouthIcon } from "../../../common/CustomIcon/components/SouthIcon/southIcon";
+import { FilterViewTools, StyledButtonBase, } from "../FilterMenu/filterMenu.styles";
+import { BUTTON_PROPS, DIVIDER_PROPS, INPUT_LABEL_PROPS, INPUT_PROPS, TOGGLE_BUTTON_GROUP_PROPS, } from "./constants";
 import { StyledForm } from "./filterRange.styles";
+import { FIELD_NAME } from "./hooks/UseFilterRange/constants";
 import { useFilterRange } from "./hooks/UseFilterRange/hook";
-import { RANGE_OPERATOR } from "./types";
-export const FilterRange = ({ className }) => {
-    const { onChange, onSubmit, value } = useFilterRange();
-    return (React.createElement(StyledForm, { className: className, "data-testid": TEST_IDS.FILTER_RANGE, onSubmit: onSubmit },
-        React.createElement(ToggleButtonGroup, { ...TOGGLE_BUTTON_GROUP_PROPS, onChange: onChange, value: value },
-            React.createElement(ToggleButton, { value: RANGE_OPERATOR.BETWEEN }, "Between"),
-            React.createElement(ToggleButton, { value: RANGE_OPERATOR.LESS_THAN }, "Less Than"),
-            React.createElement(Divider, { ...DIVIDER_PROPS }),
-            React.createElement(ToggleButton, { value: RANGE_OPERATOR.GREATER_THAN }, "Greater Than")),
-        React.createElement(Grid, null,
-            React.createElement(FormControl, null,
-                React.createElement(InputLabel, { ...INPUT_LABEL_PROPS, htmlFor: value }, RANGE_OPERATOR_DISPLAY[value]),
-                React.createElement(OutlinedInput, { ...INPUT_PROPS, name: value, placeholder: "eg. 1" })),
-            value === RANGE_OPERATOR.BETWEEN && (React.createElement(Fragment, null,
-                React.createElement(Divider, null),
-                React.createElement(FormControl, null,
-                    React.createElement(InputLabel, { ...INPUT_LABEL_PROPS, htmlFor: "between-to" }, "To"),
-                    React.createElement(OutlinedInput, { ...INPUT_PROPS, name: "between-to", placeholder: "eg. 2" }))))),
-        React.createElement(Button, { ...BUTTON_PROPS }, "Filter")));
+import { RANGE_OPERATOR } from "./hooks/UseFilterRange/types";
+import { getRangeOperator } from "./utils";
+export const FilterRange = ({ categoryKey, categoryLabel, categorySection, className, isFilterDrawer, max, min, onCloseFilter, onFilter, selectedMax, selectedMin, unit, }) => {
+    const rangeOperator = getRangeOperator({ selectedMax, selectedMin });
+    const { clearErrors, formState: { errors }, handleSubmit, onChange, value, } = useFilterRange(rangeOperator);
+    return (React.createElement(Fragment, null,
+        isFilterDrawer && (React.createElement(FilterViewTools, null,
+            React.createElement(StyledButtonBase, { onClick: onCloseFilter },
+                React.createElement(SouthIcon, { fontSize: "small" }),
+                categoryLabel))),
+        React.createElement(StyledForm, { className: className, "data-testid": TEST_IDS.FILTER_RANGE, onSubmit: handleSubmit(onFilter, {
+                categoryKey,
+                categorySection,
+            }) },
+            React.createElement(ToggleButtonGroup, { ...TOGGLE_BUTTON_GROUP_PROPS, onChange: (e, value) => {
+                    clearErrors();
+                    onChange?.(e, value);
+                }, value: value },
+                React.createElement(ToggleButton, { value: RANGE_OPERATOR.BETWEEN }, "Between"),
+                React.createElement(ToggleButton, { value: RANGE_OPERATOR.LESS_THAN }, "Less Than"),
+                React.createElement(Divider, { ...DIVIDER_PROPS }),
+                React.createElement(ToggleButton, { value: RANGE_OPERATOR.GREATER_THAN }, "Greater Than")),
+            React.createElement(Grid, null,
+                value !== RANGE_OPERATOR.LESS_THAN && (React.createElement(FormControl, { error: !!errors[FIELD_NAME.MIN] },
+                    React.createElement(InputLabel, { ...INPUT_LABEL_PROPS, htmlFor: FIELD_NAME.MIN },
+                        value === RANGE_OPERATOR.BETWEEN ? "Min" : "Greater Than",
+                        unit && ` (${unit})`),
+                    React.createElement(OutlinedInput, { ...INPUT_PROPS, defaultValue: selectedMin, id: FIELD_NAME.MIN, name: FIELD_NAME.MIN, onFocus: clearErrors, placeholder: "eg. 1" }),
+                    React.createElement(FormHelperText, null, errors[FIELD_NAME.MIN]
+                        ? errors[FIELD_NAME.MIN]
+                        : value === RANGE_OPERATOR.BETWEEN
+                            ? `Min allowed: ${min}`
+                            : `Allowed values: \u2265 ${min} and \u2264 ${max}`))),
+                value === RANGE_OPERATOR.BETWEEN && React.createElement(Divider, null),
+                value !== RANGE_OPERATOR.GREATER_THAN && (React.createElement(FormControl, { error: !!errors[FIELD_NAME.MAX] },
+                    React.createElement(InputLabel, { ...INPUT_LABEL_PROPS, htmlFor: FIELD_NAME.MAX },
+                        value === RANGE_OPERATOR.BETWEEN ? "Max" : "Less Than",
+                        unit && ` (${unit})`),
+                    React.createElement(OutlinedInput, { ...INPUT_PROPS, defaultValue: selectedMax, id: FIELD_NAME.MAX, name: FIELD_NAME.MAX, onFocus: clearErrors, placeholder: "eg. 20" }),
+                    React.createElement(FormHelperText, { color: "inkLight" }, errors[FIELD_NAME.MAX]
+                        ? errors[FIELD_NAME.MAX]
+                        : value === RANGE_OPERATOR.BETWEEN
+                            ? `Max allowed: ${max}`
+                            : `Allowed values: \u2265 ${min} and \u2264 ${max}`)))),
+            React.createElement(Button, { ...BUTTON_PROPS }, "Filter"))));
 };

package/lib/components/Filter/components/FilterRange/filterRange.styles.js

@@ -1,5 +1,6 @@
 import styled from "@emotion/styled";
-import { inkLight, inkMain, smokeDark, } from "../../../../styles/common/mixins/colors";
+import { PALETTE } from "../../../../styles/common/constants/palette";
+import { mediaDesktopSmallDown } from "../../../../styles/common/mixins/breakpoints";
 import { textBody400 } from "../../../../styles/common/mixins/fonts";
 export const StyledForm = styled("form") `
   padding: 16px;
@@ -10,16 +11,16 @@ export const StyledForm = styled("form") `
     width: 100%;
 
     .MuiToggleButton-root {
-      color: ${inkLight};
+      color: ${PALETTE.INK_LIGHT};
       text-transform: capitalize;
 
       &.Mui-selected {
-        color: ${inkMain};
+        color: ${PALETTE.INK_MAIN};
       }
     }
 
     .MuiDivider-root {
-      border-color: ${smokeDark};
+      border-color: ${PALETTE.SMOKE_DARK};
       border-radius: 4px;
       margin: 6px 0;
     }
@@ -29,31 +30,58 @@ export const StyledForm = styled("form") `
     display: grid;
     gap: 4px 0;
     grid-auto-flow: column;
-    grid-template-rows: auto auto;
+    grid-template-rows: auto auto auto;
     margin: 12px 0 16px 0;
 
     .MuiFormControl-root {
       display: grid;
-      gap: inherit;
+      gap: 4px 0;
       grid-row: 1 / -1;
       grid-template-rows: subgrid;
 
       .MuiInputLabel-root {
         ${textBody400};
-        color: ${inkMain};
+        color: ${PALETTE.INK_MAIN};
         max-width: unset;
         position: relative;
         transform: unset;
       }
 
-      .MuiOutlinedInput-input {
-        padding-right: 10px;
+      .MuiOutlinedInput-root {
+        .MuiOutlinedInput-input {
+          padding-right: 10px;
+        }
+
+        input::placeholder {
+          color: ${PALETTE.INK_LIGHT};
+          opacity: 0.8;
+        }
+
+        &.Mui-focused {
+          input::placeholder {
+            opacity: 0;
+          }
+        }
+      }
+
+      .MuiFormLabel-filled + .MuiOutlinedInput-root {
+        .MuiOutlinedInput-input {
+          color: ${PALETTE.INK_MAIN};
+        }
+      }
+
+      .MuiFormHelperText-root {
+        color: ${PALETTE.INK_LIGHT};
+
+        &.Mui-error {
+          color: ${PALETTE.ALERT_MAIN};
+        }
       }
     }
 
     .MuiDivider-root {
       align-self: center;
-      border-color: ${inkLight};
+      border-color: ${PALETTE.INK_LIGHT};
       grid-row: 2;
       margin: 0 4px;
       width: 8px;
@@ -63,4 +91,24 @@ export const StyledForm = styled("form") `
   .MuiButton-root {
     grid-column: 1 / -1;
   }
+
+  ${mediaDesktopSmallDown} {
+    padding: 0 16px;
+    width: 312px;
+
+    .MuiGrid-root {
+      gap: 16px 0;
+      grid-template-rows: auto auto;
+      margin: 16px 0;
+
+      .MuiFormControl-root {
+        grid-row: unset;
+        grid-template-rows: unset;
+      }
+
+      .MuiDivider-root {
+        display: none;
+      }
+    }
+  }
 `;

package/lib/components/Filter/components/FilterRange/hooks/UseFilterRange/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const FIELD_NAME: {
+    MAX: string;
+    MIN: string;
+    RANGE_OPERATOR: string;
+};

package/lib/components/Filter/components/FilterRange/hooks/UseFilterRange/constants.js

@@ -0,0 +1,5 @@
+export const FIELD_NAME = {
+    MAX: "max",
+    MIN: "min",
+    RANGE_OPERATOR: "rangeOperator",
+};

package/lib/components/Filter/components/FilterRange/hooks/UseFilterRange/hook.d.ts

@@ -1,2 +1,2 @@
-import { UseFilterRange } from "./types";
-export declare const useFilterRange: () => UseFilterRange;
+import { RANGE_OPERATOR, UseFilterRange } from "./types";
+export declare const useFilterRange: (initialValue?: RANGE_OPERATOR) => UseFilterRange;

package/lib/components/Filter/components/FilterRange/hooks/UseFilterRange/hook.js

@@ -1,14 +1,39 @@
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
+import { VIEW_KIND } from "../../../../../../common/categories/views/types";
 import { useToggleButtonGroup } from "../../../../../common/ToggleButtonGroup/hooks/UseToggleButtonGroup/hook";
-import { RANGE_OPERATOR } from "../../types";
-export const useFilterRange = () => {
-    const { onChange, value } = useToggleButtonGroup(RANGE_OPERATOR.BETWEEN);
-    const onSubmit = useCallback((e) => {
-        e.preventDefault();
+import { SCHEMA } from "./schema";
+import { RANGE_OPERATOR, } from "./types";
+import { getFormValues } from "./utils";
+export const useFilterRange = (initialValue = RANGE_OPERATOR.BETWEEN) => {
+    const [errors, setErrors] = useState({});
+    const { onChange, value } = useToggleButtonGroup(initialValue);
+    const clearErrors = useCallback(() => {
+        setErrors({});
     }, []);
+    const handleSubmit = useCallback((onSubmit, parameters) => {
+        return (e) => {
+            e.preventDefault();
+            const fieldValues = getFormValues(e.currentTarget, value); // `value` is current range operator.
+            SCHEMA.validate(fieldValues, { abortEarly: false })
+                .then((result) => {
+                setErrors({});
+                onSubmit(parameters.categoryKey, [result.min, result.max], true, parameters.categorySection, VIEW_KIND.RANGE);
+            })
+                .catch((validationError) => {
+                const fieldErrors = {};
+                for (const error of validationError.inner) {
+                    if (error.path)
+                        fieldErrors[error.path] = error.message;
+                }
+                setErrors(fieldErrors);
+            });
+        };
+    }, [value]);
     return {
+        clearErrors,
+        formState: { errors },
+        handleSubmit,
         onChange,
-        onSubmit,
         value,
     };
 };

package/lib/components/Filter/components/FilterRange/hooks/UseFilterRange/schema.d.ts

@@ -0,0 +1,6 @@
+import { RANGE_OPERATOR } from "./types";
+export declare const SCHEMA: import("yup").ObjectSchema<{
+    [x: string]: number | RANGE_OPERATOR | undefined;
+}, import("yup").AnyObject, {
+    [x: string]: RANGE_OPERATOR.BETWEEN | undefined;
+}, "">;