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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Equinor
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/components/package.json

@@ -5,4 +5,4 @@
   "main": "../dist/components/index.js",
   "module": "../dist/components/index.js",
   "sideEffects": false
-}
+}

package/dist/FilterProvider.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
+import { type PropsWithChildren, type ReactElement } from 'react';
 import type { Filter } from './types';
-export declare type FilterProviderProps<TSelections extends Record<string, unknown>, TData> = {
+export type FilterProviderProps<TSelections extends Record<string, unknown>, TData> = {
     data: TData[];
     initialSelection?: TSelections;
     initialFilters?: Record<string, Filter<TData, TSelections>>;
 };
-export declare const FilterProvider: <TSelections extends Record<string, any>, TData extends Record<string, any> = Record<string, any>>(props: import("react").PropsWithChildren<FilterProviderProps<TSelections, TData>>) => JSX.Element;
+export declare const FilterProvider: <TSelections extends Record<string, any>, TData extends Record<string, any> = Record<string, any>>(props: PropsWithChildren<FilterProviderProps<TSelections, TData>>) => ReactElement;
 export default FilterProvider;
 //# sourceMappingURL=FilterProvider.d.ts.map

package/dist/FilterProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterProvider.d.ts","sourceRoot":"","sources":["../src/FilterProvider.tsx"],"names":[],"mappings":";AAYA,OAAO,KAAK,EAAE,MAAM,EAAiB,MAAM,SAAS,CAAC;AAErD,oBAAY,mBAAmB,CAAC,WAAW,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,IAAI;IACpF,IAAI,EAAE,KAAK,EAAE,CAAC;IACd,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC;CAC7D,CAAC;AAEF,eAAO,MAAM,cAAc,2LAKxB,WA2BF,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"FilterProvider.d.ts","sourceRoot":"","sources":["../src/FilterProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,YAAY,EAIlB,MAAM,OAAO,CAAC;AAYf,OAAO,KAAK,EAAE,MAAM,EAAiB,MAAM,SAAS,CAAC;AAErD,MAAM,MAAM,mBAAmB,CAAC,WAAW,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,IAAI;IACpF,IAAI,EAAE,KAAK,EAAE,CAAC;IACd,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC;CAC7D,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,CAE3B,WAAW,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAEvC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAEvD,KAAK,EAAE,iBAAiB,CAAC,mBAAmB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,KAC9D,YA4CJ,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/FilterProvider.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useLayoutEffect, useState } from 'react';
+import { useLayoutEffect, useMemo, useState, } from 'react';
 import { BehaviorSubject } from 'rxjs';
-import { useObservable, useSubscription } from '@equinor/fusion-react-observable';
+import { useObservable, useObservableSubscription } from '@equinor/fusion-observable/react';
 import { createSelectionReducer, createDataReducer, createFilterReducer } from './reducers';
 import { Provider } from './context';
 import { actions } from './actions';
@@ -12,19 +12,19 @@ export const FilterProvider = (props) => {
     const source$ = useObservable(createDataReducer(data), data);
     const selection$ = useObservable(createSelectionReducer(initialSelection), initialSelection);
     const filter$ = useObservable(createFilterReducer({}), initialFilters);
+    const filterData$ = useMemo(() => filterData(source$, filter$, selection$), [source$, filter$, selection$]);
     const [data$] = useState(new BehaviorSubject(data));
-    useSubscription(filterData(source$, filter$, selection$), data$);
-    const context = {
+    useObservableSubscription(filterData$, data$);
+    const context = useMemo(() => ({
         source$,
         filter$,
         selection$,
         data$,
         /** type issues, might fix later */
-    };
+    }), [source$, filter$, selection$, data$]);
     useLayoutEffect(() => {
         source$.next(actions.source.update(data));
     }, [source$, data]);
-    return _jsx(Provider, Object.assign({ value: context }, { children: children }), void 0);
+    return _jsx(Provider, { value: context, children: children });
 };
 export default FilterProvider;
-//# sourceMappingURL=FilterProvider.js.map

package/dist/actions.d.ts

@@ -1,6 +1,6 @@
-import { ActionType } from 'typesafe-actions';
+import { type ActionType } from 'typesafe-actions';
 import type { Filter } from './types';
-export declare type SelectionValues<TValue = unknown> = Record<string, TValue>;
+export type SelectionValues<TValue = unknown> = Record<string, TValue>;
 export declare const filter: {
     add: import("typesafe-actions").PayloadActionCreator<"@FILTER/FILTERS_ADD", Filter<any, any>>;
     remove: import("typesafe-actions").PayloadActionCreator<"@FILTER/FILTERS_REMOVE", string>;
@@ -29,6 +29,6 @@ export declare const actions: {
         update: import("typesafe-actions").PayloadActionCreator<"@FILTER/SOURCE_UPDATE", unknown>;
     };
 };
-export declare type Actions = ActionType<typeof actions>;
+export type Actions = ActionType<typeof actions>;
 export default actions;
 //# sourceMappingURL=actions.d.ts.map

package/dist/actions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../src/actions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAEtC,oBAAY,eAAe,CAAC,MAAM,GAAG,OAAO,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAEvE,eAAO,MAAM,MAAM;;;CAGlB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;CAKrB,CAAC;AAEF,eAAO,MAAM,MAAM;;CAElB,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;CAInB,CAAC;AAEF,oBAAY,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAEjD,eAAe,OAAO,CAAC"}
+{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../src/actions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACjE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAEtC,MAAM,MAAM,eAAe,CAAC,MAAM,GAAG,OAAO,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAEvE,eAAO,MAAM,MAAM;;;CAIlB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;CAKrB,CAAC;AAEF,eAAO,MAAM,MAAM;;CAElB,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;CAInB,CAAC;AAEF,MAAM,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAEjD,eAAe,OAAO,CAAC"}

package/dist/actions.js

@@ -1,5 +1,6 @@
 import { createAction } from 'typesafe-actions';
 export const filter = {
+    // biome-ignore lint/suspicious/noExplicitAny: we need any here to avoid type errors
     add: createAction('@FILTER/FILTERS_ADD')(),
     remove: createAction('@FILTER/FILTERS_REMOVE')(),
 };
@@ -18,4 +19,3 @@ export const actions = {
     source,
 };
 export default actions;
-//# sourceMappingURL=actions.js.map

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

@@ -1,7 +1,7 @@
-declare type FilterHeaderProps = {
-    title: string;
+import { type ReactElement } from 'react';
+type FilterHeaderProps = {
+    readonly title: string;
 };
-export declare const useStyles: (props?: {} | undefined) => import("@material-ui/styles").ClassNameMap<"header" | "root" | "showSearch" | "counter" | "noCount" | "iconBtn" | "searchField">;
-export declare const FilterOptionHeader: (props: FilterHeaderProps) => JSX.Element;
+export declare const FilterOptionHeader: (props: FilterHeaderProps) => ReactElement;
 export default FilterOptionHeader;
 //# sourceMappingURL=FilterOptionHeader.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FilterOptionHeader.d.ts","sourceRoot":"","sources":["../../../src/components/filter/FilterOptionHeader.tsx"],"names":[],"mappings":"AAKA,aAAK,iBAAiB,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAKF,eAAO,MAAM,SAAS,8JAuCrB,CAAC;AAEF,eAAO,MAAM,kBAAkB,UAAW,iBAAiB,KAAG,WA+C7D,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"FilterOptionHeader.d.ts","sourceRoot":"","sources":["../../../src/components/filter/FilterOptionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,YAAY,EAAqC,MAAM,OAAO,CAAC;AAY7F,KAAK,iBAAiB,GAAG;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB,CAAC;AA2CF,eAAO,MAAM,kBAAkB,GAAI,OAAO,iBAAiB,KAAG,YAuD7D,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/filter/FilterOptionHeader.js

@@ -1,55 +1,59 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useObservableState, useSelector } from '@equinor/fusion-react-observable';
-import { Icon } from '@equinor/fusion-react-icon';
-import { TextInput } from '@equinor/fusion-react-textinput';
-import { useFilterOptionContext, useFilterOptionSearch } from '../../options';
-import { clsx, createStyles, makeStyles } from '@equinor/fusion-react-styles';
 import { useLayoutEffect, useRef, useState } from 'react';
-export const useStyles = makeStyles((theme) => createStyles({
-    root: {
-        display: 'flex',
-        alignItems: 'center',
-    },
-    header: {
-        ...theme.typography.table.cell_header.style,
-        overflow: 'hidden',
-        '&$showSearch': {
-            display: 'none',
-        },
-    },
-    showSearch: {},
-    counter: {
-        display: 'inline-flex',
-        gap: '1px',
-        ...theme.typography.input.helper.style,
-        marginLeft: theme.spacing.comfortable.small.getVariable('padding'),
-    },
-    noCount: {
-        display: 'none',
-    },
-    iconBtn: {
-        cursor: 'pointer',
-        marginLeft: 'auto',
-    },
-    searchField: {
-        marginTop: '4px',
-        flex: '1 1 auto',
-        '&:not($showSearch)': {
-            maxWidth: 0,
-            flex: 'none',
-            overflow: 'hidden',
-        },
-    },
-}), { name: 'fusion-filter-header' });
+import { useObservableState, useObservableSelector } from '@equinor/fusion-observable/react';
+import { TextField, Icon } from '@equinor/eds-core-react';
+import { useFilterOptionContext, useFilterOptionSearch } from '../../options';
+import { search, chevron_right } from '@equinor/eds-icons';
+import styled from 'styled-components';
+import { tokens } from '@equinor/eds-tokens';
+Icon.add({ search, chevron_right });
+const Styled = {
+    Root: styled.div `
+    display: flex;
+    align-items: center;
+  `,
+    Header: styled.header `
+    color: ${tokens.typography.table.cell_header.color};
+    font-family: ${tokens.typography.table.cell_header.fontFamily};
+    font-size: ${tokens.typography.table.cell_header.fontSize};
+    font-weight: ${tokens.typography.table.cell_header.fontWeight};
+    line-height: ${tokens.typography.table.cell_header.lineHeight};
+    overflow: hidden;
+    ${({ $showSearch }) => $showSearch && 'display: none;'}
+  `,
+    Counter: styled.span `
+    display: ${({ $noCount }) => ($noCount ? 'none' : 'inline-flex')};
+    gap: 1px;
+    color: ${tokens.typography.input.helper.color};
+    font-family: ${tokens.typography.input.helper.fontFamily};
+    font-size: ${tokens.typography.input.helper.fontSize};
+    font-weight: ${tokens.typography.input.helper.fontWeight};
+    letter-spacing: ${tokens.typography.input.helper.letterSpacing};
+    line-height: ${tokens.typography.input.helper.lineHeight};
+    margin-left: ${tokens.spacings.comfortable.small};
+  `,
+    IconBtn: styled(Icon) `
+    cursor: pointer;
+    margin-left: auto;
+  `,
+    SearchField: styled(TextField) `
+    margin-top: 4px;
+    flex: ${({ $showSearch }) => ($showSearch ? '1 1 auto' : 'none')};
+    ${({ $showSearch }) => !$showSearch &&
+        `
+      max-width: 0;
+      overflow: hidden;
+    `}
+  `,
+};
 export const FilterOptionHeader = (props) => {
     const { title } = props;
     const [showSearch, setShowSearch] = useState(false);
     const { setQuery, query$ } = useFilterOptionSearch();
     const searchRef = useRef(null);
     const { options$, selection$ } = useFilterOptionContext();
-    const optionCount = Object.keys(useObservableState(options$) || {}).length;
-    const selectedCount = useObservableState(useSelector(selection$, (x) => x && x.size));
-    const styles = useStyles();
+    const optionCount = Object.keys(useObservableState(options$).value || {}).length;
+    const { value: selectedCount } = useObservableState(useObservableSelector(selection$, (x) => (x ?? new Set()).size > 0));
     const onIconClick = () => {
         if (showSearch) {
             setQuery('');
@@ -60,10 +64,13 @@ export const FilterOptionHeader = (props) => {
         setShowSearch(!showSearch);
     };
     useLayoutEffect(() => {
-        const subscription = query$.subscribe((x) => searchRef.current && (searchRef.current.value = x));
+        const subscription = query$.subscribe((x) => {
+            if (searchRef.current) {
+                searchRef.current.value = x;
+            }
+        });
         return () => subscription.unsubscribe();
-    }, [searchRef, query$]);
-    return (_jsxs("div", Object.assign({ className: styles.root }, { children: [_jsx(TextInput, { ref: searchRef, className: clsx(styles.searchField, showSearch && styles.showSearch), icon: "search", variant: "outlined", type: "search", label: title, onInput: (e) => setQuery(e.currentTarget.value), dense: true }, void 0), _jsxs("header", Object.assign({ className: clsx(styles.header, showSearch && styles.showSearch) }, { children: [_jsx("span", { children: title }, void 0), _jsxs("span", Object.assign({ className: clsx(styles.counter, !selectedCount && styles.noCount) }, { children: [_jsx("span", { children: "(" }, void 0), _jsx("span", { children: selectedCount }, void 0), _jsx("span", { children: "/" }, void 0), _jsx("span", { children: optionCount }, void 0), _jsx("span", { children: ")" }, void 0)] }), void 0)] }), void 0), _jsx(Icon, { className: styles.iconBtn, icon: showSearch ? 'chevron_right' : 'search', onClick: onIconClick }, void 0)] }), void 0));
+    }, [query$]);
+    return (_jsxs(Styled.Root, { children: [_jsx(Styled.SearchField, { id: title, ref: searchRef, "$showSearch": showSearch, type: "search", placeholder: title, onInput: (e) => setQuery(e.currentTarget.value), inputIcon: _jsx(Icon, { name: "search", size: 16 }, "thumbs") }), _jsxs(Styled.Header, { "$showSearch": showSearch, children: [_jsx("span", { children: title }), _jsxs(Styled.Counter, { "$noCount": !selectedCount, children: [_jsx("span", { children: "(" }), _jsx("span", { children: selectedCount }), _jsx("span", { children: "/" }), _jsx("span", { children: optionCount }), _jsx("span", { children: ")" })] })] }), _jsx(Styled.IconBtn, { name: showSearch ? 'chevron_right' : 'search', size: 16, onClick: onIconClick })] }));
 };
 export default FilterOptionHeader;
-//# sourceMappingURL=FilterOptionHeader.js.map

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

@@ -1,16 +1,26 @@
-import { FilterOptionSelector } from '../../../options';
+import type { ReactElement } from 'react';
+import type { FilterOptionBuilder, FilterOptionSelector } from '../../../options';
 import type { FilterComponent } from '../types';
-export declare type CheckboxFilterProps<TData extends Record<string, any> = Record<string, any>> = FilterComponent & {
+import type { CheckboxOption } from './types';
+import type { FilterFn } from '../../../types';
+export type CheckboxFilterProps<TData extends Record<string, any> = Record<string, any>> = FilterComponent & {
     /** either name of property of data type or a function that selects value */
-    selector?: Extract<keyof TData, string> | string | FilterOptionSelector<TData>;
+    readonly selector?: Extract<keyof TData, string> | string | FilterOptionSelector<TData>;
     /** show option for selecting all */
-    enableAll?: boolean;
+    readonly enableAll?: boolean;
     /** initial selection */
-    initial?: Set<string>;
+    readonly initial?: Set<string>;
+    readonly filter?: {
+        filterFn: FilterFn<TData, Set<string>>;
+        optionFn: FilterOptionBuilder<TData, CheckboxOption, string>;
+    };
+    readonly sortFn?: <T extends {
+        label: string;
+    }>(a: T, b: T) => number;
 };
 /**
  * Component for displaying multi-select filter with checkboxes
  */
-export declare const CheckboxFilter: (props: CheckboxFilterProps) => JSX.Element;
+export declare const CheckboxFilter: <TData extends Record<string, any> = Record<string, any>>(props: CheckboxFilterProps<TData>) => ReactElement;
 export default CheckboxFilter;
 //# sourceMappingURL=CheckboxFilter.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxFilter.d.ts","sourceRoot":"","sources":["../../../../src/components/filter/checkbox/CheckboxFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAExD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAShD,oBAAY,mBAAmB,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,eAAe,GAAG;IAC3G,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC,MAAM,KAAK,EAAE,MAAM,CAAC,GAAG,MAAM,GAAG,oBAAoB,CAAC,KAAK,CAAC,CAAC;IAC/E,oCAAoC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wBAAwB;IACxB,OAAO,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CACvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,UAAW,mBAAmB,KAAG,WAc3D,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"CheckboxFilter.d.ts","sourceRoot":"","sources":["../../../../src/components/filter/checkbox/CheckboxFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAElF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAQhD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG/C,MAAM,MAAM,mBAAmB,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IACrF,eAAe,GAAG;IAChB,4EAA4E;IAC5E,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC,MAAM,KAAK,EAAE,MAAM,CAAC,GAAG,MAAM,GAAG,oBAAoB,CAAC,KAAK,CAAC,CAAC;IACxF,oCAAoC;IACpC,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B,wBAAwB;IACxB,QAAQ,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAI/B,QAAQ,CAAC,MAAM,CAAC,EAAE;QAChB,QAAQ,EAAE,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;QACvC,QAAQ,EAAE,mBAAmB,CAAC,KAAK,EAAE,cAAc,EAAE,MAAM,CAAC,CAAC;KAC9D,CAAC;IACF,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;AAEJ;;GAEG;AAEH,eAAO,MAAM,cAAc,GAAI,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACpF,OAAO,mBAAmB,CAAC,KAAK,CAAC,KAChC,YAaF,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -3,14 +3,13 @@ import { FilterOptionHeader } from '../FilterOptionHeader';
 import { CheckboxFilterProvider } from './CheckboxFilterProvider';
 import CheckboxFilterOptions from './CheckboxFilterOptions';
 import CheckboxFilterOptionAll from './CheckboxFilterOptionAll';
-import useStyles from './CheckboxFilter.style';
+import { Styled } from './CheckboxFilter.style';
 /**
  * Component for displaying multi-select filter with checkboxes
  */
+// biome-ignore lint/suspicious/noExplicitAny: we need any here to avoid type errors
 export const CheckboxFilter = (props) => {
-    const { enableAll, ...args } = props;
-    const styles = useStyles({ layout: 'column' });
-    return (_jsx(CheckboxFilterProvider, Object.assign({}, args, { children: _jsxs("div", Object.assign({ className: styles.root }, { children: [_jsx(FilterOptionHeader, { title: args.title }, void 0), _jsxs("div", Object.assign({ className: styles.items }, { children: [enableAll && _jsx(CheckboxFilterOptionAll, {}, void 0), _jsx(CheckboxFilterOptions, {}, void 0)] }), void 0)] }), void 0) }), void 0));
+    const { enableAll, sortFn, ...args } = props;
+    return (_jsx(CheckboxFilterProvider, { ...args, children: _jsxs(Styled.Root, { children: [_jsx(FilterOptionHeader, { title: args.title }), _jsxs(Styled.Items, { "$layout": "column", children: [enableAll && _jsx(CheckboxFilterOptionAll, {}), _jsx(CheckboxFilterOptions, { sortFn: sortFn })] })] }) }));
 };
 export default CheckboxFilter;
-//# sourceMappingURL=CheckboxFilter.js.map

package/dist/components/filter/checkbox/CheckboxFilter.style.d.ts

@@ -1,5 +1,10 @@
-export declare const useStyles: (props: {
-    layout: 'column' | 'row';
-}) => import("@material-ui/styles").ClassNameMap<"title" | "root" | "items">;
-export default useStyles;
+export declare const Styled: {
+    Root: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+    Items: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$layout"> & {
+        $layout: "column" | "row";
+    }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$layout"> & {
+        $layout: "column" | "row";
+    }, never>>> & string;
+    Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
+};
 //# sourceMappingURL=CheckboxFilter.style.d.ts.map

package/dist/components/filter/checkbox/CheckboxFilter.style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxFilter.style.d.ts","sourceRoot":"","sources":["../../../../src/components/filter/checkbox/CheckboxFilter.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;YASS,QAAQ,GAAG,KAAK;4EAW9C,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"CheckboxFilter.style.d.ts","sourceRoot":"","sources":["../../../../src/components/filter/checkbox/CheckboxFilter.style.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM;;;iBAMY,QAAQ,GAAG,KAAK;;iBAAhB,QAAQ,GAAG,KAAK;;;CAY9C,CAAC"}

package/dist/components/filter/checkbox/CheckboxFilter.style.js

@@ -1,19 +1,21 @@
-import { createStyles, makeStyles } from '@equinor/fusion-react-styles';
-export const useStyles = makeStyles((theme) => createStyles({
-    root: {
-        display: 'flex',
-        flexFlow: 'column',
-        // TODO - remove
-        minWidth: 150,
-    },
-    items: (props) => ({
-        display: 'flex',
-        flexFlow: props.layout,
-        overflowY: 'auto',
-    }),
-    title: {
-        ...theme.typography.heading.h3.style,
-    },
-}), { name: 'fusion-filter-checkbox-option' });
-export default useStyles;
-//# sourceMappingURL=CheckboxFilter.style.js.map
+import styled from 'styled-components';
+import { tokens } from '@equinor/eds-tokens';
+export const Styled = {
+    Root: styled.div `
+    display: flex;
+    flex-flow: column;
+    min-width: 150px;
+  `,
+    Items: styled.div `
+    display: flex;
+    flex-flow: ${({ $layout }) => $layout};
+    overflow-y: auto;
+  `,
+    Title: styled.span `
+    color: ${tokens.typography.heading.h3.color};
+    font-family: ${tokens.typography.heading.h3.fontFamily};
+    font-size: ${tokens.typography.heading.h3.fontSize};
+    font-weight: ${tokens.typography.heading.h3.fontWeight};
+    line-height: ${tokens.typography.heading.h3.lineHeight};
+  `,
+};

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

@@ -1,14 +1,15 @@
+import { type ReactElement, type HTMLAttributes } from 'react';
 import type { CheckboxOption } from './types';
-export declare type CheckboxFilterOptionProps = JSX.IntrinsicElements['div'] & Omit<CheckboxOption, 'totalCount'> & {
-    name: string;
-    checked?: boolean;
-    indeterminate?: boolean;
-    count: string | number;
-    onOptionChange: (item: {
+export type CheckboxFilterOptionProps = Partial<HTMLAttributes<HTMLDivElement>> & Omit<CheckboxOption, 'totalCount'> & {
+    readonly name: string;
+    readonly checked?: boolean;
+    readonly indeterminate?: boolean;
+    readonly count: string | number;
+    readonly onOptionChange: (item: {
         name: string;
         selected?: boolean;
     }) => void;
 };
-export declare const CheckboxFilterOption: (props: CheckboxFilterOptionProps) => JSX.Element;
+export declare const CheckboxFilterOption: (props: CheckboxFilterOptionProps) => ReactElement;
 export default CheckboxFilterOption;
 //# sourceMappingURL=CheckboxFilterOption.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxFilterOption.d.ts","sourceRoot":"","sources":["../../../../src/components/filter/checkbox/CheckboxFilterOption.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,oBAAY,yBAAyB,GAAG,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAClE,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC,GAAG;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,cAAc,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;CACtE,CAAC;AAEJ,eAAO,MAAM,oBAAoB,UAAW,yBAAyB,KAAG,WA+BvE,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"CheckboxFilterOption.d.ts","sourceRoot":"","sources":["../../../../src/components/filter/checkbox/CheckboxFilterOption.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,YAAY,EAAE,KAAK,cAAc,EAAkB,MAAM,OAAO,CAAC;AAK5F,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,MAAM,MAAM,yBAAyB,GAAG,OAAO,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,GAC7E,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC,GAAG;IACnC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IACjC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,QAAQ,CAAC,cAAc,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;CAC/E,CAAC;AAEJ,eAAO,MAAM,oBAAoB,GAAI,OAAO,yBAAyB,KAAG,YA+BvE,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

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

@@ -1,19 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from 'react';
-import { CheckboxBase as Checkbox } from '@equinor/fusion-react-checkbox';
-import { clsx } from '@equinor/fusion-react-styles';
-import { useStyles } from './CheckboxFilterOption.style';
+import { Checkbox } from '@equinor/eds-core-react';
+import { Styled } from './CheckboxFilterOption.style';
 export const CheckboxFilterOption = (props) => {
     const { name, label, count, checked, indeterminate, inactive, hide, onOptionChange, className, ...args } = props;
-    const onCheckboxClick = useCallback((e) => e.stopPropagation(), []);
     const onCheckboxInput = useCallback(({ currentTarget: { name, checked } }) => {
-        return onOptionChange({ name, selected: !checked });
+        return onOptionChange({ name, selected: checked });
     }, [onOptionChange]);
-    const onClick = useCallback((e) => {
-        e.currentTarget.firstChild.click();
-    }, []);
-    const styles = useStyles();
-    return (_jsxs("div", Object.assign({}, args, { className: clsx(className, styles.root, inactive && styles.inactive, hide && styles.hide), onClick: onClick }, { children: [_jsx(Checkbox, { className: styles.checkbox, name: name, checked: checked, onInput: onCheckboxInput, onClick: onCheckboxClick, indeterminate: indeterminate }, void 0), _jsx("span", Object.assign({ className: styles.label }, { children: label }), void 0), _jsx("span", Object.assign({ className: styles.counter }, { children: count }), void 0)] }), void 0));
+    return (_jsxs(Styled.Root, { ...args, className: className, "$inactive": inactive, "$hide": hide, children: [_jsx(Checkbox, { name: name, checked: checked, onChange: onCheckboxInput, indeterminate: indeterminate, label: label }), _jsx(Styled.Counter, { children: count })] }));
 };
 export default CheckboxFilterOption;
-//# sourceMappingURL=CheckboxFilterOption.js.map

package/dist/components/filter/checkbox/CheckboxFilterOption.style.d.ts

@@ -1,3 +1,11 @@
-export declare const useStyles: (props?: {} | undefined) => import("@material-ui/styles").ClassNameMap<"label" | "hide" | "checkbox" | "inactive" | "root" | "counter">;
-export default useStyles;
+export declare const Styled: {
+    Root: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$inactive" | "$hide"> & {
+        $inactive?: boolean;
+        $hide?: boolean;
+    }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$inactive" | "$hide"> & {
+        $inactive?: boolean;
+        $hide?: boolean;
+    }, never>>> & string;
+    Counter: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
+};
 //# sourceMappingURL=CheckboxFilterOption.style.d.ts.map

package/dist/components/filter/checkbox/CheckboxFilterOption.style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxFilterOption.style.d.ts","sourceRoot":"","sources":["../../../../src/components/filter/checkbox/CheckboxFilterOption.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,yIAyCrB,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"CheckboxFilterOption.style.d.ts","sourceRoot":"","sources":["../../../../src/components/filter/checkbox/CheckboxFilterOption.style.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM;;oBACc,OAAO;gBAAU,OAAO;;oBAAxB,OAAO;gBAAU,OAAO;;;CAmCxD,CAAC"}

package/dist/components/filter/checkbox/CheckboxFilterOption.style.js

@@ -1,41 +1,37 @@
-import { createStyles, makeStyles } from '@equinor/fusion-react-styles';
-export const useStyles = makeStyles((theme) => createStyles({
-    root: {
-        display: 'flex',
-        alignItems: 'center',
-        // justifyContent: 'space-between',
-        cursor: 'pointer',
-        backgroundColor: 'transparent',
-        willChange: 'backgroundColor',
-        // TODO - fetch from theme
-        transition: '125ms background-color ease-out',
-        '&:hover': {
-            backgroundColor: theme.colors.interactive.primary__hover_alt.getVariable('color'),
-        },
-        // maxWidth: '80px',
-    },
-    inactive: {
-        filter: 'grayscale(100%)',
-        opacity: 0.5,
-    },
-    checkbox: {
-        '--fwc-checkbox-size': '14px',
-    },
-    label: {
-        ...theme.typography.input.label.style,
-        flex: '1 1 auto',
-        overflow: 'hidden',
-        whiteSpace: 'nowrap',
-        textOverflow: 'ellipsis',
-    },
-    counter: {
-        ...theme.typography.input.label.style,
-        whiteSpace: 'nowrap',
-        margin: `0 ${theme.spacing.comfortable.small.getVariable('padding')}`,
-    },
-    hide: {
-        display: 'none',
-    },
-}), { name: 'fusion-filter-checkbox-option' });
-export default useStyles;
-//# sourceMappingURL=CheckboxFilterOption.style.js.map
+import styled from 'styled-components';
+import { tokens } from '@equinor/eds-tokens';
+export const Styled = {
+    Root: styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    background-color: transparent;
+    will-change: background-color;
+    transition: 125ms background-color ease-out;
+
+    &:hover {
+      background-color: ${tokens.colors.interactive.primary__hover_alt.rgba};
+    }
+
+    ${({ $inactive }) => $inactive &&
+        `
+      filter: grayscale(100%);
+      opacity: 0.5;
+    `}
+
+    ${({ $hide }) => $hide &&
+        `
+      display: none;
+    `}
+  `,
+    Counter: styled.span `
+    color: ${tokens.typography.input.label.color};
+    font-family: ${tokens.typography.input.label.fontFamily};
+    font-size: ${tokens.typography.input.label.fontSize};
+    font-weight: ${tokens.typography.input.label.fontWeight};
+    line-height: ${tokens.typography.input.label.lineHeight};
+    white-space: nowrap;
+    margin: 0 ${tokens.spacings.comfortable.small};
+  `,
+};

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

@@ -1,3 +1,4 @@
-export declare const CheckboxFilterOptionAll: () => JSX.Element;
+import { type ReactElement } from 'react';
+export declare const CheckboxFilterOptionAll: () => ReactElement;
 export default CheckboxFilterOptionAll;
 //# sourceMappingURL=CheckboxFilterOptionAll.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxFilterOptionAll.d.ts","sourceRoot":"","sources":["../../../../src/components/filter/checkbox/CheckboxFilterOptionAll.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,uBAAuB,QAAO,WAmC1C,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"CheckboxFilterOptionAll.d.ts","sourceRoot":"","sources":["../../../../src/components/filter/checkbox/CheckboxFilterOptionAll.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAe,MAAM,OAAO,CAAC;AAWvD,eAAO,MAAM,uBAAuB,QAAO,YAmC1C,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

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

@@ -1,24 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback } from 'react';
-import { useObservableRef, useObservableState, useSelector } from '@equinor/fusion-react-observable';
+import { useObservableRef, useObservableState, useObservableSelector, } from '@equinor/fusion-observable/react';
 import { useCheckboxFilterOptionContext } from './context';
 import CheckboxFilterOption from './CheckboxFilterOption';
 export const CheckboxFilterOptionAll = () => {
     const { options$, selection$, setSelection } = useCheckboxFilterOptionContext();
-    const options = useObservableState(options$) || {};
-    const optionKeysRef = useObservableRef(useSelector(options$, (x) => Object.keys(x)));
-    const selectedKeys = useObservableState(selection$) || new Set([]);
+    const { value: options } = useObservableState(options$) || {};
+    const optionKeysRef = useObservableRef(useObservableSelector(options$, (x) => Object.keys(x)));
+    const { value: selectedKeys } = useObservableState(selection$) || new Set([]);
     const { totalCount } = Object.values(options || {}).reduce((acc, value) => {
         acc.count += value.count;
         acc.totalCount += value.totalCount;
         return acc;
     }, { count: 0, totalCount: 0 });
-    const checked = selectedKeys.size === optionKeysRef.current?.length;
-    const indeterminate = Boolean(selectedKeys.size && !checked);
+    const checked = selectedKeys?.size === optionKeysRef.current?.length;
+    const indeterminate = Boolean(selectedKeys?.size && !checked);
     const onOptionChange = useCallback(({ selected }) => {
         setSelection(selected ? new Set(optionKeysRef.current) : new Set([]));
     }, [setSelection, optionKeysRef]);
-    return (_jsx(CheckboxFilterOption, { name: "all", label: "all", indeterminate: indeterminate, checked: checked, count: totalCount, onOptionChange: onOptionChange }, void 0));
+    return (_jsx(CheckboxFilterOption, { name: "all", label: "All", indeterminate: indeterminate, checked: checked, count: totalCount, onOptionChange: onOptionChange }));
 };
 export default CheckboxFilterOptionAll;
-//# sourceMappingURL=CheckboxFilterOptionAll.js.map