@equinor/fusion-react-context-selector 0.2.0 → 0.3.0

package/dist/ContextSearch.d.ts

@@ -0,0 +1,8 @@
+import { ContextSelectorProps, ContextResultItem } from './types';
+export type ContextSearchProps = ContextSelectorProps & {
+    previewItem?: ContextResultItem;
+    onClearContext?: (e: Event) => void;
+};
+export declare const ContextSearch: ({ children, onSelect, previewItem, onClearContext, ...props }: React.PropsWithChildren<ContextSearchProps>) => JSX.Element;
+export default ContextSearch;
+//# sourceMappingURL=ContextSearch.d.ts.map

package/dist/ContextSearch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextSearch.d.ts","sourceRoot":"","sources":["../src/ContextSearch.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,iBAAiB,EAAsB,MAAM,SAAS,CAAC;AAKtF,MAAM,MAAM,kBAAkB,GAAG,oBAAoB,GAAG;IACtD,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;CACrC,CAAC;AAUF,eAAO,MAAM,aAAa,kEAMvB,MAAM,iBAAiB,CAAC,kBAAkB,CAAC,KAAG,WAmGhD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/ContextSearch.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { ContextSelector } from './ContextSelector';
+import { Icon } from '@equinor/fusion-react-icon';
+import { useStyles } from './ContextSearch.styles';
+import { clsx } from '@equinor/fusion-react-styles';
+const defaultInitialItem = {
+    id: 'temp-dev-id',
+    title: 'Select Context',
+    subTitle: 'Context',
+    graphic: 'list',
+    isDisabled: true,
+};
+export const ContextSearch = ({ children, onSelect, previewItem, onClearContext, ...props }) => {
+    const initialItem = previewItem ? Object.assign(defaultInitialItem, previewItem) : defaultInitialItem;
+    const elementRef = useRef(null);
+    const [ctx, setCtx] = useState(initialItem);
+    const [gettingCtx, setGettingCtx] = useState(false);
+    const styles = useStyles();
+    /* Extend onSelect and calls props.onSelect */
+    const handleSelect = useCallback((selected) => {
+        const item = selected.nativeEvent.detail.selected[0];
+        setCtx(item);
+        setGettingCtx(false);
+        /* Trigger props.onSelect */
+        if (onSelect) {
+            onSelect(selected);
+        }
+    }, [setCtx, onSelect]);
+    /* Clear context button handler */
+    const handleClearContext = useCallback((event) => {
+        setCtx(initialItem);
+        /* Trigger props.onClearContext */
+        if (onClearContext) {
+            onClearContext(event);
+        }
+    }, [initialItem, onClearContext]);
+    /* extending the fwc-searchable-dropdown escape handler */
+    const handleKeyup = useCallback((e) => {
+        if (e.key === 'Escape') {
+            setGettingCtx(false);
+        }
+        if (e.key === ' ' || e.key === 'Enter') {
+            if (e.target?.className.indexOf('titleBlock') > 0) {
+                setGettingCtx(true);
+            }
+            else if (e.target?.className.indexOf('closeBtn') > 0) {
+                handleClearContext(e);
+            }
+            e.stopPropagation();
+            e.preventDefault();
+        }
+    }, [handleClearContext]);
+    useEffect(() => {
+        window.addEventListener('keyup', handleKeyup);
+        return () => {
+            window.removeEventListener('keyup', handleKeyup);
+        };
+    }, [handleKeyup]);
+    useEffect(() => {
+        const ref = elementRef.current;
+        if (ref) {
+            ref.addEventListener('dropdownClosed', () => {
+                setGettingCtx(false);
+            });
+        }
+        return () => {
+            if (ref) {
+                ref.removeEventListener('dropdownClosed', () => null);
+            }
+        };
+    }, [elementRef]);
+    return (_jsx("div", { ref: elementRef, className: styles.root, children: ctx && !gettingCtx ? (_jsxs("div", { className: styles.context, onKeyUp: () => handleKeyup, children: [_jsx("div", { className: styles.icon, children: ctx.graphic && _jsx(Icon, { icon: ctx.graphic }) }), _jsxs("div", { tabIndex: 0, className: styles.titleBlock, onClick: () => setGettingCtx(true), children: [_jsx("span", { className: styles.title, children: ctx.title }), _jsx("span", { className: styles.subTitle, children: ctx.subTitle })] }), _jsx("div", { className: styles.icon, children: ctx && !ctx.isDisabled && (_jsx("button", { className: clsx(styles.closeBtn), onClick: handleClearContext, children: _jsx(Icon, { icon: "close" }) })) })] })) : (_jsx(ContextSelector, { ...props, onSelect: handleSelect, children: children })) }));
+};
+export default ContextSearch;
+//# sourceMappingURL=ContextSearch.js.map

package/dist/ContextSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextSearch.js","sourceRoot":"","sources":["../src/ContextSearch.tsx"],"names":[],"mappings":"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"}

package/dist/ContextSearch.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const useStyles: (props?: {} | undefined) => import("@material-ui/styles").ClassNameMap<"icon" | "root" | "closeBtn" | "context" | "titleBlock" | "title" | "subTitle">;
+export default useStyles;
+//# sourceMappingURL=ContextSearch.styles.d.ts.map

package/dist/ContextSearch.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextSearch.styles.d.ts","sourceRoot":"","sources":["../src/ContextSearch.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,wJAuDrB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/ContextSearch.styles.js

@@ -0,0 +1,55 @@
+import { createStyles, makeStyles } from '@equinor/fusion-react-styles';
+export const useStyles = makeStyles((theme) => createStyles({
+    root: {
+        width: '100%',
+        margin: '0',
+        color: theme.colors.text.static_icons__default.getVariable('color'),
+    },
+    icon: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '35px',
+        fontWeight: 400,
+    },
+    closeBtn: {
+        width: '100%',
+        height: '100%',
+        background: 'none',
+        border: '1px solid transparent',
+        borderRadius: 'var(--mdc-shape-small, 4px)',
+        color: theme.colors.interactive.primary__resting.getVariable('color'),
+        padding: 0,
+        '&:hover': {
+            borderColor: theme.colors.interactive.primary__resting.getVariable('color'),
+        },
+    },
+    context: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'stretch',
+    },
+    titleBlock: {
+        flex: '1 1 auto',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        fontSize: '0.9em',
+        border: '1px solid transparent',
+        borderRadius: 'var(--mdc-shape-small, 4px)',
+        padding: '0.25em',
+        '&:hover': {
+            borderColor: theme.colors.interactive.primary__resting.getVariable('color'),
+        },
+    },
+    title: {
+        fontSize: '1em',
+        fontWeight: 'bold',
+    },
+    subTitle: {
+        fontSize: '0.8em',
+        fontStyle: 'italic',
+    },
+}), { name: 'fusion-header-context-selector' });
+export default useStyles;
+//# sourceMappingURL=ContextSearch.styles.js.map

package/dist/ContextSearch.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextSearch.styles.js","sourceRoot":"","sources":["../src/ContextSearch.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAExE,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CACjC,CAAC,KAAK,EAAE,EAAE,CACR,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,GAAG;QACX,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,qBAAqB,CAAC,WAAW,CAAC,OAAO,CAAC;KACpE;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,KAAK,EAAE,MAAM;QACb,UAAU,EAAE,GAAG;KAChB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,UAAU,EAAE,MAAM;QAClB,MAAM,EAAE,uBAAuB;QAC/B,YAAY,EAAE,6BAA6B;QAC3C,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,gBAAgB,CAAC,WAAW,CAAC,OAAO,CAAC;QACrE,OAAO,EAAE,CAAC;QACV,SAAS,EAAE;YACT,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,gBAAgB,CAAC,WAAW,CAAC,OAAO,CAAC;SAC5E;KACF;IACD,OAAO,EAAE;QACP,OAAO,EAAE,MAAM;QACf,cAAc,EAAE,eAAe;QAC/B,UAAU,EAAE,SAAS;KACtB;IACD,UAAU,EAAE;QACV,IAAI,EAAE,UAAU;QAChB,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,UAAU,EAAE,YAAY;QACxB,QAAQ,EAAE,OAAO;QACjB,MAAM,EAAE,uBAAuB;QAC/B,YAAY,EAAE,6BAA6B;QAC3C,OAAO,EAAE,QAAQ;QACjB,SAAS,EAAE;YACT,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,gBAAgB,CAAC,WAAW,CAAC,OAAO,CAAC;SAC5E;KACF;IACD,KAAK,EAAE;QACL,QAAQ,EAAE,KAAK;QACf,UAAU,EAAE,MAAM;KACnB;IACD,QAAQ,EAAE;QACR,QAAQ,EAAE,OAAO;QACjB,SAAS,EAAE,QAAQ;KACpB;CACF,CAAC,EACJ,EAAE,IAAI,EAAE,gCAAgC,EAAE,CAC3C,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export * from './ContextProvider';
 export * from './ContextSelector';
+export * from './ContextSearch';
 export * from './types';
 export { ContextSelector as default } from './ContextSelector';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,eAAe,IAAI,OAAO,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,eAAe,IAAI,OAAO,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/index.js

@@ -1,5 +1,6 @@
 export * from './ContextProvider';
 export * from './ContextSelector';
+export * from './ContextSearch';
 export * from './types';
 export { ContextSelector as default } from './ContextSelector';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,eAAe,IAAI,OAAO,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,eAAe,IAAI,OAAO,EAAE,MAAM,mBAAmB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/fusion-react-context-selector",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "React component for context selector",
   "keywords": [
     "contextselector",
@@ -37,8 +37,10 @@
     "url": "https://github.com/equinor/fusion-react-components/issues"
   },
   "dependencies": {
-    "@equinor/fusion-react-searchable-dropdown": "^0.2.0",
+    "@equinor/fusion-react-icon": "^0.2.15",
+    "@equinor/fusion-react-searchable-dropdown": "^0.3.0",
+    "@equinor/fusion-react-styles": "^0.5.5",
     "@equinor/fusion-react-utils": "^2.0.4"
   },
-  "gitHead": "a976401d0c5be9bc37c1b8f0fb2248e829de99ab"
+  "gitHead": "d458d14e142df658659ac5c02facd35b893472a6"
 }