@vygruppen/spor-react 1.3.4 → 2.0.0

package/src/input/InfoSelect.tsx

@@ -0,0 +1,209 @@
+import {
+  Box,
+  chakra,
+  ResponsiveValue,
+  useMultiStyleConfig,
+} from "@chakra-ui/react";
+import {
+  DropdownDownFill24Icon,
+  DropdownUpFill24Icon,
+} from "@vygruppen/spor-icon-react";
+import React, { useRef } from "react";
+import { HiddenSelect, useButton, useSelect } from "react-aria";
+import { useSelectState } from "react-stately";
+import { createTexts, useTranslation } from "../";
+import { ListBox } from "./ListBox";
+import { Popover } from "./Popover";
+
+type InfoSelectProps = {
+  /**
+   * Either a render function accepting an item, and returning a <SelectItem />,
+   * or a list of <SelectItem />s.
+   *
+   * Render function example:
+   * ```tsx
+   * <Select items={items}>
+   *   {(item) => (
+   *     <SelectItem key={item.value} value={item.value}>
+   *       {item.label}
+   *     </SelectItem>
+   *   )}
+   * </Select>
+   * ```
+   *
+   * For this to work, the members in `items` need either a `key`
+   * or an `id` property.
+   *
+   * List of <SelectItem />s example:
+   * ```tsx
+   * <Select label="Choose a color">
+   *   <SelectItem>Green</SelectItem>
+   *   <SelectItem>Blue</SelectItem>
+   *   <SelectItem>Yellow</SelectItem>
+   * </Select>
+   * ```
+   **/
+  children: any;
+  /**
+   * The items to render
+   *
+   * If you have a dynamic list of items you want to display, you should use this prop instead of mapping them out. This is a performance optimization.
+   *
+   * You can render each item in a render function, passed in as `children`:
+   *
+   * ```tsx
+   * <Select items={items}>
+   *   {(item) => <div>{item.someProp}</div>}
+   * </Select>
+   * ```
+   */
+  items: any[];
+  /** Callback for when something is selected */
+  onChange?: (value: string | number) => void;
+  value?: string | number;
+  defaultValue?: string | number;
+  /** Controlled open state
+   *
+   * Useful if you want to control the open state from outside the component.
+   */
+  isOpen?: boolean;
+  /** Callback for when the open state of the select box changes.
+   *
+   * Useful if you want to control the open state from outside the component.
+   */
+  onOpenChange?: (isOpen: boolean) => void;
+  /** The label describing the choice */
+  label: string;
+  /** The name of the select element */
+  name?: string;
+  /**
+   * What's shown if nothing is selected.
+   *
+   * Defaults to a localized version of "choose an option"
+   */
+  placeholder?: string;
+  /** The width of the select box.
+   *
+   * Defaults to the width of the selected content
+   */
+  width?: ResponsiveValue<string | number>;
+  isDisabled?: boolean;
+  /** A list of disabled keys.
+   *
+   * ```tsx
+   * <Select label="Choose a color" disabledKeys={["blue", "yellow"]}>
+   *   <SelectItem key="green">Green</SelectItem>
+   *   <SelectItem key="blue">Blue</SelectItem>
+   *   <SelectItem key="yellow">Yellow</SelectItem>
+   * </Select>
+   * ```
+   **/
+  disabledKeys?: string[];
+};
+/**
+ * A styled select component.
+ *
+ * This select component lets you choose between a list of options.
+ * Compared to the NativeSelect component, the InfoSelect component lets you style the options however you'd like – including both text, icons and other elements.
+ *
+ * ```tsx
+ * <InfoSelect label="Choose a color">
+ *   <SelectOption>Blue</SelectOption>
+ *   <SelectOption>Yellow</SelectOption>
+ *   <SelectOption>Green</SelectOption>
+ * </InfoSelect>
+ * ```
+ *
+ * Alternatvely, you can pass the items into the `items` prop, and create a render function for the items.
+ *
+ * ```tsx
+ * <InfoSelect
+ *   label="Choose a color"
+ *   items={[
+ *     { value: "#f00", label: "Red" },
+ *     { value: "#0f0", label: "Green" },
+ *     { value: "#00f", label: "Blue" },
+ *   ]}
+ * >
+ *   {(item) => (
+ *     <SelectItem key={item.key}>
+ *       {item.label}
+ *     </SelectItem>
+ *   )}
+ * </InfoSelect>
+ * ```
+ *
+ * @see https://spor.vy.no/komponenter/info-select
+ */
+export const InfoSelect = ({
+  placeholder,
+  width = "100%",
+  onChange,
+  value,
+  defaultValue,
+  ...props
+}: InfoSelectProps) => {
+  const renamedProps = {
+    onSelectionChange: onChange,
+    selectedKey: value,
+    defaultSelectedKey: defaultValue,
+    ...props,
+  };
+  const state = useSelectState(renamedProps);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const { labelProps, triggerProps, valueProps, menuProps } = useSelect(
+    renamedProps,
+    state,
+    triggerRef
+  );
+
+  const styles = useMultiStyleConfig("InfoSelect", { isOpen: state.isOpen });
+  const { buttonProps } = useButton(triggerProps, triggerRef);
+  const { t } = useTranslation();
+
+  return (
+    <Box sx={styles.container}>
+      <chakra.div {...labelProps} sx={styles.label}>
+        {props.label}
+      </chakra.div>
+      <HiddenSelect
+        state={state}
+        triggerRef={triggerRef}
+        label={props.label}
+        name={props.name}
+      />
+
+      <chakra.button
+        type="button"
+        ref={triggerRef}
+        sx={styles.button}
+        {...buttonProps}
+        width={width}
+      >
+        <Box {...valueProps}>
+          {state.selectedItem
+            ? state.selectedItem.textValue ?? state.selectedItem.rendered
+            : placeholder ?? t(texts.selectAnOption)}
+        </Box>
+        <Box sx={styles.arrowIcon}>
+          {state.isOpen ? <DropdownUpFill24Icon /> : <DropdownDownFill24Icon />}
+        </Box>
+      </chakra.button>
+
+      {state.isOpen && (
+        <Popover state={state} triggerRef={triggerRef}>
+          <ListBox listBoxOptions={menuProps} state={state} borderBottomRadius="sm" />
+        </Popover>
+      )}
+    </Box>
+  );
+};
+
+const texts = createTexts({
+  selectAnOption: {
+    nb: "Velg et alternativ",
+    nn: "Velg eit alternativ",
+    sv: "Välj ett alternativ",
+    en: "Choose an option",
+  },
+});

package/src/input/Input.tsx

@@ -0,0 +1,59 @@
+import {
+  FormLabel,
+  forwardRef,
+  Input as ChakraInput,
+  InputGroup,
+  InputLeftElement,
+  InputProps as ChakraInputProps,
+  InputRightElement,
+  useFormControlContext,
+} from "@chakra-ui/react";
+import React, { useId } from "react";
+
+export type InputProps = Exclude<ChakraInputProps, "variant" | "size"> & {
+  /** The input's label */
+  label: string;
+  /** Icon that shows up to the left */
+  leftIcon?: React.ReactNode;
+  /** Icon that shows up to the right */
+  rightIcon?: React.ReactNode;
+};
+/**
+ * Inputs let you enter text or other data.
+ *
+ * You need to specify the label as a prop, since it doubles as the placeholder.
+ *
+ * ```tsx
+ * <Input label="E-mail" />
+ * ```
+ *
+ * You can also add icons to the left and right of the input. Please use the 24 px icons for this.
+ *
+ * ```tsx
+ * <Input label="E-mail" leftIcon={<EmailOutline24Icon />} />
+ * ```
+ */
+export const Input = forwardRef<InputProps, "input">(
+  ({ label, leftIcon, rightIcon, id, ...props }, ref) => {
+    const formControlProps = useFormControlContext();
+    const fallbackId = `input-${useId()}`;
+    const inputId = id ?? formControlProps?.id ?? fallbackId;
+    return (
+      <InputGroup position="relative">
+        {leftIcon && <InputLeftElement>{leftIcon}</InputLeftElement>}
+        <ChakraInput
+          pl={leftIcon ? 7 : undefined}
+          pr={rightIcon ? 7 : undefined}
+          {...props}
+          id={inputId}
+          ref={ref}
+          placeholder=" " // This is needed to make the label work as expected
+        />
+        <FormLabel htmlFor={inputId} pointerEvents="none">
+          {label}
+        </FormLabel>
+        {rightIcon && <InputRightElement>{rightIcon}</InputRightElement>}
+      </InputGroup>
+    );
+  }
+);

package/src/input/InputElement.tsx

@@ -0,0 +1,45 @@
+import {
+  As,
+  forwardRef,
+  InputElementProps as ChakraInputElementProps,
+  InputLeftElement as ChakraInputLeftElement,
+  InputRightElement as ChakraInputRightElement,
+} from "@chakra-ui/react";
+import React from "react";
+
+export type InputElementProps = ChakraInputElementProps;
+/**
+ * Places an element inside the left side of an input field.
+ *
+ * Must be used inside of an `InputGroup` component, and before the `Input` component.
+ *
+ * ```tsx
+ * <FormControl>
+ *   <InputGroup>
+ *     <InputLeftElement>🔎</InputLeftElement>
+ *     <Input label="Search" />
+ *   </InputGroup>
+ * </FormControl>
+ * ```
+ */
+export const InputLeftElement = forwardRef<InputElementProps, "div">(
+  (props, ref) => <ChakraInputLeftElement {...props} ref={ref} />
+);
+
+/**
+ * Places an element inside the right side of an input field.
+ *
+ * Must be used inside of an `InputGroup` component, and after the `Input` component.
+ *
+ * ```tsx
+ * <FormControl>
+ *   <InputGroup>
+ *     <Input label="Search" />
+ *     <InputRightElement>🔎</InputRightElement>
+ *   </InputGroup>
+ * </FormControl>
+ * ```
+ */
+export const InputRightElement = forwardRef<InputElementProps, "div">(
+  (props, ref) => <ChakraInputRightElement {...props} ref={ref} />
+);

package/src/input/ListBox.tsx

@@ -0,0 +1,123 @@
+import {
+  Box,
+  BoxProps,
+  chakra,
+  forwardRef,
+  useMultiStyleConfig,
+} from "@chakra-ui/react";
+import type { Node } from "@react-types/shared";
+import React, { RefObject, useContext, useRef } from "react";
+import type { AriaListBoxOptions } from "react-aria";
+import { useListBox, useOption } from "react-aria";
+import type { ListState, SelectState } from "react-stately";
+
+type ListBoxProps = {
+  listBoxRef?: React.RefObject<HTMLUListElement>;
+  listBoxOptions: AriaListBoxOptions<unknown>;
+  state: SelectState<unknown> | ListState<unknown>;
+} & BoxProps;
+
+type OptionProps = {
+  item: Node<unknown>;
+  state: SelectState<any> | ListState<unknown>;
+};
+
+/**
+ * A listbox component.
+ *
+ * This component is currently only thought to be used with the `InfoSelect` component. Usage outside of that is not documented, nor intended.
+ */
+export const ListBox = forwardRef<ListBoxProps, "ul">((props, ref) => {
+  const { state, listBoxOptions, ...rest } = props;
+  const styles = useMultiStyleConfig("ListBox", {});
+  const internalRef = useRef<HTMLUListElement>(null);
+  const listBoxRef = (ref ?? internalRef) as RefObject<HTMLUListElement>;
+  const { listBoxProps } = useListBox(listBoxOptions, state, listBoxRef);
+
+  return (
+    <Box
+      as="ul"
+      {...listBoxProps}
+      sx={styles.container}
+      ref={listBoxRef as RefObject<any>}
+      {...rest}
+    >
+      {Array.from(state.collection).map((item) => (
+        <Option key={item.key} item={item} state={state} />
+      ))}
+    </Box>
+  );
+});
+
+type OptionContextValue = {
+  labelProps: React.HTMLAttributes<HTMLElement>;
+  descriptionProps: React.HTMLAttributes<HTMLElement>;
+};
+
+const OptionContext = React.createContext<OptionContextValue>({
+  labelProps: {},
+  descriptionProps: {},
+});
+const useOptionContext = () => {
+  return useContext(OptionContext);
+};
+
+const Option = ({ item, state }: OptionProps) => {
+  const ref = useRef<HTMLLIElement>(null);
+  const styles = useMultiStyleConfig("ListBox", {});
+  const { optionProps, labelProps, descriptionProps } = useOption(
+    { key: item.key },
+    state,
+    ref
+  );
+
+  return (
+    <chakra.li {...optionProps} ref={ref} sx={styles.item}>
+      <OptionContext.Provider value={{ labelProps, descriptionProps }}>
+        {item.rendered}
+      </OptionContext.Provider>
+    </chakra.li>
+  );
+};
+
+// The Label and Description components will be used within a <SelectItem>.
+// They receive props from the OptionContext defined above.
+// This ensures that the option is ARIA labelled by the label, and
+// described by the description, which makes for better announcements
+// for screen reader users.
+
+/**
+ * Renders a label for a SelectItem.
+ *
+ * Useful if you want to render a custom SelectItem - especially if it has a description.
+ */
+export function SelectItemLabel({ children }: { children: React.ReactNode }) {
+  let { labelProps } = useOptionContext();
+  const styles = useMultiStyleConfig("ListBox", {});
+  return (
+    <Box {...labelProps} sx={styles.label}>
+      {children}
+    </Box>
+  );
+}
+
+/**
+ * Renders a description for a SelectItem.
+ *
+ * Useful if you want to render a custom SelectItem with more than just a label.
+ */
+export function SelectItemDescription({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  let { descriptionProps } = useOptionContext();
+  const styles = useMultiStyleConfig("ListBox", {});
+  return (
+    <Box {...descriptionProps} sx={styles.description}>
+      {children}
+    </Box>
+  );
+}
+
+export { Item as SelectItem } from "react-stately";

package/src/input/NativeSelect.tsx

@@ -0,0 +1,38 @@
+import {
+  Select as ChakraSelect,
+  SelectProps as ChakraSelectProps,
+  forwardRef,
+  useMultiStyleConfig,
+} from "@chakra-ui/react";
+import React from "react";
+import { FormControl, FormLabel } from ".";
+
+export type NativeSelectProps = Exclude<
+  ChakraSelectProps,
+  "colorScheme" | "variant" | "size"
+> & { label?: string };
+/**
+ * Selects let you choose between several options
+ *
+ * You should consider only using the Select component when you have more than  4 options. Otherwise, you should use the `<Radio>` component.
+ *
+ * ```tsx
+ * <NativeSelect label="Select level of luxury">
+ *  <option>No luxury</option>
+ *  <option>Some luxury</option>
+ *  <option>Lots of luxury</option>
+ *  <option>I'm rich</option>
+ * </NativeSelect>
+ * ```
+ */
+export const NativeSelect = forwardRef<NativeSelectProps, "select">(
+  ({ label, ...props }, ref) => {
+    const styles = useMultiStyleConfig("Select", props);
+    return (
+      <FormControl>
+        <ChakraSelect {...props} rootProps={{ __css: styles.root }} ref={ref} />
+        {label && <FormLabel>{label}</FormLabel>}
+      </FormControl>
+    );
+  }
+);

package/src/input/PasswordInput.tsx

@@ -0,0 +1,70 @@
+import {
+  Button,
+  Input as ChakraInput,
+  forwardRef,
+  useDisclosure,
+  useFormControlContext,
+} from "@chakra-ui/react";
+import React, { useId } from "react";
+import {
+  FormLabel,
+  InputGroup,
+  InputLeftElement,
+  InputProps,
+  InputRightElement,
+} from ".";
+import { createTexts, useTranslation } from "..";
+
+export type PasswordInputProps = InputProps;
+export const PasswordInput = forwardRef<PasswordInputProps, "input">(
+  ({ leftIcon, id, label, ...props }, ref) => {
+    const { isOpen: isShowingPassword, onToggle } = useDisclosure();
+    const { t } = useTranslation();
+    const formControlProps = useFormControlContext();
+    const autoGeneratedId = `password-input-${useId()}`;
+    const inputId = id ?? formControlProps?.id ?? autoGeneratedId;
+    return (
+      <InputGroup position="relative">
+        {leftIcon && <InputLeftElement>{leftIcon}</InputLeftElement>}
+        <ChakraInput
+          {...props}
+          id={inputId}
+          placeholder=" " // This is needed to make the label work as expected
+          type={isShowingPassword ? "text" : "password"}
+          paddingRight={10}
+          paddingLeft={leftIcon ? 7 : undefined}
+          ref={ref}
+        />
+        <FormLabel htmlFor={inputId} pointerEvents="none">
+          {label}
+        </FormLabel>
+        <InputRightElement width="fit-content">
+          <Button
+            variant="ghost"
+            type="button"
+            onClick={onToggle}
+            borderRadius="sm"
+            mr={1}
+          >
+            {isShowingPassword ? t(texts.hidePassword) : t(texts.showPassword)}
+          </Button>
+        </InputRightElement>
+      </InputGroup>
+    );
+  }
+);
+
+const texts = createTexts({
+  showPassword: {
+    nb: "Vis",
+    nn: "Vis",
+    en: "Show",
+    sv: "Visa",
+  },
+  hidePassword: {
+    nb: "Skjul",
+    nn: "Skjul",
+    en: "Hide",
+    sv: "Dölj",
+  },
+});

package/src/input/Popover.tsx

@@ -0,0 +1,70 @@
+import { Box } from "@chakra-ui/react";
+import React, { useRef } from "react";
+import {
+  AriaPopoverProps,
+  DismissButton,
+  Overlay,
+  usePopover,
+} from "react-aria";
+import { OverlayTriggerState } from "react-stately";
+
+type PopoverProps = {
+  /** The content to be shown as a popover */
+  children: React.ReactNode;
+  /** The internal state of the overlay trigger element.
+   *
+   * Get this from the useOverlayTriggerState hook or similar.
+   */
+  state: OverlayTriggerState;
+  /** The reference to the trigger button for this overlay */
+  triggerRef: React.RefObject<HTMLButtonElement>;
+  /** The offset in pixels between the bottom of the trigger and the top of the popover */
+  offset?: number;
+  /** The cross-axis offset (left or right) of the popover, compared to the center of the trigger element  */
+  crossOffset?: number;
+  /** The position of the popover, relative to the popover.
+   *
+   * Defaults to "bottom"
+   */
+  placement?: AriaPopoverProps["placement"];
+};
+/**
+ * Internal popover component.
+ *
+ * Used to render accessible popover content, like a  dropdown menu or a card select. Should not be used directly, but as a part of Spor components.
+ */
+export const Popover = ({
+  children,
+  state,
+  triggerRef,
+  offset = 0,
+  crossOffset = 0,
+  placement = "bottom",
+}: PopoverProps) => {
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const { popoverProps, underlayProps } = usePopover(
+    {
+      triggerRef,
+      popoverRef,
+      offset,
+      crossOffset,
+      placement,
+    },
+    state
+  );
+
+  return (
+    <Overlay>
+      <Box {...underlayProps} position="fixed" inset="0" />
+      <Box
+        {...popoverProps}
+        ref={popoverRef}
+        minWidth={triggerRef.current?.clientWidth ?? "auto"}
+      >
+        <DismissButton onDismiss={state.close} />
+        {children}
+        <DismissButton onDismiss={state.close} />
+      </Box>
+    </Overlay>
+  );
+};

package/src/input/Radio.tsx

@@ -0,0 +1,34 @@
+import {
+  As,
+  Radio as ChakraRadio,
+  RadioProps as ChakraRadioProps,
+  forwardRef,
+} from "@chakra-ui/react";
+import React from "react";
+
+export type RadioProps = Exclude<
+  ChakraRadioProps,
+  "colorScheme" | "size" | "variant"
+>;
+
+/**
+ * The humble radio button.
+ *
+ * Specify the label as `children` and the value as `value`.
+ *
+ * ```tsx
+ * <Radio value="#f00">Red</Radio>
+ * ```
+ *
+ * You typically want to place Radio components in a group with several other Radio components. You can do that with the `RadioGroup` component.
+ *
+ * ```tsx
+ * <RadioGroup name="ticket">
+ *   <Radio value="economy">Economy</Radio>
+ *   <Radio value="business">Business</Radio>
+ *   <Radio value="first-class">First Class</Radio>
+ * </RadioGroup>
+ */
+export const Radio = forwardRef<RadioProps, "input">((props, ref) => {
+  return <ChakraRadio {...props} ref={ref} />;
+});

package/src/input/RadioGroup.tsx

@@ -0,0 +1,47 @@
+import {
+  forwardRef,
+  RadioGroup as ChakraRadioGroup,
+  RadioGroupProps as ChakraRadioGroupProps,
+  Stack,
+  StackDirection,
+} from "@chakra-ui/react";
+import React from "react";
+
+export type RadioGroupProps = Exclude<
+  ChakraRadioGroupProps,
+  "colorScheme" | "size" | "variant"
+> & {
+  direction?: StackDirection;
+};
+/**
+ * Radio groups are used to group several radio buttons together.
+ *
+ * You can pass the common `name` prop to the `RadioGroup`, instead of to each `Radio` component.
+ *
+ * ```tsx
+ * <RadioGroup name="ticket">
+ *   <Radio>Economy</Radio>
+ *   <Radio>Business</Radio>
+ *   <Radio>First Class</Radio>
+ * </RadioGroup>
+ * ```
+ *
+ * By default, radio buttons show up horizontally. If you want them to show up vertically, please specify the `direction="column"` prop.
+ *
+ * ```tsx
+ * <RadioGroup name="ticket" direction="column">
+ *   <Radio>Economy</Radio>
+ *   <Radio>Business</Radio>
+ *   <Radio>First Class</Radio>
+ * </RadioGroup>
+ * ```
+ */
+export const RadioGroup = forwardRef<RadioGroupProps, "div">(
+  ({ children, direction = "row", ...rest }, ref) => {
+    return (
+      <ChakraRadioGroup {...rest} ref={ref}>
+        <Stack direction={direction}>{children}</Stack>
+      </ChakraRadioGroup>
+    );
+  }
+);