@purpurds/listbox 0.0.1

package/dist/styles.css

@@ -0,0 +1 @@
+._purpur-listbox_qhoi7_1{padding:0;margin:0;list-style-type:none;border:var(--purpur-border-width-xs) solid var(--purpur-color-border-interactive-subtle);border-radius:var(--purpur-border-radius-sm);color:var(--purpur-color-brand-off-black);width:100%;background-color:var(--purpur-color-brand-white);max-height:calc(2 * var(--purpur-spacing-1200));overflow-y:scroll;box-sizing:border-box}._purpur-listbox-item_qhoi7_15{list-style:none;padding:var(--purpur-spacing-150);border:var(--purpur-border-width-xs) solid transparent;cursor:pointer;max-width:100%;word-break:break-word;transition:background var(--purpur-motion-duration-150) ease;display:flex;justify-content:space-between;align-items:center;gap:var(--purpur-spacing-100)}@media (hover: hover) and (pointer: fine){._purpur-listbox-item--hovered_qhoi7_29{background:var(--purpur-color-background-interactive-transparent-hover)}}._purpur-listbox-item--highlighted_qhoi7_37{outline:var(--purpur-border-width-sm) solid var(--purpur-color-border-interactive-focus);outline-offset:calc(-1 * var(--purpur-border-width-sm))}._purpur-listbox-item_qhoi7_15:active:not(._purpur-listbox-item--noninteractive_qhoi7_41){background:var(--purpur-color-background-interactive-transparent-active)}._purpur-listbox-item--disabled_qhoi7_44{color:var(--purpur-color-text-weak);cursor:default}._purpur-listbox-item--noninteractive_qhoi7_41{cursor:default}._purpur-listbox-item__icon_qhoi7_51{color:var(--purpur-color-text-interactive-selected)}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@purpurds/listbox",
+  "version": "0.0.1",
+  "license": "AGPL-3.0-only",
+  "main": "./dist/listbox.cjs.js",
+  "types": "./dist/listbox.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/listbox.cjs.js",
+      "types": "./dist/listbox.d.ts",
+      "default": "./dist/listbox.es.js"
+    },
+    "./styles": "./dist/styles.css"
+  },
+  "source": "src/listbox.tsx",
+  "dependencies": {
+    "classnames": "~2.5.0",
+    "@purpurds/icon": "5.14.0",
+    "@purpurds/paragraph": "5.14.0",
+    "@purpurds/tokens": "5.14.0"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "~1.10.0",
+    "@storybook/blocks": "^8.2.6",
+    "@storybook/react": "^8.2.6",
+    "@telia/base-rig": "~8.2.0",
+    "@telia/react-rig": "~3.2.0",
+    "@testing-library/dom": "~9.3.3",
+    "@testing-library/jest-dom": "~6.4.0",
+    "@testing-library/react": "~14.3.0",
+    "@types/node": "20.12.12",
+    "@types/react-dom": "^18.3.0",
+    "@types/react": "^18.3.3",
+    "eslint-plugin-testing-library": "~6.2.0",
+    "eslint": "^8.57.0",
+    "jsdom": "~22.1.0",
+    "lint-staged": "~10.5.3",
+    "prettier": "~2.8.8",
+    "react-dom": "^18.3.1",
+    "react": "^18.3.1",
+    "storybook": "^8.2.6",
+    "typescript": "^5.5.4",
+    "vite": "5.3.4",
+    "vitest": "~1.5.0",
+    "@purpurds/component-rig": "1.0.0"
+  },
+  "scripts": {
+    "build:dev": "vite",
+    "build:watch": "vite build --watch",
+    "build": "vite build",
+    "ci:build": "rushx build",
+    "coverage": "vitest run --coverage",
+    "lint:fix": "eslint . --fix",
+    "lint": "lint-staged --no-stash 2>&1",
+    "sbdev": "rush sbdev",
+    "test:unit": "vitest run --passWithNoTests",
+    "test:watch": "vitest --watch",
+    "test": "rushx test:unit",
+    "typecheck": "tsc -p ./tsconfig.json"
+  }
+}

package/src/global.d.ts

@@ -0,0 +1,4 @@
+declare module "*.scss" {
+  const styles: { [className: string]: string };
+  export default styles;
+}

package/src/listbox-item.tsx

@@ -0,0 +1,70 @@
+import type {
+  ComponentPropsWithRef,
+  ForwardedRef,
+  ReactElement,
+  ReactNode,
+  ReactPortal,
+} from "react";
+import React, { forwardRef, isValidElement } from "react";
+import { IconCheckmark } from "@purpurds/icon";
+import { Paragraph } from "@purpurds/paragraph";
+import c from "classnames/bind";
+
+import styles from "./listbox.module.scss";
+
+const cx = c.bind(styles);
+
+const rootClassName = "purpur-listbox";
+
+export type ListboxItemProps = Omit<ComponentPropsWithRef<"li">, "role"> & {
+  "data-testid"?: string;
+  highlighted?: boolean;
+  hovered?: boolean;
+  key?: string;
+  selected?: boolean;
+  disabled?: boolean;
+  noninteractive?: boolean;
+};
+
+export const ListboxItem = forwardRef(
+  (props: ListboxItemProps, ref: ForwardedRef<HTMLLIElement>) => {
+    const { disabled, highlighted, hovered, selected, children, noninteractive, ...liProps } =
+      props;
+    const className = cx(`${rootClassName}-item`, liProps.className, {
+      [`${rootClassName}-item--highlighted`]: highlighted,
+      [`${rootClassName}-item--selected`]: selected,
+      [`${rootClassName}-item--hovered`]: hovered,
+      [`${rootClassName}-item--disabled`]: disabled,
+      [`${rootClassName}-item--noninteractive`]: noninteractive,
+    });
+
+    return (
+      <li
+        {...liProps}
+        ref={ref}
+        className={className}
+        aria-selected={!!selected}
+        role="option"
+        aria-disabled={!!disabled}
+      >
+        {typeof children === "string" ? <Paragraph>{children}</Paragraph> : children}
+        {selected && <IconCheckmark size="xs" className={cx(`${rootClassName}-item__icon`)} />}
+      </li>
+    );
+  }
+);
+
+export const isListboxItem = (
+  child:
+    | ReactElement
+    | Iterable<ReactNode>
+    | ReactPortal
+    | string
+    | number
+    | boolean
+    | null
+    | undefined
+): child is ReactElement<ListboxItemProps> =>
+  isValidElement<ListboxItemProps>(child) && child?.type === ListboxItem;
+
+ListboxItem.displayName = "ListBoxItem";

package/src/listbox.module.scss

@@ -0,0 +1,60 @@
+.purpur-listbox {
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  list-style-type: none;
+  border: var(--purpur-border-width-xs) solid var(--purpur-color-border-interactive-subtle);
+  border-radius: var(--purpur-border-radius-sm);
+  color: var(--purpur-color-brand-off-black);
+  width: 100%;
+  background-color: var(--purpur-color-brand-white);
+  max-height: calc(2 * var(--purpur-spacing-1200));
+  overflow-y: scroll;
+  box-sizing: border-box;
+
+  &-item {
+    $listboxItemRoot: &;
+
+    cursor: pointer;
+    list-style: none;
+    padding: var(--purpur-spacing-150);
+    border: var(--purpur-border-width-xs) solid transparent;
+    cursor: pointer;
+    max-width: 100%;
+    word-break: break-word;
+    transition: background var(--purpur-motion-duration-150) ease;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--purpur-spacing-100);
+
+    &--hovered {
+      /* Enable only on non-touch devices */
+      @media (hover: hover) and (pointer: fine) {
+        background: var(--purpur-color-background-interactive-transparent-hover);
+      }
+    }
+
+    &--highlighted {
+      outline: var(--purpur-border-width-sm) solid var(--purpur-color-border-interactive-focus);
+      outline-offset: calc(-1 * var(--purpur-border-width-sm));
+    }
+
+    &:active:not(#{$listboxItemRoot}--noninteractive) {
+      background: var(--purpur-color-background-interactive-transparent-active);
+    }
+
+    &--disabled {
+      color: var(--purpur-color-text-weak);
+      cursor: default;
+    }
+
+    &--noninteractive {
+      cursor: default;
+    }
+
+    &__icon {
+      color: var(--purpur-color-text-interactive-selected);
+    }
+  }
+}

package/src/listbox.stories.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Listbox } from "./listbox";
+
+const meta = {
+  title: "Components/Listbox",
+  component: Listbox,
+  subcomponents: {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    //@ts-ignore
+    "Listbox.Item": Listbox.Item,
+  },
+  parameters: {
+    design: [
+      {
+        name: "Listbox",
+        type: "figma",
+        url: "https://www.figma.com/design/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library-%26-guidelines?node-id=47667-13626",
+      },
+    ],
+  },
+  argTypes: {
+    ["aria-label"]: {
+      control: { type: "text" },
+      table: { type: { summary: "string" } },
+    },
+    ["aria-expanded"]: { control: { type: "boolean" }, table: { type: { summary: "boolean" } } },
+  },
+} satisfies Meta<typeof Listbox>;
+
+export default meta;
+type Story = StoryObj<typeof Listbox>;
+
+export const Showcase: Story = {
+  args: {
+    children: ["orange", "mocka", "frappuccino"],
+  },
+  render: ({ children, ...args }) => (
+    <Listbox {...args} style={{ width: "200px" }}>
+      {children instanceof Array &&
+        children?.map((child: string) => <Listbox.Item key={child}>{child}</Listbox.Item>)}
+    </Listbox>
+  ),
+};

package/src/listbox.test.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { Listbox } from "./listbox";
+
+expect.extend(matchers);
+
+describe("Listbox", () => {
+  it("should have tests", () => {
+    render(
+      <Listbox aria-expanded={false} aria-label="order">
+        Some text content
+      </Listbox>
+    );
+    expect(screen.getByRole("listbox")).toBeVisible();
+  });
+});

package/src/listbox.tsx

@@ -0,0 +1,44 @@
+import type {
+  ComponentPropsWithRef,
+  ForwardedRef,
+  ForwardRefExoticComponent,
+  PropsWithoutRef,
+} from "react";
+import React, { Children, forwardRef } from "react";
+import c from "classnames/bind";
+
+import styles from "./listbox.module.scss";
+import { isListboxItem, ListboxItem } from "./listbox-item";
+
+const cx = c.bind(styles);
+
+const rootClassName = "purpur-listbox";
+
+export type ListboxProps = Omit<ComponentPropsWithRef<"ul">, "role"> & {
+  "data-testid"?: string;
+  "aria-label": NonNullable<ComponentPropsWithRef<"ul">["aria-label"]>;
+  "aria-expanded": NonNullable<ComponentPropsWithRef<"ul">["aria-expanded"]>;
+};
+
+type ListboxStatic = {
+  Item: typeof ListboxItem;
+};
+
+type ListboxComponent = ForwardRefExoticComponent<PropsWithoutRef<ListboxProps>> & ListboxStatic;
+
+export const Listbox = forwardRef(
+  ({ children, ...listboxProps }: ListboxProps, ref: ForwardedRef<HTMLUListElement>) => (
+    <ul
+      {...listboxProps}
+      ref={ref}
+      className={cx(rootClassName, listboxProps.className)}
+      role="listbox"
+    >
+      {Children.toArray(children).filter(isListboxItem)}
+    </ul>
+  )
+) as ListboxComponent;
+
+export type { ListboxItemProps } from "./listbox-item";
+Listbox.Item = ListboxItem;
+Listbox.displayName = "ListBox";