Refactor UI folder (#2016)

* Added Overview page * Revised Getting Started page * Minor revision * Edited readme, minor modifications to docs * Removed sweep.yaml, .devcontainer, .ergomake * Moved security.md to .github, added contributing.md * changes as per code review * updated contributing.md * fixed broken links & added missing links in doc, improved structure * fixed link in wsl setup * fixed server link, added https cloning in yarn-setup * removed package-lock.json * added doc card, admonitions * removed underline from nav buttons * refactoring modules/ui * refactoring modules/ui * Change folder case * Fix theme location * Fix case 2 * Fix storybook --------- Co-authored-by: Nimra Ahmed <nimra1408@gmail.com> Co-authored-by: Nimra Ahmed <50912134+nimraahmed@users.noreply.github.com>
2023-10-14 00:04:29 +02:00
parent a35ea5e8f9
commit 258685467b
732 changed files with 1106 additions and 1010 deletions
@@ -0,0 +1,47 @@
+import { HTMLAttributes, useRef } from 'react';
+import styled from '@emotion/styled';
+
+import { StyledDropdownMenu } from '@/ui/layout/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 const DropdownMenuContainer = ({
+  anchor = 'right',
+  children,
+  onClose,
+  width,
+}: DropdownMenuContainerProps) => {
+  const dropdownRef = useRef(null);
+
+  useListenClickOutside({
+    refs: [dropdownRef],
+    callback: () => {
+      onClose?.();
+    },
+  });
+
+  return (
+    <StyledDropdownMenuContainer data-select-disable anchor={anchor}>
+      <StyledDropdownMenu ref={dropdownRef} width={width}>
+        {children}
+      </StyledDropdownMenu>
+    </StyledDropdownMenuContainer>
+  );
+};