@pexip/components 19.1.2 → 19.2.0

package/api-docs/variables/List.mdx

@@ -0,0 +1,3 @@
+```ts
+const List: React.FC<React.ComponentProps<"div"> & object>;
+```

package/api-docs/variables/ListBoxLink.mdx

@@ -0,0 +1,3 @@
+```ts
+const ListBoxLink: React.FC<InteractiveElementProps & object>;
+```

package/api-docs/variables/ListLink.mdx

@@ -0,0 +1,3 @@
+```ts
+const ListLink: React.FC<InteractiveElementProps & object>;
+```

package/api-docs/variables/LoadingBox.mdx

@@ -0,0 +1,3 @@
+```ts
+const LoadingBox: React.FC<React.PropsWithChildren<LoadingBoxProps>>;
+```

package/api-docs/variables/Logo.mdx

@@ -0,0 +1,3 @@
+```ts
+const Logo: React.FC<React.ComponentProps<"img"> & object>;
+```

package/api-docs/variables/Menu.mdx

@@ -0,0 +1,13 @@
+```ts
+const Menu: React.FC<{
+  onPointerDownCapture?: React.PointerEventHandler<HTMLDivElement>;
+  className?: string;
+  colorScheme?: ColorScheme;
+  isAriaMultiSelectable?: boolean;
+  menuContent: MenuContent | TitledMenuContent;
+  role?: React.AriaRole;
+  tabIndex?: number;
+  testId?: string;
+  wrapperComponent?: typeof DefaultWrapper;
+}>;
+```

package/api-docs/variables/MenuEntry.mdx

@@ -0,0 +1,5 @@
+```ts
+const MenuEntry: React.FC<{
+  item: MenuItem;
+}>;
+```

package/api-docs/variables/Modal.mdx

@@ -0,0 +1,8 @@
+```ts
+const Modal: ForwardRefExoticComponent<Omit<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & object & Pick<Omit<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & object & Pick<ClassAttributes<...> & HTMLAttributes<...> & object, "hasFooterShadow">, "ref"> & RefAttributes<HTMLDivElement>, 
+  | "hasFooterShadow"
+  | "headerContent"
+  | "footerContent"
+  | "headerPadding"
+| "footerPadding">, "ref"> & RefAttributes<ModalHandle>>;
+```

package/api-docs/variables/ModalCloseButton.mdx

@@ -0,0 +1,9 @@
+```ts
+const ModalCloseButton: React.FC<{
+  className?: string;
+  colorScheme?: ColorScheme;
+  onClose?: ClickEventHandler;
+}>;
+```
+
+A generic close button for modals, tooltips and pill toasts.

package/api-docs/variables/ModalCloseButtonWithTooltip.mdx

@@ -0,0 +1,3 @@
+```ts
+const ModalCloseButtonWithTooltip: React.FC<React.ComponentProps<typeof ModalCloseButton> & React.ComponentProps<typeof HotkeysTooltip>>;
+```

package/api-docs/variables/Multiselect.mdx

@@ -0,0 +1,3 @@
+```ts
+const Multiselect: React.FC<Omit<MultiselectCoreProps, "menuComponent"> & object>;
+```

package/api-docs/variables/MultistepIndicator.mdx

@@ -0,0 +1,13 @@
+```ts
+const MultistepIndicator: React.FC<{
+  className?: string;
+  colorScheme?: ColorScheme;
+  currentStepIndex?: number;
+  isStepNameTruncated?: boolean;
+  isStepNameHidden?: boolean;
+  stepClassName?: string;
+  steps: MultistepItem[];
+  variant?: MultistepIndicatorVariant;
+  onStepChange?: (stepNumber) => void;
+}>;
+```

package/api-docs/variables/NotificationToast.mdx

@@ -0,0 +1,13 @@
+```ts
+const NotificationToast: React.FC<Partial<ToastProps>>;
+```
+
+The NotificationToast component works like a normal toast, except it
+displays data received via a signal, and it stores the messages as an array,
+displaying one at a time.
+
+Consumers can add a new message by doing:
+
+```js
+    notificationToast.emit([{ message: 'My message' }]);
+```

package/api-docs/variables/NotificationTooltip.mdx

@@ -0,0 +1,3 @@
+```ts
+const NotificationTooltip: React.FC<React.ComponentProps<"div"> & ControlledTooltip & object>;
+```

package/api-docs/variables/NumberStepInput.mdx

@@ -0,0 +1,21 @@
+```ts
+const NumberStepInput: React.FC<{
+  name: string;
+  label: string;
+  onChange: (value) => void;
+  colorScheme?: ColorScheme;
+  value?: number;
+  ariaLabelDecrement: string;
+  labelDecrement?: string | React.ReactNode;
+  ariaLabelIncrement: string;
+  labelIncrement?: string | React.ReactNode;
+  minValue?: number;
+  maxValue?: number;
+  isInputReadOnly?: boolean;
+  isDisabled?: boolean;
+  stepValue?: number;
+  testIDDecrement?: string;
+  testIDIncrement?: string;
+  testIDInput?: string;
+}>;
+```

package/api-docs/variables/Panel.mdx

@@ -0,0 +1,3 @@
+```ts
+const Panel: ForwardRefExoticComponent<Omit<object & object & Omit<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & object & Pick<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & object, "hasFooterShadow">, "ref"> & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>;
+```

package/api-docs/variables/PasswordInput.mdx

@@ -0,0 +1,6 @@
+```ts
+const PasswordInput: React.FC<Omit<React.ComponentProps<typeof Input>, "type"> & object>;
+```
+
+The PasswordInput is a normal Input element that can toggle between
+`password` and `text` type with a show/hide button.

package/api-docs/variables/PexipLogo.mdx

@@ -0,0 +1,3 @@
+```ts
+const PexipLogo: React.FC<React.ComponentProps<"svg"> & object>;
+```

package/api-docs/variables/Pill.mdx

@@ -0,0 +1,3 @@
+```ts
+const Pill: React.FC<React.ComponentProps<"div"> & object>;
+```

package/api-docs/variables/PopOutWindow.mdx

@@ -0,0 +1,8 @@
+```ts
+const PopOutWindow: React.FC<{
+  children: React.ReactNode;
+  remotePopOut?: Window | null;
+  title?: string;
+  onUnload?: () => void;
+}>;
+```

package/api-docs/variables/PreferenceInput.mdx

@@ -0,0 +1,26 @@
+```ts
+const PreferenceInput: React.FC<{
+  className?: string;
+  confirmLabel?: string;
+  denyAlertText?: string;
+  denyLabel?: string;
+  errorText?: string;
+  hasError?: boolean;
+  id?: string;
+  initialValue?: string;
+  isEditing?: boolean;
+  isReadOnly?: boolean;
+  isConfirmDisabled?: boolean;
+  label: string;
+  labelEnhanceEnd?: React.ReactNode;
+  modifyLabel?: string;
+  name: string;
+  overrideInputValue?: string;
+  placeholder?: string;
+  shouldShowDenyAlert?: boolean;
+  type?: "text" | "password" | "number" | "email" | "tel" | "url";
+  onChange?: (e) => void;
+  onConfirm?: (value?) => void;
+  onEditingStateChange?: (isEditing) => void;
+}>;
+```

package/api-docs/variables/PreferenceMultiselect.mdx

@@ -0,0 +1,21 @@
+```ts
+const PreferenceMultiselect: React.FC<{
+  confirmLabel?: string;
+  className?: string;
+  denyAlertText?: string;
+  denyLabel?: string;
+  errorText?: string;
+  hasError?: boolean;
+  isEditing?: boolean;
+  isReadOnly?: boolean;
+  label: string;
+  labelEnhanceEnd?: React.ReactNode;
+  modifyLabel?: string;
+  noSelectionLabel?: string;
+  options?: Option[];
+  shouldShowDenyAlert?: boolean;
+  value?: string[];
+  onChange?: (selection) => void;
+  onConfirm?: (selection) => void;
+}>;
+```

package/api-docs/variables/PreferenceRow.mdx

@@ -0,0 +1,12 @@
+```ts
+const PreferenceRow: React.FC<React.PropsWithChildren<React.PropsWithChildren<{
+  className?: string;
+  description?: string | React.ReactNode;
+  descriptionVariant?: TextVariant;
+  label?: string | React.ReactNode;
+  labelVariant?: TextVariant;
+  rowBottom?: React.ReactNode;
+  rowLeft?: React.ReactNode;
+  withBorderBottom?: boolean;
+}>>>;
+```

package/api-docs/variables/PreferenceWrapper.mdx

@@ -0,0 +1,3 @@
+```ts
+const PreferenceWrapper: React.FC<object & React.ComponentProps<"div">>;
+```

package/api-docs/variables/ProgressBar.mdx

@@ -0,0 +1,3 @@
+```ts
+const ProgressBar: React.FC<React.ComponentProps<"div"> & object>;
+```

package/api-docs/variables/RadioButton.mdx

@@ -0,0 +1,3 @@
+```ts
+const RadioButton: ForwardRefExoticComponent<Omit<Omit<HTMLProps<HTMLInputElement>, "disabled" | "name" | "type"> & object, "ref"> & RefAttributes<HTMLInputElement>>;
+```

package/api-docs/variables/RangeSlider.mdx

@@ -0,0 +1,11 @@
+```ts
+const RangeSlider: React.FC<{
+  max?: number;
+  min?: number;
+  step?: number;
+  selectedValue?: number;
+  colorScheme?: ColorScheme;
+  className?: string;
+  onChange?: (e) => void;
+}>;
+```

package/api-docs/variables/RefButton.mdx

@@ -0,0 +1,3 @@
+```ts
+const RefButton: ForwardRefExoticComponent<((((Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> | Omit<...> | Omit<...> | Omit<...>) & { ...; }) & { ...; }) & EnhancerProps) & LoadingBoxProps & Pick<...> & { ...; } & RefAttributes<HTMLDivElement | HTMLButtonElement | HTMLAnchorElement>>;
+```

package/api-docs/variables/RefInteractiveElement.mdx

@@ -0,0 +1,3 @@
+```ts
+const RefInteractiveElement: ForwardRefExoticComponent<(Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> | Omit<DetailedHTMLProps<HTMLAttributes<...>, HTMLElement>, "ref"> | Omit<...> | Omit<...>) & { ...; } & RefAttributes<HTMLDivElement | HTMLButtonElement | HTMLAnchorElement>>;
+```

package/api-docs/variables/RefSimpleButton.mdx

@@ -0,0 +1,3 @@
+```ts
+const RefSimpleButton: ForwardRefExoticComponent<((Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> | Omit<DetailedHTMLProps<...>, "ref"> | Omit<...> | Omit<...>) & { ...; }) & { ...; } & RefAttributes<HTMLDivElement | HTMLButtonElement | HTMLAnchorElement>>;
+```

package/api-docs/variables/Row.mdx

@@ -0,0 +1,3 @@
+```ts
+const Row: React.FC<React.ComponentProps<"div"> & object>;
+```

package/api-docs/variables/Scrim.mdx

@@ -0,0 +1,3 @@
+```ts
+const Scrim: React.FC<React.ComponentProps<"div"> & object>;
+```

package/api-docs/variables/Scrollbars.mdx

@@ -0,0 +1,3 @@
+```ts
+const Scrollbars: ForwardRefExoticComponent<Omit<Props, "autoHide"> & object & RefAttributes<SimpleBarCore>>;
+```

package/api-docs/variables/SearchInput.mdx

@@ -0,0 +1,12 @@
+```ts
+const SearchInput: React.FC<{
+  searchInputTestId: string;
+  clearButtonTestId: string;
+  inputAriaLabel: string;
+  clearButtonAriaLabel: string;
+  placeHolder: string;
+  label?: string;
+  name?: string;
+  onSearchInputChanged: (value) => void;
+}>;
+```

package/api-docs/variables/Section.mdx

@@ -0,0 +1,3 @@
+```ts
+const Section: React.FC<React.ComponentProps<"section"> & object>;
+```

package/api-docs/variables/SectionAccordion.mdx

@@ -0,0 +1,15 @@
+```ts
+const SectionAccordion: React.FC<{
+  buttonClassName?: string;
+  children?: React.ReactNode;
+  className?: string;
+  collapseText?: string;
+  colorScheme?: ColorScheme;
+  expandText?: string;
+  isExpanded?: boolean;
+  onToggle?: (isOpen) => void;
+  subtitle?: React.ReactNode;
+  title: string;
+  titleEnhancerEnd?: React.ReactNode;
+}>;
+```

package/api-docs/variables/Select.mdx

@@ -0,0 +1,19 @@
+```ts
+const Select: <T>(__namedParameters) => Element;
+```
+
+## Type Parameters
+
+| Type Parameter | Default type |
+| ------ | ------ |
+| `T` *extends* `string` | `string` |
+
+## Parameters
+
+| Parameter | Type |
+| ------ | ------ |
+| `__namedParameters` | [`SelectProps`](../type-aliases/SelectProps.mdx)\<`T`\> |
+
+## Returns
+
+`Element`

package/api-docs/variables/Sheet.mdx

@@ -0,0 +1,3 @@
+```ts
+const Sheet: React.FC<React.ComponentProps<"div"> & object>;
+```

package/api-docs/variables/SimpleButton.mdx

@@ -0,0 +1,7 @@
+```ts
+const SimpleButton: React.FC<InteractiveElementProps & object>;
+```
+
+SimpleButton looks and acts mostly the same as a normal Button except it has
+less features. The idea is to make it easy to do use composition (children
+components) to add desired behaviour.

package/api-docs/variables/SortingIndicator.mdx

@@ -0,0 +1,6 @@
+```ts
+const SortingIndicator: React.FC<React.PropsWithChildren<{
+  isSorted?: boolean;
+  isSortDescending?: boolean;
+}>>;
+```

package/api-docs/variables/Spinner.mdx

@@ -0,0 +1,3 @@
+```ts
+const Spinner: React.FC<React.ComponentProps<"div"> & object>;
+```

package/api-docs/variables/StatCard.mdx

@@ -0,0 +1,12 @@
+```ts
+const StatCard: React.FC<{
+  className?: string;
+  colorScheme?: ColorScheme;
+  hasDivider?: boolean;
+  rowBottom?: StatCardRowData;
+  rowTop: StatCardRowData;
+  shadowModifier?: ShadowModifier;
+  variant?: StatCardVariant;
+  withHover?: boolean;
+}>;
+```

package/api-docs/variables/StatCardBox.mdx

@@ -0,0 +1,3 @@
+```ts
+const StatCardBox: React.FC<React.PropsWithChildren<object & Partial<React.ComponentProps<typeof Box>>>>;
+```

package/api-docs/variables/StatCardRow.mdx

@@ -0,0 +1,3 @@
+```ts
+const StatCardRow: React.FC<object & React.ComponentProps<"div">>;
+```

package/api-docs/variables/StatIndicator.mdx

@@ -0,0 +1,3 @@
+```ts
+const StatIndicator: React.FC<React.ComponentProps<"div"> & object>;
+```

package/api-docs/variables/StepNumber.mdx

@@ -0,0 +1,3 @@
+```ts
+const StepNumber: React.FC<React.ComponentProps<"div"> & object>;
+```

package/api-docs/variables/SvgImage.mdx

@@ -0,0 +1,3 @@
+```ts
+const SvgImage: React.FC<React.ComponentProps<"svg"> & object>;
+```

package/api-docs/variables/Tab.mdx

@@ -0,0 +1,3 @@
+```ts
+const Tab: React.FC<React.ComponentProps<"div"> & object>;
+```

package/api-docs/variables/Table.mdx

@@ -0,0 +1,3 @@
+```ts
+const Table: React.FC<React.ComponentProps<"div"> & object>;
+```

package/api-docs/variables/TableBody.mdx

@@ -0,0 +1,3 @@
+```ts
+const TableBody: React.FC<React.ComponentProps<"div"> & object>;
+```

package/api-docs/variables/TableCell.mdx

@@ -0,0 +1,3 @@
+```ts
+const TableCell: React.FC<React.ComponentProps<"div"> & object>;
+```

package/api-docs/variables/TableContent.mdx

@@ -0,0 +1,3 @@
+```ts
+const TableContent: React.FC<React.ComponentProps<"div">>;
+```

package/api-docs/variables/TableHead.mdx

@@ -0,0 +1,3 @@
+```ts
+const TableHead: React.FC<React.ComponentProps<"div">>;
+```

package/api-docs/variables/TableHeadCell.mdx

@@ -0,0 +1,3 @@
+```ts
+const TableHeadCell: React.FC<React.ComponentProps<"div"> & object>;
+```

package/api-docs/variables/TablePagination.mdx

@@ -0,0 +1,23 @@
+```ts
+const TablePagination: React.FC<{
+  isDisabled?: boolean;
+  isSticky?: boolean;
+  isTablePopulated?: boolean;
+  label: string;
+  nextPageButtonChildren?: React.ReactNode;
+  previousPageButtonChildren?: React.ReactNode;
+  resultsCountComponent?: React.FC<TableResultsCountProps>;
+  showResultsCount?: boolean;
+  canNextPage: boolean;
+  canPreviousPage: boolean;
+  currentPageSize: number;
+  maxUngroupedPageButtons?: number;
+  pageIndex: number;
+  pageSize: number;
+  totalPagesCount?: number;
+  totalRows: number;
+  gotoPage: (updater) => void;
+  nextPage: () => void;
+  previousPage: () => void;
+}>;
+```

package/api-docs/variables/TableRow.mdx

@@ -0,0 +1,3 @@
+```ts
+const TableRow: React.FC<React.ComponentProps<typeof TableRowWrapper>>;
+```

package/api-docs/variables/TableRowWrapper.mdx

@@ -0,0 +1,9 @@
+```ts
+const TableRowWrapper: React.FC<{
+  children: React.ReactNode;
+  className?: string;
+  isDisabled?: boolean;
+  isSelected?: boolean;
+  style?: React.CSSProperties;
+}>;
+```

package/api-docs/variables/TableSection.mdx

@@ -0,0 +1,3 @@
+```ts
+const TableSection: React.FC<React.ComponentProps<"div"> & object>;
+```

package/api-docs/variables/Tabs.mdx

@@ -0,0 +1,3 @@
+```ts
+const Tabs: React.FC<React.ComponentProps<"div"> & object>;
+```

package/api-docs/variables/Tag.mdx

@@ -0,0 +1,3 @@
+```ts
+const Tag: React.FC<React.PropsWithChildren<TagItem>>;
+```

package/api-docs/variables/TagList.mdx

@@ -0,0 +1,9 @@
+```ts
+const TagList: React.FC<React.PropsWithChildren<{
+  className?: string;
+  colorScheme?: ColorScheme;
+  items: TagItem[];
+  maxTagsCount?: number;
+  variant?: TextVariant;
+}>>;
+```

package/api-docs/variables/Text.mdx

@@ -0,0 +1,3 @@
+```ts
+const Text: React.FC<React.ComponentProps<InlineElement> & object>;
+```

package/api-docs/variables/TextArea.mdx

@@ -0,0 +1,5 @@
+```ts
+const TextArea: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "disabled"> & object, "ref"> & RefAttributes<{
+  focus: () => void;
+}>>;
+```

package/api-docs/variables/TextHeading.mdx

@@ -0,0 +1,3 @@
+```ts
+const TextHeading: React.FC<React.ComponentProps<HeadingElement> & object>;
+```

package/api-docs/variables/TextLink.mdx

@@ -0,0 +1,3 @@
+```ts
+const TextLink: React.FC<InteractiveElementProps & Omit<TextProps, "htmlTag"> & object>;
+```

package/api-docs/variables/ThemeConsumer.mdx

@@ -0,0 +1,3 @@
+```ts
+ThemeConsumer: Consumer<ThemeContextProps>;
+```

package/api-docs/variables/ThemeContext.mdx

@@ -0,0 +1,3 @@
+```ts
+const ThemeContext: Context<ThemeContextProps>;
+```

package/api-docs/variables/ThemeProvider.mdx

@@ -0,0 +1,3 @@
+```ts
+const ThemeProvider: React.FC<React.PropsWithChildren<ThemeContextProps>>;
+```

package/api-docs/variables/ThreeColumnSelector.mdx

@@ -0,0 +1,3 @@
+```ts
+const ThreeColumnSelector: React.FC<ButtonProps & object>;
+```

package/api-docs/variables/Toast.mdx

@@ -0,0 +1,13 @@
+```ts
+const Toast: (props) => Element | null;
+```
+
+## Parameters
+
+| Parameter | Type |
+| ------ | ------ |
+| `props` | [`ToastProps`](../interfaces/ToastProps.mdx) & [`WithTransitionProps`](../interfaces/WithTransitionProps.mdx) |
+
+## Returns
+
+`Element` \| `null`

package/api-docs/variables/ToggleSwitch.mdx

@@ -0,0 +1,3 @@
+```ts
+const ToggleSwitch: React.FC<Omit<ToggleSwitchProps, "type" | "style">>;
+```

package/api-docs/variables/Tooltip.mdx

@@ -0,0 +1,13 @@
+```ts
+const Tooltip: React.FC<React.ComponentProps<"div"> & object>;
+```
+
+Tooltips need to be accessible to keyboard and screen reader users, so we
+ensure that they are only placed on focusable and hoverable elements. For
+example, plain text and disabled buttons aren't focusable, meaning keyboard
+and screen reader users would be unable to access the information in that
+tooltip.
+
+## See
+
+https://react-spectrum.adobe.com/react-spectrum/Tooltip.html#usage-on-disabled-or-non-interactive-elements

package/api-docs/variables/TooltipPositionValue.mdx

@@ -0,0 +1,3 @@
+```ts
+const TooltipPositionValue: readonly ["bottom", "bottomEnd", "bottomLeft", "bottomRight", "bottomStart", "endBottom", "left", "right", "top", "topEnd", "topLeft", "topRight", "topStart"];
+```

package/api-docs/variables/URLToLink.mdx

@@ -0,0 +1,5 @@
+```ts
+const URLToLink: React.FC<{
+  text: string;
+}>;
+```

package/api-docs/variables/User.mdx

@@ -0,0 +1,14 @@
+```ts
+const User: React.FC<{
+  avatarType: AvatarType;
+  className?: string;
+  email?: string;
+  displayName: string;
+  imageUrl?: string;
+  order?: "text-right" | "text-left";
+  colorScheme?: ColorScheme;
+  usernameFontVariant?: FontVariant;
+  textItemClassName?: string;
+  size?: ExtendedFixedSizeModifier;
+}>;
+```

package/api-docs/variables/UserMenuButton.mdx

@@ -0,0 +1,11 @@
+```ts
+const UserMenuButton: React.FC<{
+  isContentVisible: boolean;
+  displayName?: string;
+  variant?: ButtonVariant;
+  title?: string;
+  isDisabled?: boolean;
+  modifier?: ButtonModifiersValues;
+  colorScheme: ColorScheme;
+}>;
+```