@equinor/amplify-component-lib 9.15.3 → 9.16.0-beta.1

package/dist/providers/TableOfContentsProvider.js

@@ -1 +1 @@
-import{useOnScreenMultiple as e}from"../atoms/hooks/useOnScreenMultiple.js";import{getValues as t}from"./TableOfContentsProvider.utils.js";import{createContext as n,useCallback as r,useContext as i,useEffect as a,useMemo as o,useRef as s,useState as c}from"react";import{jsx as l}from"react/jsx-runtime";import{useLocation as u,useNavigate as d}from"react-router";const f=n(void 0);function p(){let e=i(f);if(e===void 0)throw Error(`'useTableOfContents' must be used within provider`);return e}const m=({items:n,children:i,hashNavigation:p})=>{let m=d(),{hash:h}=u(),[g,_]=c(n[0]?.value),[v,y]=c([]),[b,x]=c(h!==``),S=s(!1),C=o(()=>n.flatMap(e=>t([],e)),[n]);a(()=>{y(C.map(e=>document.getElementById(e)))},[C]),a(()=>{h.length||(S.current=!0)},[h]);let w=r(e=>{if(e.value===g)return!0;if(e.children&&g){let n=t([],e);return n.includes(g)}return!1},[g]),T=e(v),E=s(-1),D=r((e,t)=>{let n=C.findIndex(t=>t===e),r=v[n];if(r){let e=t?.shouldInstantlyJumpOnMount&&b?`instant`:t?.behavior??`smooth`;r.scrollIntoView({block:`start`,behavior:e}),E.current=n;let i=1/0,a=0,o=()=>{let e=r?.getBoundingClientRect().top;if(e===i){if(a+=1,a>1){_(C[n]),p&&(m(`#${C[n]}`,{replace:!0}),x(!1)),E.current=-1;return}}else a=0,i=e;requestAnimationFrame(o)};requestAnimationFrame(o)}},[v,p,m,b,C]);return a(()=>{if(T.length===0||T.length!==C.length||E.current!==-1)return;let e=-1;for(let t=T.length-1;t>=0;t--)T[t]&&(e=t);if(e===-1||C.at(e)===void 0)return;let t=h.replace(`#`,``);if(!S.current&&t.length&&C.includes(t)){D(t,{behavior:`instant`,shouldInstantlyJumpOnMount:!0}),S.current=!0;return}_(C[e]),p&&m(`#${C[e]}`,{replace:!0})},[p,m,C,T]),l(f.Provider,{value:{items:n,selected:g,setSelected:D,isActive:w},children:i})};export{m as TableOfContentsProvider,p as useTableOfContents};
+import{useOnScreenMultiple as e}from"../atoms/hooks/useOnScreenMultiple.js";import{getValues as t}from"./TableOfContentsProvider.utils.js";import{createContext as n,useCallback as r,useContext as i,useEffect as a,useMemo as o,useRef as s,useState as c}from"react";import{jsx as l}from"react/jsx-runtime";import{useLocation as u,useNavigate as d}from"@tanstack/react-router";const f=n(void 0);function p(){let e=i(f);if(e===void 0)throw Error(`'useTableOfContents' must be used within provider`);return e}const m=({items:n,children:i,hashNavigation:p})=>{let m=d(),{hash:h}=u(),[g,_]=c(n[0]?.value),[v,y]=c([]),b=s(!1),x=o(()=>n.flatMap(e=>t([],e)),[n]);a(()=>{y(x.map(e=>document.getElementById(e)))},[x]),a(()=>{h.length||(b.current=!0)},[h]);let S=r(e=>e.value===g?!0:e.children&&g?t([],e).includes(g):!1,[g]),C=e(v),w=s(-1),T=r((e,t)=>{let n=x.findIndex(t=>t===e);if(p){_(x[n]),m({to:`.`,hash:`#${x[n]}`,hashScrollIntoView:!1,replace:!0});return}let r=v[n];if(r){let e=t?.behavior??`smooth`;r.scrollIntoView({block:`start`,behavior:e}),w.current=n;let i=1/0,a=0,o=()=>{let e=r?.getBoundingClientRect().top;if(e===i){if(a+=1,a>1){_(x[n]),w.current=-1;return}}else a=0,i=e;requestAnimationFrame(o)};requestAnimationFrame(o)}},[v,p,m,x]);return a(()=>{if(h&&!b.current){b.current=!0;let e=decodeURIComponent(h.replace(`#`,``));if(!e.length||!x.includes(e))return;_(e),m({to:`.`,hash:`#${e}`,hashScrollIntoView:{block:`start`,behavior:`instant`},replace:!0})}},[h,m,x]),a(()=>{if(C.length===0||C.length!==x.length||w.current!==-1||!b.current)return;let e=-1;for(let t=C.length-1;t>=0;t--)C[t]&&(e=t);e===-1||x.at(e)===void 0||(_(x[e]),p&&m({to:`.`,hash:`#${x[e]}`,hashScrollIntoView:!1,replace:!0}))},[T,p,m,x,C]),l(f.Provider,{value:{items:n,selected:g,setSelected:T,isActive:S},children:i})};export{m as TableOfContentsProvider,p as useTableOfContents};

package/dist/providers/ThemeProvider/ThemeProvider.js

@@ -1 +1 @@
-import{useLocalStorage as e}from"../../atoms/hooks/useLocalStorage.js";import{THEME_LOCALSTORAGE_KEY as t}from"./ThemeProvider.constants.js";import{Theme as n}from"../../atoms/enums/Theme.js";import{createContext as r,useContext as i,useEffect as a}from"react";import{jsx as o}from"react/jsx-runtime";const s=r(void 0);function c(){let e=i(s);if(e===void 0)throw Error(`ThemeProvider must be used within Provider`);return e}const l=({children:r})=>{let[i,c]=e(t,n.LIGHT);a(()=>{document.documentElement.setAttribute(`data-theme`,i)},[i]);let l=e=>{c(e)};return o(s.Provider,{value:{theme:i,setTheme:l},children:r})};export{l as ThemeProvider,s as ThemeProviderContext,c as useThemeProvider};
+import{useLocalStorage as e}from"../../atoms/hooks/useLocalStorage.js";import{THEME_LOCALSTORAGE_KEY as t}from"./ThemeProvider.constants.js";import{Theme as n}from"../../atoms/enums/Theme.js";import{createContext as r,useContext as i,useEffect as a}from"react";import{jsx as o}from"react/jsx-runtime";const s=r(void 0);function c(){let e=i(s);if(e===void 0)throw Error(`ThemeProvider must be used within Provider`);return e}const l=({children:r})=>{let[i,c]=e(t,n.LIGHT);return a(()=>{document.documentElement.setAttribute(`data-theme`,i)},[i]),o(s.Provider,{value:{theme:i,setTheme:e=>{c(e)}},children:r})};export{l as ThemeProvider,s as ThemeProviderContext,c as useThemeProvider};

package/dist/providers/TutorialHighlightingProvider/TutorialHighlightingProviderInner.js

@@ -21,4 +21,4 @@ import{spacings as e}from"../../atoms/style/spacings.js";import{getHighlightElem
   height: 100vh;
   background: none;
   pointer-events: none;
-`,g=({children:e,contentRef:s})=>{let{activeTutorial:g,activeStep:_,unseenTutorialsOnThisPage:v}=f(),y=p()>0,b=n(s),[x,S]=o({width:window.innerWidth,height:window.innerHeight});a(()=>{let e=()=>{S({width:window.innerWidth,height:window.innerHeight})};return window.addEventListener(`resize`,e),()=>window.removeEventListener(`resize`,e)},[]);let[C,w]=o([]);a(()=>{if(y)return;let e=async()=>{if(g&&_!==void 0){if(!g.steps[_].highlightElement)return w([]);let e=await t(g.id,_,x);return w(e?[e]:[])}let e=await Promise.all(v.map(e=>{if(e.steps.at(0)?.highlightElement)return t(e.id,0,x)}));return w(e.filter(e=>e!==void 0))};e()},[_,g,y,v,x]);let T=g?[g]:v.filter(e=>e.steps[0].highlightElement&&C.some(e=>e.id)||!e.steps[0].highlightElement);return T.length>0?u(c,{children:[e,l(h,{children:T.map(e=>{let t=C.find(t=>t.id===e.id);return l(i,{isHighlighting:C.length>0,contentRef:s,...e,...t},e.id)})}),u(m,{children:[u(`mask`,{id:`tutorials-rectangles`,children:[l(`rect`,{width:`100%`,height:`100%`,fill:`white`}),l(d.g,{style:{translateY:b},children:C.map(e=>l(d.path,{"data-testid":`tutorial-mask-${e.id}`,initial:{opacity:0,d:`M ${e.left} ${e.top} h ${e.width} v ${e.height} h -${e.width} Z`},animate:{opacity:1,d:`M ${e.left} ${e.top} h ${e.width} v ${e.height} h -${e.width} Z`},fill:`black`},e.id))})]}),l(d.rect,{width:`100%`,height:`100%`,fill:`rgba(111, 111, 111, 0.35)`,mask:`url(#tutorials-rectangles)`,...r})]})]}):l(c,{children:e})};export{g as TutorialHighlightingProviderInner};
+`,g=({children:e,contentRef:s})=>{let{activeTutorial:g,activeStep:_,unseenTutorialsOnThisPage:v}=f(),y=p()>0,b=n(s),[x,S]=o({width:window.innerWidth,height:window.innerHeight});a(()=>{let e=()=>{S({width:window.innerWidth,height:window.innerHeight})};return window.addEventListener(`resize`,e),()=>window.removeEventListener(`resize`,e)},[]);let[C,w]=o([]);a(()=>{y||(async()=>{if(g&&_!==void 0){if(!g.steps[_].highlightElement)return w([]);let e=await t(g.id,_,x);return w(e?[e]:[])}let e=await Promise.all(v.map(e=>{if(e.steps.at(0)?.highlightElement)return t(e.id,0,x)}));return w(e.filter(e=>e!==void 0))})()},[_,g,y,v,x]);let T=g?[g]:v.filter(e=>e.steps[0].highlightElement&&C.some(e=>e.id)||!e.steps[0].highlightElement);return T.length>0?u(c,{children:[e,l(h,{children:T.map(e=>{let t=C.find(t=>t.id===e.id);return l(i,{isHighlighting:C.length>0,contentRef:s,...e,...t},e.id)})}),u(m,{children:[u(`mask`,{id:`tutorials-rectangles`,children:[l(`rect`,{width:`100%`,height:`100%`,fill:`white`}),l(d.g,{style:{translateY:b},children:C.map(e=>l(d.path,{"data-testid":`tutorial-mask-${e.id}`,initial:{opacity:0,d:`M ${e.left} ${e.top} h ${e.width} v ${e.height} h -${e.width} Z`},animate:{opacity:1,d:`M ${e.left} ${e.top} h ${e.width} v ${e.height} h -${e.width} Z`},fill:`black`},e.id))})]}),l(d.rect,{width:`100%`,height:`100%`,fill:`rgba(111, 111, 111, 0.35)`,mask:`url(#tutorials-rectangles)`,...r})]})]}):l(c,{children:e})};export{g as TutorialHighlightingProviderInner};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/amplify-component-lib",
-  "version": "9.15.3",
+  "version": "9.16.0-beta.1",
   "description": "Frontend Typescript components for the Amplify team",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -52,7 +52,7 @@
   },
   "devDependencies": {
     "@equinor/eds-icons": "^0.22.0",
-    "@equinor/subsurface-app-management": "^4.4.3",
+    "@equinor/subsurface-app-management": "4.4.3-beta.0",
     "@eslint/js": "^9.22.0",
     "@faker-js/faker": "^9.6.0",
     "@storybook/addon-designs": "^10.0.2",
@@ -72,7 +72,6 @@
     "@types/random-seed": "^0.3.5",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
-    "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.34",
     "@types/uuid": "^10.0.0",
     "@types/wicg-file-system-access": "^2023.10.5",
@@ -93,12 +92,10 @@
     "prettier": "^3.5.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router": "^6.28.0",
-    "react-router-dom": "^6.28.0",
     "resize-observer-polyfill": "^1.5.1",
     "resolve-tspaths": "^0.8.23",
     "storybook": "^9.1.1",
-    "tsdown": "^0.14.1",
+    "tsdown": "^0.14.2",
     "typescript": "^5.8.2",
     "typescript-eslint": "^8.26.1",
     "uuid": "^11.1.0",
@@ -113,12 +110,11 @@
   },
   "peerDependencies": {
     "@equinor/eds-icons": "*",
-    "@equinor/subsurface-app-management": ">=4.4.3",
+    "@equinor/subsurface-app-management": "4.4.3-beta.0",
     "@tanstack/react-query": "*",
+    "@tanstack/react-router": "*",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router": "^6.28.0",
-    "react-router-dom": "^6.28.0",
     "@equinor/eds-core-react": "0.44.0",
     "@equinor/eds-data-grid-react": "^0.7.5",
     "@tiptap/core": "^3.1.0",

package/dist/atoms/hooks/useSearchParameter.d.ts

@@ -1,12 +0,0 @@
-//#region src/atoms/hooks/useSearchParameter.d.ts
-declare function useSearchParameter<T>({
-  key,
-  initialValue,
-  parser
-}: {
-  key: string;
-  initialValue?: T;
-  parser?: (value: string) => T;
-}): readonly [T | undefined, (action: ((value: T | undefined) => T) | T) => void];
-//#endregion
-export { useSearchParameter };

package/dist/atoms/hooks/useSearchParameter.js

@@ -1 +0,0 @@
-import{useRef as e}from"react";import{useSearchParams as t}from"react-router-dom";function n({key:n,initialValue:r,parser:i}){let[a,o]=t(),s=e(!1),c=a.get(n)??void 0,l=i&&c?i(c):c,u=!s.current&&l===void 0?r:l,d=e=>{if(s.current||=!0,e instanceof Function){let t=e(u);d(t)}else{let t=new URLSearchParams(a),r=typeof e==`string`?e:JSON.stringify(e);r===void 0||r===``||r===`null`||r===`[]`||r===`{}`?t.delete(n):t.set(n,r),o(t)}};return[u,d]}export{n as useSearchParameter};

package/dist/molecules/Sieve/Filter.d.ts

@@ -1,10 +0,0 @@
-import { SieveOption } from "./Sieve.types.js";
-import { FC } from "react";
-
-//#region src/molecules/Sieve/Filter.d.ts
-interface SieveFilterGroup {
-  label: string;
-  options: SieveOption[];
-}
-//#endregion
-export { SieveFilterGroup };

package/dist/molecules/Sieve/Filter.js

@@ -1 +0,0 @@
-import{tokens as e}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{useOutsideClick as t}from"../../node_modules/@equinor/eds-utils/dist/esm/hooks/useOutsideClick.js";import{Chip as n,MenuItem as r}from"./Sieve.styles.js";import{useRef as i,useState as a}from"react";import{Icon as o,Menu as s}from"@equinor/eds-core-react";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";import{arrow_drop_right as d,checkbox as f,checkbox_outline as p,filter_list as m}from"@equinor/eds-icons";const{colors:h}=e,g=({options:e,filterValues:g,setFilterValues:_})=>{let v=i(null),[y,b]=a(null),x=i(null),S=i(null),[C,w]=a(-1),[T,E]=a(!1);t(v.current,e=>{y===null&&T&&x.current&&!x.current.contains(e.target)?E(!1):T&&y!==null&&x.current&&!x.current.contains(e.target)&&S.current&&!S.current.contains(e.target)&&(E(!1),w(-1),b(null))});let D=()=>{E(!T),w(-1),b(null)},O=(e,t)=>{C===t?(w(-1),b(null)):(w(t),b(e.currentTarget))},k=(e,t)=>{let n={...g};if(e in n&&n[e].some(e=>e.value===t.value)){let r=n[e].findIndex(e=>e.value===t.value);n[e].splice(r,1),n[e].length===0&&delete n[e]}else n[e]?n[e].push(t):n[e]=[t];Object.keys(n).flatMap(e=>n?.[e]).length===0&&(n=void 0),_(n)};return e.length===0?null:u(c,{children:[u(n,{ref:v,onClick:D,children:[`Filter by `,l(o,{data:m})]}),T&&l(s,{open:!0,ref:x,anchorEl:v.current,placement:`bottom-start`,children:l(s.Section,{title:`Filter by`,children:e.map((e,t)=>u(r,{active:C===t,onClick:e=>O(e,t),children:[e.label,l(o,{data:d,color:h.text.static_icons__tertiary.rgba})]},`filter-menu-item-${e.label}`))})}),C!==-1&&l(s,{open:!0,anchorEl:y,ref:S,placement:`right-start`,children:l(s.Section,{title:e[C].label,children:e[C]?.options.map(t=>u(r,{onClick:()=>k(e[C].label,t),children:[t.label,l(o,{data:g?.[e[C].label]?.some(e=>e.value===t.value)?f:p,color:h.interactive.primary__resting.rgba})]},`filter-option-${t.label}`))})})]})};export{g as default};

package/dist/molecules/Sieve/Sieve.d.ts

@@ -1,7 +0,0 @@
-import { SieveProps } from "./Sieve.types.js";
-import { FC } from "react";
-
-//#region src/molecules/Sieve/Sieve.d.ts
-declare const Sieve: FC<SieveProps>;
-//#endregion
-export { Sieve };

package/dist/molecules/Sieve/Sieve.js

@@ -1 +0,0 @@
-import{Container as e,FilterChip as t,Search as n,Wrapper as r}from"./Sieve.styles.js";import i from"./Filter.js";import a from"./Sort.js";import{useCallback as o,useEffect as s,useRef as c,useState as l}from"react";import{jsx as u,jsxs as d}from"react/jsx-runtime";import{debounce as f}from"lodash";import{useSearchParams as p}from"react-router-dom";const m=({searchPlaceholder:m,sortOptions:h,filterOptions:g,sieveValue:_,onUpdate:v,showChips:y=!0,minSearchWidth:b=`24rem`,syncWithSearchParams:x=!1,isLoadingOptions:S=!1,debounceSearchValue:C=!1,onIsTyping:w})=>{let[T,E]=l(_.searchValue??``),D=c(!1),[O,k]=p(),A=c(!1);s(()=>{if(!A.current&&x&&!S){let e=O.get(`search`)??void 0,t=g?.map(e=>e.label)??[],n={};for(let e of t){let t=g?.find(t=>t.label===e)?.options,r=JSON.parse(O.get(e.toLowerCase())??`[]`);t!==void 0&&(n[e]=t.filter(e=>r.includes(e.label)))}v({searchValue:e,filterValues:n,sortValue:_.sortValue}),A.current=!0}},[g,A,S,v,O,_.sortValue,x]);let j=c(`{}`);s(()=>{if(x&&A.current&&!S&&JSON.stringify(_)!==j.current){_.searchValue===void 0?O.delete(`search`):O.set(`search`,_.searchValue);let e=g?.map(e=>e.label)??[],t=_.filterValues;for(let n of e)t?.[n]&&t[n].length>0?O.set(n.toLowerCase(),JSON.stringify(t[n].map(e=>e.label))):O.delete(n.toLowerCase());j.current=JSON.stringify(_),k(O),v(_)}},[g,A,S,v,O,k,_,x]);let M=o((e,t)=>{let n={..._,[e]:t};v(n)},[v,_]),N=o(f((e,t)=>{M(e,t),w?.(!1),D.current=!1},800),[M,w]),P=(e,t)=>{let n={..._.filterValues},r=n[e].findIndex(e=>e.value===t.value);n[e].splice(r,1),n[e].length===0&&delete n[e],Object.keys(n).flatMap(e=>n?.[e]).length===0&&(n=void 0),M(`filterValues`,n)},F=()=>{M(`filterValues`,void 0)},I=e=>{C?(E(e.target.value),e.target.value===``?(N.cancel(),M(`searchValue`,void 0),w?.(!1),D.current=!1):(N(`searchValue`,e.target.value),D.current||=(w?.(!0),!0))):M(`searchValue`,e.target.value===``?void 0:e.target.value)};return d(r,{className:`sieve-container`,children:[d(e,{children:[u(n,{style:{minWidth:b},placeholder:m,value:C?T:_.searchValue??``,onChange:I}),h!==void 0&&u(a,{options:h,selectedOption:_.sortValue,setSelectedOption:e=>M(`sortValue`,e)}),g!==void 0&&u(i,{options:g,filterValues:_.filterValues,setFilterValues:e=>M(`filterValues`,e)})]}),y&&d(e,{children:[Object.keys(_.filterValues??{}).map(e=>_.filterValues?.[e].map(n=>u(t,{onDelete:()=>P(e,n),children:n?.label},`filter-chip-${n?.value}`))),_.filterValues&&Object.keys(_.filterValues).flatMap(e=>_.filterValues?.[e]).length>1&&u(t,{onDelete:F,children:`Remove all`})]})]})};export{m as Sieve};

package/dist/molecules/Sieve/Sieve.styles.js

@@ -1,43 +0,0 @@
-import{colors as e}from"../../atoms/style/colors.js";import{spacings as t}from"../../atoms/style/spacings.js";import{Chip as n,Menu as r,Search as i}from"@equinor/eds-core-react";import a from"styled-components";const o=a.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${t.medium};
-`,s=a.div`
-  display: flex;
-  gap: ${t.medium};
-  align-items: center;
-`,c=a(n)`
-  color: ${e.text.static_icons__default.rgba};
-  background: ${e.ui.background__light.rgba};
-  border: 1px solid ${e.ui.background__medium.rgba};
-  line-height: normal;
-  transition: background 0.15s ease-in;
-
-  svg {
-    z-index: auto;
-    fill: ${e.text.static_icons__default.rgba};
-  }
-`,l=a(i)`
-  > div {
-    box-shadow: none;
-    outline: none !important;
-    background: ${e.ui.background__default.rgba};
-    > input {
-      color: ${e.text.static_icons__default.rgba};
-      box-shadow: inset 0 -1px 0 0 ${e.text.static_icons__tertiary.rgba};
-      &:hover {
-        box-shadow: inset 0 -2px 0 0 ${e.text.static_icons__tertiary.rgba};
-      }
-      &:focus {
-        box-shadow: inset 0 -2px 0 0 ${e.interactive.primary__resting.rgba};
-      }
-    }
-  }
-`,u=a(r.Item)`
-  outline: none !important;
-  > div {
-    grid-template-columns: 1fr auto;
-  }
-`,d=a(n)`
-  background: none;
-`;export{d as Chip,s as Container,c as FilterChip,u as MenuItem,l as Search,o as Wrapper};

package/dist/molecules/Sieve/Sieve.types.d.ts

@@ -1,28 +0,0 @@
-import { SieveFilterGroup } from "./Filter.js";
-
-//#region src/molecules/Sieve/Sieve.types.d.ts
-interface SieveOption {
-  label: string;
-  value: string;
-}
-type FilterValues = Record<string, SieveOption[]>;
-interface SieveValue {
-  searchValue: string | undefined;
-  sortValue: SieveOption | undefined;
-  filterValues: FilterValues | undefined;
-}
-interface SieveProps {
-  searchPlaceholder: string;
-  sortOptions?: SieveOption[];
-  filterOptions?: SieveFilterGroup[];
-  sieveValue: SieveValue;
-  onUpdate: (value: SieveValue) => void;
-  showChips?: boolean;
-  minSearchWidth?: string;
-  syncWithSearchParams?: boolean;
-  isLoadingOptions?: boolean;
-  debounceSearchValue?: boolean;
-  onIsTyping?: (value: boolean) => void;
-}
-//#endregion
-export { type FilterValues, type SieveOption, type SieveProps, type SieveValue };

package/dist/molecules/Sieve/Sort.js

@@ -1 +0,0 @@
-import{colors as e}from"../../atoms/style/colors.js";import{Chip as t,MenuItem as n}from"./Sieve.styles.js";import{useRef as r,useState as i}from"react";import{Icon as a,Menu as o}from"@equinor/eds-core-react";import{Fragment as s,jsx as c,jsxs as l}from"react/jsx-runtime";import{radio_button_selected as u,radio_button_unselected as d,sort as f}from"@equinor/eds-icons";const p=({options:p,selectedOption:m,setSelectedOption:h})=>{let g=r(null),[_,v]=i(!1),y=()=>{v(!_)},b=()=>{v(!1)},x=e=>{h(e)};return p.length===0?null:l(s,{children:[l(t,{ref:g,onClick:y,children:[`Sort by `,c(a,{data:f})]}),_&&c(o,{open:!0,anchorEl:g.current,onClose:b,placement:`bottom-start`,children:c(o.Section,{title:`Sort by`,children:p.map(t=>l(n,{onClick:()=>x(t),children:[t.label,c(a,{data:m?.value===t.value?u:d,color:e.interactive.primary__resting.rgba})]},`sort-item-${t.value}`))})})]})};export{p as default};