refactor: rename ui/filter-n-sort to ui/view-bar (#1475)

Closes #1473

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

front/src/modules/ui/view-bar/components/DropdownMenuContainer.tsx

@@ -0,0 +1,48 @@
+import { type HTMLAttributes, useRef } from 'react';
+import styled from '@emotion/styled';
+
+import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
+import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
+
+const StyledDropdownMenuContainer = styled.ul<{
+  anchor: 'left' | 'right';
+}>`
+  padding: 0;
+  position: absolute;
+  ${({ anchor }) => {
+    if (anchor === 'right') return 'right: 0';
+  }};
+  top: 14px;
+`;
+
+export type DropdownMenuContainerProps = {
+  anchor?: 'left' | 'right';
+  children: React.ReactNode;
+  onClose?: () => void;
+  width?: `${string}px` | 'auto' | number;
+} & HTMLAttributes<HTMLUListElement>;
+
+export function DropdownMenuContainer({
+  anchor = 'right',
+  children,
+  onClose,
+  width,
+  ...props
+}: DropdownMenuContainerProps) {
+  const dropdownRef = useRef(null);
+
+  useListenClickOutside({
+    refs: [dropdownRef],
+    callback: () => {
+      onClose?.();
+    },
+  });
+
+  return (
+    <StyledDropdownMenuContainer data-select-disable {...props} anchor={anchor}>
+      <StyledDropdownMenu ref={dropdownRef} width={width}>
+        {children}
+      </StyledDropdownMenu>
+    </StyledDropdownMenuContainer>
+  );
+}