Feat #16 dropdown compoennt

.gitignore

@@ -5,4 +5,4 @@ package-lock.json
 yarn-error.log
 .env
 .DS_Store
-docs/
+docs/

lib/components/Dropdown.tsx

@@ -0,0 +1,294 @@
+import Nullstack, {
+ NullstackClientContext,
+ NullstackFunctionalComponent,
+ NullstackNode,
+} from "nullstack";
+
+import { computePosition, flip, offset, type Placement, shift } from "@floating-ui/dom";
+
+import tc from "../tc";
+import type { BaseProps } from "../types";
+
+export const baseDropdown = {
+ slots: {
+ wrapper: "",
+ container:
+ "hidden absolute z-10 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none",
+ item: {
+ base: "text-gray-700 block px-4 py-2 text-sm",
+ variants: {
+ type: {
+ option: "hover:bg-gray-200",
+ },
+ active: {
+ true: "bg-gray-400",
+ },
+ },
+ },
+ },
+};
+
+interface DropdownProps extends BaseProps {
+ children: NullstackNode[];
+ offset?: number;
+ placement?: Placement;
+}
+
+interface DropdownContainerProps extends BaseProps {
+ Dropdown: Dropdown;
+}
+
+type CustonChildren = NullstackNode & {
+ attributes: {
+ Dropdown: Dropdown;
+ };
+};
+
+type CustonChildrenTarget = NullstackNode & {
+ attributes: {
+ Dropdown: Dropdown;
+ onclick: () => void;
+ ref: { object: Dropdown; property: "_targetRef" };
+ };
+};
+
+type CustonChildrenItem = NullstackNode & {
+ attributes: {
+ Dropdown: Dropdown;
+ active?: boolean;
+ index?: string | number;
+ };
+};
+
+type DropdownTargetProps = DropdownContainerProps;
+
+interface DropdownItemProps extends BaseProps {
+ Dropdown: Dropdown;
+ href?: string;
+ index: number;
+ onclick?: (index: number) => void;
+ title?: string;
+ type?: "option" | "none";
+}
+class Dropdown extends Nullstack {
+ visible: boolean;
+ _targetRef: HTMLElement;
+ _dropdownRef: HTMLElement;
+ _currentElement: HTMLElement;
+ _currentElementIndex = null;
+
+ static Target: NullstackFunctionalComponent<DropdownTargetProps> = ({
+ Dropdown,
+ children,
+ }: NullstackClientContext<DropdownTargetProps>) => {
+ const child = children.map((childItem: CustonChildrenTarget) => {
+ childItem.attributes.ref = { object: Dropdown, property: "_targetRef" };
+ childItem.attributes.onclick = Dropdown.visible ? Dropdown._hide : Dropdown._show;
+
+ return childItem;
+ });
+
+ return child;
+ };
+
+ static Container: NullstackFunctionalComponent<DropdownContainerProps> = ({
+ Dropdown,
+ children,
+ class: klass,
+ theme,
+ }: NullstackClientContext<DropdownContainerProps>) => {
+ const { container } = tc(baseDropdown, theme?.dropdown)();
+ const child = children.map((item: CustonChildrenItem, index) => {
+ item.attributes.Dropdown = Dropdown;
+ item.attributes.index = `${index}`;
+ return item;
+ });
+ return (
+ <div
+ ref={Dropdown._dropdownRef}
+ id="dropdown-container"
+ role="presentation"
+ class={container({ class: klass })}
+ >
+ {child}
+ </div>
+ );
+ };
+
+ static Item: NullstackFunctionalComponent<DropdownItemProps> = ({
+ Dropdown,
+ children,
+ class: klass,
+ href,
+ index,
+ onclick,
+ theme,
+ title,
+ type = "option",
+ }: NullstackClientContext<DropdownItemProps>) => {
+ const { item } = tc(baseDropdown, theme?.dropdown)();
+ return (
+ <element
+ tag={type == "option" ? "a" : "div"}
+ role="none"
+ aria-orientation="vertical"
+ title={title}
+ href={type == "option" ? href : undefined}
+ aria-labelledby="menu-button"
+ tabindex="0"
+ class={item({
+ class: `${klass} dropdown-item`,
+ type,
+ })}
+ onclick={[
+ () => Dropdown._selected(index),
+ () => {
+ if (onclick) {
+ onclick(index);
+ }
+ },
+ ]}
+ >
+ {children}
+ </element>
+ );
+ };
+
+ _elementsRef() {
+ return this._dropdownRef.querySelectorAll<HTMLTableRowElement>(".dropdown-item");
+ }
+
+ _show() {
+ this._dropdownRef.style.display = "block";
+ this.updatePosition();
+ this.visible = true;
+ }
+
+ _hide() {
+ this._deactiveElement(this._currentElement);
+ this._currentElement = null;
+ this._currentElementIndex = null;
+ this._dropdownRef.style.display = "none";
+ this.visible = false;
+ }
+
+ _selected(index: number) {
+ this._updateCurrentElement(index);
+ this._hide();
+ }
+
+ _outsideClick(event: MouseEvent) {
+ const target = event.target as HTMLElement;
+ if (event?.target) {
+ if (!this._dropdownRef.contains(target) && !this._targetRef.contains(target)) {
+ this._hide();
+ }
+ }
+ }
+
+ _activeClass() {
+ // TODO: implement dynamic change for theme oevrlay
+ return baseDropdown.slots.item.variants.active.true;
+ }
+
+ _activeElement(element?: HTMLElement) {
+ if (element) {
+ element.classList.add(this._activeClass());
+ }
+ }
+
+ _deactiveElement(element?: HTMLElement) {
+ if (element) {
+ element.classList.remove(this._activeClass());
+ }
+ }
+
+ _onArrowDown() {
+ let index = this._currentElementIndex;
+ if (index === null || index + 1 >= this._elementsRef().length) {
+ index = 0;
+ } else {
+ index = index + 1;
+ }
+ this._updateCurrentElement(index);
+ }
+
+ _onArrowUp() {
+ let index = this._currentElementIndex;
+ if (index == 0) {
+ index = this._elementsRef().length - 1;
+ } else {
+ index = index - 1;
+ }
+ this._updateCurrentElement(index);
+ }
+
+ _updateCurrentElement(index: number) {
+ this._deactiveElement(this._currentElement);
+ this._currentElement = this._elementsRef()[index];
+ this._currentElementIndex = index;
+ }
+ _onKeyDown(event: KeyboardEvent) {
+ const key = event.key; // Preferred way to get the key value
+ if (this.visible) {
+ switch (key) {
+ case "Enter":
+ event.preventDefault();
+ if (this._currentElement) {
+ this._activeElement(this._currentElement);
+ if (this._currentElement?.click) {
+ this._currentElement.click();
+ }
+ }
+ break;
+ case "ArrowDown":
+ event.preventDefault();
+ this._onArrowDown();
+ break;
+ case "ArrowUp":
+ event.preventDefault();
+ this._onArrowUp();
+ break;
+ }
+ this._activeElement(this._currentElement);
+ }
+ }
+ updatePosition(context?: NullstackClientContext<DropdownProps>) {
+ computePosition(this._targetRef, this._dropdownRef, {
+ placement: context.placement || "top",
+ middleware: [offset(context.offset || 8), flip(), shift()],
+ }).then(({ x, y }) => {
+ Object.assign(this._targetRef.style, {
+ left: `${x}px`,
+ top: `${y}px`,
+ });
+ });
+ }
+ hydrate() {
+ document.addEventListener("click", this._outsideClick);
+ document.addEventListener("keydown", this._onKeyDown);
+ }
+
+ terminate() {
+ document.removeEventListener("click", this._outsideClick);
+ document.removeEventListener("keydown", this._onKeyDown);
+ this._currentElementIndex = null;
+ this._currentElement = null;
+ }
+
+ render({ children, class: klass, theme }: NullstackClientContext<DropdownProps>) {
+ children = children?.map((child: CustonChildren) => {
+ child.attributes.Dropdown = this;
+ return child;
+ });
+
+ const { wrapper } = tc(baseDropdown, theme?.dropdown)();
+ return (
+ <div role="menu" id="menu" class={wrapper({ class: klass })}>
+ {children}
+ </div>
+ );
+ }
+}
+
+export default Dropdown;

lib/index.ts

@@ -6,6 +6,7 @@ export { default as Button } from "./components/Button";
 export { default as CopyButton } from "./components/CopyButton";
 export { default as ButtonGroup } from "./components/ButtonGroup";
 export { default as Divider } from "./components/Divider";
+export { default as Dropdown } from "./components/Dropdown";
 export { default as Modal } from "./components/Modal";
 export { default as Tabs } from "./components/Tabs";
 export { default as Table } from "./components/Table";

lib/theme.ts

@@ -22,6 +22,7 @@ export { baseInput as input } from "./components/forms/Input";
 export { baseTitle as title } from "./components/Title";
 export { baseToggle as toggle } from "./components/forms/Toggle";
 export { baseTooltip as tooltip } from "./components/Tooltip";
+export { baseDropdown as dropdown } from "./components/Dropdown";
 export { basePopover as popover } from "./components/Popover";
 export { basePagination as pagination } from "./components/Pagination";
 export { baseNotifications as notifications } from "./components/Notifications";

src/pages/components/Dropdown/Dropdown.mdx

@@ -0,0 +1,65 @@
+import { theme } from "nullwind";
+import Preview from "./Preview.jsx";
+
+import { Meta, Demo, ThemePreview } from "~/components";
+
+<Meta title="Dropdown" description="Dropdown component render a toggleable list" />
+
+# Divider
+
+Dropdown component renders a toggleable , contextual overlay for diplay a list of itens .
+
+You can add eveent click for every item withc `onclick` function
+
+Also you can set `href` props for linkable element
+
+## Usage
+
+<Demo
+ component={Preview}
+ template={(props) => `
+ import Nullstack from "nullstack";
+
+ import { Button, Dropdown } from "nullwind";
+
+ class Preview extends Nullstack {
+
+ render() {
+ return (
+ <Dropdown>
+ <Dropdown.Target>
+ <Button class="bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
+ <spam>Teste</spam>
+ <svg
+ class="-mr-1 h-5 w-5 text-gray-400"
+ viewBox="0 0 20 20"
+ fill="currentColor"
+ aria-hidden="true"
+ >
+ <path
+ fill-rule="evenodd"
+ d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
+ clip-rule="evenodd"
+ />
+ </svg>
+ </Button>
+ </Dropdown.Target>
+ <Dropdown.Container>
+ <Dropdown.Item href="https://google.com">
+ <p href="https://google.com">Text</p>
+ </Dropdown.Item>
+ <Dropdown.Item>Text 2</Dropdown.Item>
+ <Dropdown.Item onclick={(index) => console.log("get index for element: "+ index)}>click event</Dropdown.Item>
+ <Dropdown.Item type="none">
+ <Button color="danger" type="submit" role="menuitem">Sign out</Button>
+ </Dropdown.Item>
+ </Dropdown.Container>
+ </Dropdown>
+ );
+ }
+ }
+
+ export default Preview;
+`}/>
+
+