@equinor/fusion-react-filter 2.1.0-filter.8 → 2.1.1

package/dist/components/filter/checkbox/CheckboxFilterOptions.d.ts

@@ -1,3 +1,9 @@
-export declare const CheckboxFilterOptions: () => JSX.Element;
+import { type ReactElement } from 'react';
+type CheckboxFilterOptionsProps = {
+    readonly sortFn?: <T extends {
+        label: string;
+    }>(a: T, b: T) => number;
+};
+export declare const CheckboxFilterOptions: ({ sortFn }: CheckboxFilterOptionsProps) => ReactElement;
 export default CheckboxFilterOptions;
 //# sourceMappingURL=CheckboxFilterOptions.d.ts.map

package/dist/components/filter/checkbox/CheckboxFilterOptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxFilterOptions.d.ts","sourceRoot":"","sources":["../../../../src/components/filter/checkbox/CheckboxFilterOptions.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,qBAAqB,QAAO,WAwCxC,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"CheckboxFilterOptions.d.ts","sourceRoot":"","sources":["../../../../src/components/filter/checkbox/CheckboxFilterOptions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAe,MAAM,OAAO,CAAC;AAUvD,KAAK,0BAA0B,GAAG;IAChC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,SAAS;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,MAAM,CAAC;CACvE,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,YAAY,0BAA0B,KAAG,YAyC9E,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/components/filter/checkbox/CheckboxFilterOptions.js

@@ -1,13 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback } from 'react';
-import { useObservableRef, useObservableState } from '@equinor/fusion-react-observable';
+import { useObservableRef, useObservableState } from '@equinor/fusion-observable/react';
 import { useCheckboxFilterOptionContext } from './context';
 import { CheckboxFilterOption } from './CheckboxFilterOption';
-// TODO - make arg!
-const sortFn = (a, b) => a.label.localeCompare(b.label);
-export const CheckboxFilterOptions = () => {
+const defaultSortFn = (a, b) => a.label.localeCompare(b.label);
+export const CheckboxFilterOptions = ({ sortFn }) => {
     const context = useCheckboxFilterOptionContext();
-    const data = useObservableState(context.options$);
+    const { value: data } = useObservableState(context.options$);
     const selectionRef = useObservableRef(context.selection$);
     const onOptionChange = useCallback((item) => {
         const selection = new Set(selectionRef.current || []);
@@ -30,8 +29,7 @@ export const CheckboxFilterOptions = () => {
         inactive: !value.count,
         hide: value.hide,
     }))
-        .sort(sortFn);
-    return (_jsx(_Fragment, { children: itemProps.map((props) => (_jsx(CheckboxFilterOption, Object.assign({}, props), props.name))) }, void 0));
+        .sort(sortFn ?? defaultSortFn);
+    return (_jsx(_Fragment, { children: itemProps.map((props) => (_jsx(CheckboxFilterOption, { ...props }, props.name))) }));
 };
 export default CheckboxFilterOptions;
-//# sourceMappingURL=CheckboxFilterOptions.js.map

package/dist/components/filter/checkbox/CheckboxFilterProvider.d.ts

@@ -1,13 +1,17 @@
-/// <reference types="react" />
-import { FilterOptionBuilder, FilterOptionSelector } from '../../../options/types';
+import { type ReactElement, type PropsWithChildren } from 'react';
+import type { FilterOptionBuilder, FilterOptionSelector } from '../../../options/types';
 import type { CheckboxOption } from './types';
-export declare type CheckboxFilterProviderProps<TData extends Record<string, any>, TOption extends CheckboxOption = CheckboxOption> = {
+import type { FilterFn } from '../../../types';
+export type CheckboxFilterProviderProps<TData extends Record<string, any>, TOption extends CheckboxOption = CheckboxOption> = {
     filterKey: string;
     title?: string;
-    optionBuilder?: FilterOptionBuilder<TData, TOption, string>;
+    filter?: {
+        filterFn: FilterFn<TData, Set<string>>;
+        optionFn: FilterOptionBuilder<TData, TOption, string>;
+    };
     selector?: Extract<keyof TData, string> | string | FilterOptionSelector<TData>;
     initial?: Set<string>;
 };
-export declare const CheckboxFilterProvider: <TData extends Record<string, any>, TOptions extends CheckboxOption = CheckboxOption>(props: import("react").PropsWithChildren<CheckboxFilterProviderProps<TData, TOptions>>) => JSX.Element;
+export declare const CheckboxFilterProvider: <TData extends Record<string, any>, TOptions extends CheckboxOption = CheckboxOption>(props: PropsWithChildren<CheckboxFilterProviderProps<TData, TOptions>>) => ReactElement;
 export default CheckboxFilterProviderProps;
 //# sourceMappingURL=CheckboxFilterProvider.d.ts.map

package/dist/components/filter/checkbox/CheckboxFilterProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxFilterProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/filter/checkbox/CheckboxFilterProvider.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAEnF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAQ9C,oBAAY,2BAA2B,CACrC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACjC,OAAO,SAAS,cAAc,GAAG,cAAc,IAC7C;IACF,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,mBAAmB,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC,MAAM,KAAK,EAAE,MAAM,CAAC,GAAG,MAAM,GAAG,oBAAoB,CAAC,KAAK,CAAC,CAAC;IAC/E,OAAO,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,sBAAsB,mLAKhC,WAmBF,CAAC;AAEF,eAAe,2BAA2B,CAAC"}
+{"version":3,"file":"CheckboxFilterProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/filter/checkbox/CheckboxFilterProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAI3E,OAAO,KAAK,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAExF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAU/C,MAAM,MAAM,2BAA2B,CAErC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACjC,OAAO,SAAS,cAAc,GAAG,cAAc,IAC7C;IACF,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE;QACP,QAAQ,EAAE,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;QACvC,QAAQ,EAAE,mBAAmB,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;KACvD,CAAC;IACF,QAAQ,CAAC,EAAE,OAAO,CAAC,MAAM,KAAK,EAAE,MAAM,CAAC,GAAG,MAAM,GAAG,oBAAoB,CAAC,KAAK,CAAC,CAAC;IAC/E,OAAO,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,CAEnC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACjC,QAAQ,SAAS,cAAc,GAAG,cAAc,EAEhD,KAAK,EAAE,iBAAiB,CAAC,2BAA2B,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,KACnE,YA8BJ,CAAC;AAEF,eAAe,2BAA2B,CAAC"}

package/dist/components/filter/checkbox/CheckboxFilterProvider.js

@@ -3,14 +3,21 @@ import { useMemo } from 'react';
 import { FilterOptionProvider } from '../../../options/FilterOptionProvider';
 import { propertySelector } from '../../../options/create-options';
 const createFilterFn = (selector) => (data, selection) => {
-    return selection.size ? data.filter((x) => selection.has(selector(x).key)) : data;
+    return selection.size
+        ? data.filter((x) => selection.has(selector(x).key))
+        : data;
 };
 export const CheckboxFilterProvider = (props) => {
-    const { filterKey, selector = filterKey, optionBuilder, title, initial, children } = props;
+    const { filterKey, selector = filterKey, title, initial, filter, children } = props;
     const selectorFn = useMemo(() => typeof selector === 'function'
         ? selector
         : propertySelector(selector || selector), [selector]);
-    const filterFn = useMemo(() => createFilterFn(selectorFn), [selectorFn]);
-    return (_jsx(FilterOptionProvider, Object.assign({ selector: selectorFn, optionBuilder: optionBuilder, filter: { key: filterKey, title, initial, filterFn } }, { children: children }), void 0));
+    const filterFn = useMemo(() => {
+        if (filter?.filterFn)
+            return filter.filterFn;
+        if (!selectorFn)
+            throw Error('Could not create filter. Please provide either filterFn or filterSelector.');
+        return createFilterFn(selectorFn);
+    }, [selectorFn, filter?.filterFn]);
+    return (_jsx(FilterOptionProvider, { selector: selectorFn, optionBuilder: filter?.optionFn, filter: { key: filterKey, title, initial, filterFn }, children: children }));
 };
-//# sourceMappingURL=CheckboxFilterProvider.js.map

package/dist/components/filter/checkbox/context.d.ts

@@ -1,4 +1,4 @@
-import { FilterOptionContext } from '../../../options';
+import { type FilterOptionContext } from '../../../options';
 import type { CheckboxOption } from './types';
 export declare const useCheckboxFilterOptionContext: <TOption extends CheckboxOption = CheckboxOption, TValue = string>() => FilterOptionContext<TOption, TValue>;
 //# sourceMappingURL=context.d.ts.map

package/dist/components/filter/checkbox/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/components/filter/checkbox/context.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0B,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC/E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,eAAO,MAAM,8BAA8B,8GAG2C,CAAC"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/components/filter/checkbox/context.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0B,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACpF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,eAAO,MAAM,8BAA8B,GACzC,OAAO,SAAS,cAAc,GAAG,cAAc,EAC/C,MAAM,GAAG,MAAM,OACZ,mBAAmB,CAAC,OAAO,EAAE,MAAM,CAA8C,CAAC"}

package/dist/components/filter/checkbox/context.js

@@ -1,3 +1,2 @@
 import { useFilterOptionContext } from '../../../options';
 export const useCheckboxFilterOptionContext = () => useFilterOptionContext();
-//# sourceMappingURL=context.js.map

package/dist/components/filter/checkbox/index.d.ts

@@ -1,2 +1,2 @@
-export { CheckboxFilter, CheckboxFilterProps, default } from './CheckboxFilter';
+export { CheckboxFilter, type CheckboxFilterProps, default } from './CheckboxFilter';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/filter/checkbox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/filter/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/filter/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/filter/checkbox/index.js

@@ -1,2 +1 @@
 export { CheckboxFilter, default } from './CheckboxFilter';
-//# sourceMappingURL=index.js.map

package/dist/components/filter/checkbox/types.d.ts

@@ -1,5 +1,5 @@
-import { FilterOption } from '../../../options';
-export declare type CheckboxOption = FilterOption & {
+import type { FilterOption } from '../../../options';
+export type CheckboxOption = FilterOption & {
     label: string;
     count: number;
     totalCount: number;

package/dist/components/filter/checkbox/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/filter/checkbox/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,oBAAY,cAAc,GAAG,YAAY,GAAG;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/filter/checkbox/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAErD,MAAM,MAAM,cAAc,GAAG,YAAY,GAAG;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC"}

package/dist/components/filter/checkbox/types.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=types.js.map

package/dist/components/filter/index.js

@@ -2,4 +2,3 @@ export { CheckboxFilter } from './checkbox';
 export { SearchFilter } from './search';
 export { FilterOptionHeader } from './FilterOptionHeader';
 export * from './types';
-//# sourceMappingURL=index.js.map

package/dist/components/filter/search/SearchFilter.d.ts

@@ -1,10 +1,11 @@
-import { TextInputProps } from '@equinor/fusion-react-textinput';
+import { type ReactElement } from 'react';
+import { type TextFieldProps } from '@equinor/eds-core-react';
 import type { FilterFn } from '../../../types';
-export declare type SearchFilterProps<TData> = Omit<TextInputProps, 'onInput' | 'ref'> & {
+export type SearchFilterProps<TData> = Omit<TextFieldProps, 'onInput' | 'ref' | 'id'> & {
     /** identifier for filter */
-    filterKey: string;
+    readonly filterKey: string;
     /** function for filtering by provided query */
-    filterFn?: FilterFn<TData, string>;
+    readonly filterFn?: FilterFn<TData, string>;
 };
 /**
  * Simple text filter
@@ -12,6 +13,6 @@ export declare type SearchFilterProps<TData> = Omit<TextInputProps, 'onInput' |
  * __NOTE__ if not `filterFn` provided, default will be created, this filter is brute and
  * `JSON.stringify` provided data object, this might not be optimal for heavy data sets.
  */
-export declare const SearchFilter: <TData>(props: SearchFilterProps<TData>) => JSX.Element;
+export declare const SearchFilter: <TData>(props: SearchFilterProps<TData>) => ReactElement;
 export default SearchFilter;
 //# sourceMappingURL=SearchFilter.d.ts.map

package/dist/components/filter/search/SearchFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchFilter.d.ts","sourceRoot":"","sources":["../../../../src/components/filter/search/SearchFilter.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAyC,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAIxG,OAAO,KAAK,EAAU,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AASvD,oBAAY,iBAAiB,CAAC,KAAK,IAAI,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,KAAK,CAAC,GAAG;IAC/E,4BAA4B;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;CACpC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,YAAY,8CAA8C,WAuCtE,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"SearchFilter.d.ts","sourceRoot":"","sources":["../../../../src/components/filter/search/SearchFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,YAAY,EAKlB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAa,KAAK,cAAc,EAAQ,MAAM,yBAAyB,CAAC;AAI/E,OAAO,KAAK,EAAU,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAavD,MAAM,MAAM,iBAAiB,CAAC,KAAK,IAAI,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,KAAK,GAAG,IAAI,CAAC,GAAG;IACtF,4BAA4B;IAC5B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,+CAA+C;IAC/C,QAAQ,CAAC,QAAQ,CAAC,EAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;CAC7C,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,YAAY,GAAI,KAAK,EAAG,OAAO,iBAAiB,CAAC,KAAK,CAAC,KAAG,YAgDtE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/filter/search/SearchFilter.js

@@ -1,14 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useMemo, useRef } from 'react';
-import { useSubscription } from '@equinor/fusion-react-observable';
-import { TextInput } from '@equinor/fusion-react-textinput';
+import { useCallback, useMemo, useRef, } from 'react';
+import { useObservableSelector } from '@equinor/fusion-observable/react';
+import { TextField, Icon } from '@equinor/eds-core-react';
 import { useFilter, useFilterSelection } from '../../../hooks';
+import { search } from '@equinor/eds-icons';
+Icon.add({ search });
 const defaultMatcher = (data, query) => {
     /** early escape, no filter */
     if (!query)
         return data;
     const matcher = new RegExp(query, 'i');
-    return data.filter((x) => !!JSON.stringify(Object.values(x)).match(matcher));
+    return data.filter((x) => !!JSON.stringify(Object.values(x ?? {})).match(matcher));
 };
 /**
  * Simple text filter
@@ -32,16 +34,15 @@ export const SearchFilter = (props) => {
         setSelection(e.currentTarget.value);
     }, [setSelection]);
     /** subscribe to changes in the filter selection */
-    useSubscription(
+    useObservableSelector(
     /** create an observable selection for filter  */
     useFilterSelection(props.filterKey), 
     /** update value of text input when selection changes */
     useCallback((query) => {
         if (inputRef.current) {
-            inputRef.current.value = query || '';
+            inputRef.current.value = query ? Array.from(query)[0] || '' : '';
         }
     }, []));
-    return _jsx(TextInput, Object.assign({ ref: inputRef, onInput: onInput, type: "search", variant: "outlined", icon: "search" }, args), void 0);
+    return (_jsx(TextField, { id: filterKey, ref: inputRef, onInput: onInput, type: "search", inputIcon: _jsx(Icon, { name: "search" }), ...args }));
 };
 export default SearchFilter;
-//# sourceMappingURL=SearchFilter.js.map

package/dist/components/filter/search/index.js

@@ -1,2 +1 @@
 export { SearchFilter } from './SearchFilter';
-//# sourceMappingURL=index.js.map

package/dist/components/filter/types.d.ts

@@ -1,4 +1,4 @@
-export declare type FilterComponent = {
+export type FilterComponent = {
     /** unique key for filter */
     filterKey: string;
     /** title for filter */

package/dist/components/filter/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/filter/types.ts"],"names":[],"mappings":"AAAA,oBAAY,eAAe,GAAG;IAC5B,4BAA4B;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,uBAAuB;IACvB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/filter/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,eAAe,GAAG;IAC5B,4BAA4B;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,uBAAuB;IACvB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC"}

package/dist/components/filter/types.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=types.js.map

package/dist/components/index.d.ts

@@ -1,4 +1,4 @@
 export { FilterComponent, CheckboxFilter, FilterOptionHeader, SearchFilter } from './filter';
 export { ClearFilterButton, FilterContainer, SelectionChips } from './misc';
-export { FilterPanel } from './panel';
+export { FilterPanel, FilterPanelProps } from './panel';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC7F,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC5E,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC7F,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC5E,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/index.js

@@ -1,4 +1,3 @@
 export { CheckboxFilter, FilterOptionHeader, SearchFilter } from './filter';
 export { ClearFilterButton, FilterContainer, SelectionChips } from './misc';
 export { FilterPanel } from './panel';
-//# sourceMappingURL=index.js.map

package/dist/components/misc/ClearFilterButton.d.ts

@@ -1,10 +1,12 @@
-import { ButtonProps } from '@equinor/fusion-react-button';
-export declare type ClearFilterButtonProps = Omit<ButtonProps, 'onClick'>;
+import { type ReactElement, type ForwardedRef, type PropsWithChildren } from 'react';
+import { type ButtonProps } from '@equinor/eds-core-react';
+export type ClearFilterButtonProps = PropsWithChildren<Omit<ButtonProps, 'onClick'> & {
+    ref?: ForwardedRef<HTMLButtonElement>;
+}>;
 /**
  * Component for resetting filter values.
  * uses the `useClearFilter` hook
- * inherits `ButtonProps` from `@equinor/fusion-react-button`
  */
-export declare const ClearFilterButton: (props: ClearFilterButtonProps) => JSX.Element;
+export declare const ClearFilterButton: (props: ClearFilterButtonProps) => ReactElement;
 export default ClearFilterButton;
 //# sourceMappingURL=ClearFilterButton.d.ts.map

package/dist/components/misc/ClearFilterButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClearFilterButton.d.ts","sourceRoot":"","sources":["../../../src/components/misc/ClearFilterButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAU,WAAW,EAA2B,MAAM,8BAA8B,CAAC;AAI5F,oBAAY,sBAAsB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;AAElE;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,UAAW,sBAAsB,KAAG,WAoBjE,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"ClearFilterButton.d.ts","sourceRoot":"","sources":["../../../src/components/misc/ClearFilterButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,YAAY,EAAE,KAAK,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAIlG,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAInE,MAAM,MAAM,sBAAsB,GAAG,iBAAiB,CACpD,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,YAAY,CAAC,iBAAiB,CAAC,CAAA;CAAE,CACzE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,KAAG,YA0BjE,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/misc/ClearFilterButton.js

@@ -1,25 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback } from 'react';
 import { useForwardRef } from '@equinor/fusion-react-utils';
-import { useSubscription } from '@equinor/fusion-react-observable';
-import { Button } from '@equinor/fusion-react-button';
+import { useObservableSubscription } from '@equinor/fusion-observable/react';
+import { Button } from '@equinor/eds-core-react';
 import { useClearFilter } from '../../hooks/useClearFilter';
 /**
  * Component for resetting filter values.
  * uses the `useClearFilter` hook
- * inherits `ButtonProps` from `@equinor/fusion-react-button`
  */
 export const ClearFilterButton = (props) => {
-    const { label = 'Clear Filter', ...args } = props;
+    const { children, ...args } = props;
     const { clear, changed$ } = useClearFilter();
     const ref = useForwardRef(props.ref);
     /** Subscribe to changes and toggle `disable` of button */
-    useSubscription(changed$, useCallback((changed) => {
-        ref.current && (ref.current.disabled = !Object.keys(changed).length);
+    useObservableSubscription(changed$, useCallback((changed) => {
+        if (ref.current) {
+            ref.current.disabled = !Object.keys(changed).length;
+        }
     }, [ref]));
     /** Reset filters on click */
     const onClick = useCallback(() => clear(), [clear]);
-    return _jsx(Button, Object.assign({ variant: "ghost" }, { ...args, ref, onClick, label }), void 0);
+    return (_jsx(Button, { variant: "ghost", ...args, ref, onClick, children: children ?? 'Clear Filter' }));
 };
 export default ClearFilterButton;
-//# sourceMappingURL=ClearFilterButton.js.map

package/dist/components/misc/FilterContainer.d.ts

@@ -1,12 +1,13 @@
-import { theme } from '@equinor/fusion-react-styles';
-import React from 'react';
-declare type StyleProps = {
-    spacing?: keyof typeof theme.spacing.comfortable;
+import type { ReactElement, PropsWithChildren, HTMLAttributes } from 'react';
+import { tokens } from '@equinor/eds-tokens';
+type SpacingKey = keyof typeof tokens.spacings.comfortable;
+type StyleProps = {
+    readonly spacing?: SpacingKey;
 };
-export declare type FilterContainerProps = JSX.IntrinsicElements['div'] & StyleProps;
+export type FilterContainerProps = HTMLAttributes<HTMLDivElement> & StyleProps;
 /**
  *  Components for displaying filters
  */
-export declare const FilterContainer: (props: React.PropsWithChildren<FilterContainerProps>) => JSX.Element;
+export declare const FilterContainer: (props: PropsWithChildren<FilterContainerProps>) => ReactElement;
 export default FilterContainer;
 //# sourceMappingURL=FilterContainer.d.ts.map

package/dist/components/misc/FilterContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterContainer.d.ts","sourceRoot":"","sources":["../../../src/components/misc/FilterContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkC,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrF,OAAO,KAAK,MAAM,OAAO,CAAC;AAiB1B,aAAK,UAAU,GAAG;IAChB,OAAO,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC;CAClD,CAAC;AAEF,oBAAY,oBAAoB,GAAG,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,UAAU,CAAC;AAE7E;;GAEG;AACH,eAAO,MAAM,eAAe,UAAW,MAAM,iBAAiB,CAAC,oBAAoB,CAAC,KAAG,WAQtF,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"FilterContainer.d.ts","sourceRoot":"","sources":["../../../src/components/misc/FilterContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE7E,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,KAAK,UAAU,GAAG,MAAM,OAAO,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC;AAa3D,KAAK,UAAU,GAAG;IAChB,QAAQ,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG,UAAU,CAAC;AAE/E;;GAEG;AACH,eAAO,MAAM,eAAe,GAAI,OAAO,iBAAiB,CAAC,oBAAoB,CAAC,KAAG,YAOhF,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/misc/FilterContainer.js

@@ -1,22 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { clsx, createStyles, makeStyles } from '@equinor/fusion-react-styles';
-const useStyles = makeStyles((theme) => createStyles({
-    root: ({ spacing }) => ({
-        display: 'inline-flex',
-        flex: 'auto',
-        gap: theme.spacing.comfortable[spacing || 'medium'].getVariable('padding'),
-        '&>*': {
-            flex: 1,
-        },
-    }),
-}), { name: 'fusion-filter-container' });
+import styled from 'styled-components';
+import { tokens } from '@equinor/eds-tokens';
+const Styled = {
+    Root: styled.div `
+    display: inline-flex;
+    flex: auto;
+    gap: ${({ $spacing }) => tokens.spacings.comfortable[$spacing || 'medium']};
+    & > * {
+      flex: 1;
+    }
+  `,
+};
 /**
  *  Components for displaying filters
  */
 export const FilterContainer = (props) => {
     const { children, className, spacing, ...args } = props;
-    const styles = useStyles({ spacing });
-    return (_jsx("div", Object.assign({ className: clsx(styles.root, className) }, args, { children: children }), void 0));
+    return (_jsx(Styled.Root, { className: className, "$spacing": spacing, ...args, children: children }));
 };
 export default FilterContainer;
-//# sourceMappingURL=FilterContainer.js.map

package/dist/components/misc/SelectionChips.d.ts

@@ -1,6 +1,7 @@
-import { ChipProps } from '@equinor/fusion-react-chip';
-export declare type SelectionChipsProps = JSX.IntrinsicElements['div'] & {
-    chips: Omit<ChipProps, 'removable' | 'onRemove' | 'value' | 'children'>;
+import { type HTMLAttributes, type ReactElement } from 'react';
+import { type ChipElementProps } from '@equinor/fusion-wc-chip';
+export type SelectionChipsProps = HTMLAttributes<HTMLDivElement> & {
+    readonly chips: Pick<ChipElementProps, 'variant'>;
 };
-export declare const SelectionChips: (props: SelectionChipsProps) => JSX.Element;
+export declare const SelectionChips: (props: SelectionChipsProps) => ReactElement;
 //# sourceMappingURL=SelectionChips.d.ts.map

package/dist/components/misc/SelectionChips.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionChips.d.ts","sourceRoot":"","sources":["../../../src/components/misc/SelectionChips.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAQ,SAAS,EAAyB,MAAM,4BAA4B,CAAC;AA0CpF,oBAAY,mBAAmB,GAAG,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG;IAC/D,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,WAAW,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC,CAAC;CACzE,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,mBAAmB,KAAG,WAgD3D,CAAC"}
+{"version":3,"file":"SelectionChips.d.ts","sourceRoot":"","sources":["../../../src/components/misc/SelectionChips.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,YAAY,EAKlB,MAAM,OAAO,CAAC;AAIf,OAAa,EAAoB,KAAK,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AA0CxF,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACjE,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAC;CACnD,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,KAAG,YAsD3D,CAAC"}

package/dist/components/misc/SelectionChips.js

@@ -1,14 +1,16 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
-import { useCallback, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState, } from 'react';
 import { combineLatest, of } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
-import { useSubscription } from '@equinor/fusion-react-observable';
-import { Chip } from '@equinor/fusion-react-chip';
+import { useObservableSubscription } from '@equinor/fusion-observable/react';
+import Chip from '@equinor/fusion-wc-chip';
 import { useFilterContext } from '../../hooks';
 import { actions } from '../../actions';
-import { clsx, createStyles, makeStyles } from '@equinor/fusion-react-styles';
+import styled from 'styled-components';
+import { tokens } from '@equinor/eds-tokens';
+Chip;
 /** method for extracting selection to array */
+// biome-ignore lint/suspicious/noExplicitAny: selection can be any type from the filter context
 const formatSelection = (selection) => {
     switch (true) {
         case selection === undefined:
@@ -24,20 +26,21 @@ const formatSelection = (selection) => {
             return [];
     }
 };
-const useStyles = makeStyles((theme) => createStyles({
-    root: {
-        display: 'flex',
-        gap: theme.spacing.comfortable.small.getVariable('padding'),
-    },
-    chip: {
-        marginRight: theme.spacing.comfortable.small.getVariable('padding'),
-    },
-}), { name: 'fusion-filter-selection-chips' });
+const Styled = {
+    Root: styled.div `
+    display: flex;
+    gap: ${tokens.spacings.comfortable.small};
+  `,
+    Chip: styled.span `
+    margin-right: ${tokens.spacings.comfortable.small};
+  `,
+};
 export const SelectionChips = (props) => {
     const { chips, className, ...args } = props;
     const { filter$, selection$ } = useFilterContext();
     const [items, setItems] = useState([]);
-    useSubscription(useMemo(() => 
+    const ref = useRef(null);
+    useObservableSubscription(useMemo(() => 
     /** Observe filter and selection changes */
     combineLatest([filter$, selection$]).pipe(switchMap(([filters, selections]) => {
         const items = Object.values(filters)
@@ -51,12 +54,16 @@ export const SelectionChips = (props) => {
             .filter((x) => !!x.title && !!x.selection.length);
         return of(items);
     })), [filter$, selection$]), setItems);
-    const onRemove = useCallback((e) => {
-        selection$.next(actions.selection.remove(String(e.currentTarget.value)));
+    useEffect(() => {
+        const el = ref.current;
+        if (el) {
+            const handler = (e) => {
+                const value = e.target.value;
+                selection$.next(actions.selection.remove(String(value)));
+            };
+            el.addEventListener('remove', handler);
+            return () => el.removeEventListener('remove', handler);
+        }
     }, [selection$]);
-    const styles = useStyles();
-    return (_jsx("div", Object.assign({}, args, { className: clsx(styles.root, className) }, { children: items?.map((x) => (_createElement(Chip, { ...chips, key: x.key, value: x.key, onRemove: onRemove, removable: true },
-            _jsxs("span", { children: [x.title, " "] }, void 0),
-            _jsx("span", Object.assign({ slot: "graphic", className: styles.chip }, { children: x.selection.length }), void 0)))) }), void 0));
+    return (_jsx(Styled.Root, { ...args, className: className, ref: ref, children: items?.map((x) => (_jsxs("fwc-chip", { value: x.key, removable: true, variant: chips.variant, children: [_jsxs("span", { children: [x.title, " "] }), _jsx(Styled.Chip, { slot: "graphic", children: x.selection.length })] }, x.key))) }));
 };
-//# sourceMappingURL=SelectionChips.js.map

package/dist/components/misc/index.js

@@ -1,4 +1,3 @@
 export { ClearFilterButton } from './ClearFilterButton';
 export { FilterContainer } from './FilterContainer';
 export { SelectionChips } from './SelectionChips';
-//# sourceMappingURL=index.js.map

package/dist/components/panel/FilterPanel.d.ts

@@ -1,10 +1,12 @@
-declare type StyleClasses = {
+import { type PropsWithChildren, type HTMLAttributes, type ReactElement } from 'react';
+import type { FilterFn } from '../../types';
+type StyleClasses = {
     /** filter panel */
     root: string;
     /** filter container */
     filters: string;
 };
-export declare type FilterPanelProps = JSX.IntrinsicElements['div'] & {
+export type FilterPanelProps<TData> = HTMLAttributes<HTMLDivElement> & {
     /** Show filter bar */
     showBar?: boolean;
     /** Show selector for filters */
@@ -20,10 +22,12 @@ export declare type FilterPanelProps = JSX.IntrinsicElements['div'] & {
     selectedFilters?: string[];
     /** style classes */
     classes?: Partial<StyleClasses>;
+    /** method to use for search bar */
+    searchFn?: FilterFn<TData, string>;
 };
 /**
  * Base component for displaying filter components and controllers
  */
-export declare const FilterPanel: (props: React.PropsWithChildren<FilterPanelProps>) => JSX.Element;
+export declare const FilterPanel: <TData>(props: PropsWithChildren<FilterPanelProps<TData>>) => ReactElement;
 export default FilterPanel;
 //# sourceMappingURL=FilterPanel.d.ts.map

package/dist/components/panel/FilterPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterPanel.d.ts","sourceRoot":"","sources":["../../../src/components/panel/FilterPanel.tsx"],"names":[],"mappings":"AAqCA,aAAK,YAAY,GAAG;IAClB,mBAAmB;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,uBAAuB;IACvB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,oBAAY,gBAAgB,GAAG,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG;IAC5D,sBAAsB;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,gCAAgC;IAChC,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,8BAA8B;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,gDAAgD;IAChD,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAE3B,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;CACjC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,UAAW,MAAM,iBAAiB,CAAC,gBAAgB,CAAC,KAAG,WAoB9E,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"FilterPanel.d.ts","sourceRoot":"","sources":["../../../src/components/panel/FilterPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,iBAAiB,EAAE,KAAK,cAAc,EAAE,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAajG,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AA0B5C,KAAK,YAAY,GAAG;IAClB,mBAAmB;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,uBAAuB;IACvB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,KAAK,IAAI,cAAc,CAAC,cAAc,CAAC,GAAG;IACrE,sBAAsB;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,gCAAgC;IAChC,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,8BAA8B;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,gDAAgD;IAChD,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAE3B,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAEhC,mCAAmC;IACnC,QAAQ,CAAC,EAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;CACpC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,CAAC,KAAK,EAC9B,KAAK,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,KAC9C,YA4BJ,CAAC;AAEF,eAAe,WAAW,CAAC"}