@inglorious/ui 9.8.2 → 9.10.0

package/types/controls/chip-picker.d.ts

@@ -0,0 +1,23 @@
+import type { TemplateResult } from "@inglorious/web"
+
+import type { ComboboxOption } from "./combobox"
+
+export interface ChipPickerProps {
+  /** The fieldset's legend. */
+  label?: TemplateResult | string
+  hint?: TemplateResult | string
+  /** Strings, numbers or `{ value, label, isDisabled }`, as in Combobox. */
+  options?: ComboboxOption[]
+  /** The values picked. */
+  value?: (string | number)[]
+  isDisabled?: boolean
+  className?: string
+  /** Called with the value of the chip pressed, picked or not. */
+  onToggle?: (value: string | number) => void
+}
+
+export type ChipPickerType = {
+  render(props: ChipPickerProps): TemplateResult
+}
+
+export declare const ChipPicker: ChipPickerType

package/types/controls/combobox.d.ts

@@ -10,6 +10,10 @@ export type ComboboxOption =
       error?: string
       isDisabled?: boolean
       isRequired?: boolean
+      /** Other names a search finds this option by. */
+      keywords?: string[]
+      /** Set on the option that adds a searched term. */
+      isCreated?: boolean
       [key: string]: unknown
     }
 
@@ -30,6 +34,10 @@ export interface ComboboxProps {
   isDisabled?: boolean
   isSearchable?: boolean
   isClearable?: boolean
+  /** Offers to add a searched term that matches no option. Needs `isSearchable`. */
+  isCreatable?: boolean
+  /** Text of the option that adds the term. Defaults to `Add "term"`. */
+  formatCreateLabel?: (term: string) => string
 
   placeholder?: string
   /** Placeholder of the search box in the panel. Defaults to "Search...". */
@@ -37,6 +45,16 @@ export interface ComboboxProps {
   noOptionsMessage?: string
   loadingMessage?: string
 
+  /** A validation message, shown under the control. */
+  error?: string | null
+  /**
+   * An event to notify when the user picks or clears a value, such as
+   * `"#form:fieldChange"`. The payload is `changePayload` with the new `value`.
+   */
+  changeEvent?: string
+  /** Merged into `changeEvent`'s payload, such as `{ path: "country" }`. */
+  changePayload?: Record<string, unknown>
+
   isFullWidth?: boolean
   size?: "sm" | "md" | "lg"
   onToggle?: () => void
@@ -60,13 +78,21 @@ export type ComboboxType = {
   open(entity: ComboboxProps): void
   close(entity: ComboboxProps): void
   toggle(entity: ComboboxProps): void
-  optionSelect(entity: ComboboxProps, option: ComboboxOption): void
-  clear(entity: ComboboxProps): void
+  optionSelect(entity: ComboboxProps, option: ComboboxOption, api?: Api): void
+  clear(entity: ComboboxProps, payload?: unknown, api?: Api): void
   searchChange(entity: ComboboxProps, searchTerm: string): void
   focusNext(entity: ComboboxProps): void
   focusPrev(entity: ComboboxProps): void
   focusFirst(entity: ComboboxProps): void
   focusLast(entity: ComboboxProps): void
+  focusSet(entity: ComboboxProps, index: number): void
+  /** Sets the value from outside, without notifying `changeEvent`. An empty string is no value. */
+  valueSet(
+    entity: ComboboxProps,
+    value: string | number | (string | number)[] | null,
+  ): void
+  optionsSet(entity: ComboboxProps, options: ComboboxOption[]): void
+  errorSet(entity: ComboboxProps, error: string | null): void
 }
 
 export declare const Combobox: ComboboxType
@@ -83,3 +109,13 @@ export declare function filterOptions(
   options: ComboboxOption[],
   searchTerm: string,
 ): ComboboxOption[]
+export declare function visibleOptions(
+  props: Pick<
+    ComboboxProps,
+    | "options"
+    | "searchTerm"
+    | "selectedValue"
+    | "isCreatable"
+    | "formatCreateLabel"
+  >,
+): ComboboxOption[]

package/types/data-display/lightbox.d.ts

@@ -0,0 +1,35 @@
+import type { TemplateResult, nothing } from "@inglorious/web"
+
+export interface LightboxImage {
+  src: string
+  /** Defaults to empty, for images the page describes already. */
+  alt?: string
+}
+
+export interface LightboxProps {
+  id?: string
+  /** URLs, or `{ src, alt }`. Renders nothing when empty. */
+  images?: (string | LightboxImage)[]
+  /** The image shown. Any integer: it wraps around. */
+  index?: number
+  isOpen?: boolean
+  /** The dialog's accessible name. Defaults to `"Photos"`. */
+  label?: string
+  /** Defaults to `"Close"`. */
+  closeLabel?: string
+  /** Defaults to `"Previous photo"`. */
+  previousLabel?: string
+  /** Defaults to `"Next photo"`. */
+  nextLabel?: string
+  className?: string
+  /** `1` for the next image, `-1` for the previous. Without it there is no navigation. */
+  onStep?: (step: 1 | -1) => void
+  /** Called by the close button, Esc and a press outside the image. */
+  onClose?: () => void
+}
+
+export type LightboxType = {
+  render(props: LightboxProps): TemplateResult | typeof nothing
+}
+
+export declare const Lightbox: LightboxType

package/types/feedback/confirm-dialog.d.ts

@@ -0,0 +1,34 @@
+import type { TemplateResult } from "@inglorious/web"
+
+import type { Renderable } from "../shared/renderable"
+
+export interface ConfirmDialogProps {
+  id?: string
+  isOpen?: boolean
+  /** The question, such as "Delete this event?". */
+  message?: TemplateResult | string | number
+  /** Anything more to show under the message, such as an error. */
+  children?: Renderable
+  confirmLabel: string
+  /** The confirm button's text while `isBusy`. Defaults to `confirmLabel`. */
+  busyLabel?: string
+  /** Defaults to `"Cancel"`. */
+  cancelLabel?: string
+  /** The close button's accessible name. Defaults to `"Close"`. */
+  closeLabel?: string
+  /** `"danger"` (default) for an action that cannot be undone, `"primary"` otherwise. */
+  tone?: "danger" | "primary"
+  /** The action is running: nothing can be pressed and the sheet stays open. */
+  isBusy?: boolean
+  isDisabled?: boolean
+  className?: string
+  onConfirm?: () => void
+  /** Called by the cancel button, Esc and the backdrop. */
+  onCancel?: () => void
+}
+
+export type ConfirmDialogType = {
+  render(props: ConfirmDialogProps): TemplateResult
+}
+
+export declare const ConfirmDialog: ConfirmDialogType

package/types/feedback/crop-dialog.d.ts

@@ -0,0 +1,35 @@
+import type { Api, TemplateResult } from "@inglorious/web"
+
+import type { CropRect } from "../controls/image-cropper"
+
+export interface CropDialogProps {
+  id?: string
+  isOpen?: boolean
+  /** The id of the ImageCropper entity to show. */
+  cropperId: string
+  title?: TemplateResult | string
+  description?: TemplateResult | string
+  /** Defaults to `"Apply"`. */
+  applyLabel?: string
+  /** The apply button's text while `isSaving`. Defaults to `"Saving…"`. */
+  savingLabel?: string
+  /** Defaults to `"Cancel"`. */
+  cancelLabel?: string
+  /** The close button's accessible name. Defaults to `"Close"`. */
+  closeLabel?: string
+  /** Shown when the cropper cannot load its image. */
+  loadErrorText?: string
+  /** An error of the caller's, such as a failed upload. Wins over `loadErrorText`. */
+  error?: TemplateResult | string | null
+  isSaving?: boolean
+  className?: string
+  onCancel?: () => void
+  /** Receives the cropper's `rect`. */
+  onApply?: (rect: CropRect) => void
+}
+
+export type CropDialogType = {
+  render(props: CropDialogProps, api: Api): TemplateResult
+}
+
+export declare const CropDialog: CropDialogType

package/types/feedback/load-status.d.ts

@@ -0,0 +1,22 @@
+import type { Renderable } from "../shared/renderable"
+
+export interface LoadStatusProps {
+  isError?: boolean
+  error?: Renderable
+  isLoading?: boolean
+  /** Replaces the circular progress, such as with the app's own animation. */
+  loader?: Renderable
+  /** The progress indicator's accessible name. Defaults to `"Loading…"`. */
+  loadingLabel?: string
+  isEmpty?: boolean
+  emptyText?: Renderable
+  /** What to render when there is no status to show. Runs only then, so it can read data still loading. */
+  content?: () => Renderable
+  className?: string
+}
+
+export type LoadStatusType = {
+  render(props: LoadStatusProps): Renderable
+}
+
+export declare const LoadStatus: LoadStatusType

package/types/index.d.ts

@@ -1,6 +1,7 @@
 export { Button } from "./controls/button"
 export { ButtonGroup } from "./controls/button-group"
 export { Checkbox } from "./controls/checkbox"
+export { ChipPicker } from "./controls/chip-picker"
 export { Fab } from "./controls/fab"
 export { FileUpload } from "./controls/file-upload"
 export { IconButton } from "./controls/icon-button"
@@ -18,6 +19,7 @@ export { BeforeAfter } from "./data-display/before-after"
 export { Carousel } from "./data-display/carousel"
 export { Chat } from "./data-display/chat"
 export { Chip } from "./data-display/chip"
+export { Lightbox } from "./data-display/lightbox"
 export { DataGrid } from "./data-display/data-grid"
 export { Divider } from "./data-display/divider"
 export { Icon } from "./data-display/icon"
@@ -28,7 +30,10 @@ export { Typography } from "./data-display/typography"
 export { VirtualList } from "./data-display/virtual-list"
 export { Alert } from "./feedback/alert"
 export { Backdrop } from "./feedback/backdrop"
+export { ConfirmDialog } from "./feedback/confirm-dialog"
+export { CropDialog } from "./feedback/crop-dialog"
 export { Dialog } from "./feedback/dialog"
+export { LoadStatus } from "./feedback/load-status"
 export { Progress } from "./feedback/progress"
 export { Skeleton } from "./feedback/skeleton"
 export { Snackbar } from "./feedback/snackbar"
@@ -53,6 +58,7 @@ export { Paper } from "./surfaces/paper"
 export type { ButtonProps, ButtonType } from "./controls/button"
 export type { ButtonGroupProps, ButtonGroupType } from "./controls/button-group"
 export type { CheckboxProps, CheckboxType } from "./controls/checkbox"
+export type { ChipPickerProps, ChipPickerType } from "./controls/chip-picker"
 export type {
   ComboboxProps,
   ComboboxType,
@@ -119,6 +125,11 @@ export type { PaperProps, PaperType } from "./surfaces/paper"
 export type { AvatarProps, AvatarType } from "./data-display/avatar"
 export type { BadgeProps, BadgeType } from "./data-display/badge"
 export type { ChipProps, ChipType } from "./data-display/chip"
+export type {
+  LightboxImage,
+  LightboxProps,
+  LightboxType,
+} from "./data-display/lightbox"
 export type {
   DataGridProps,
   DataGridType,
@@ -148,7 +159,13 @@ export type {
 } from "./data-display/typography"
 export type { AlertProps, AlertType } from "./feedback/alert"
 export type { BackdropProps, BackdropType } from "./feedback/backdrop"
+export type {
+  ConfirmDialogProps,
+  ConfirmDialogType,
+} from "./feedback/confirm-dialog"
+export type { CropDialogProps, CropDialogType } from "./feedback/crop-dialog"
 export type { DialogProps, DialogType } from "./feedback/dialog"
+export type { LoadStatusProps, LoadStatusType } from "./feedback/load-status"
 export type { ProgressProps, ProgressType } from "./feedback/progress"
 export type { SkeletonProps, SkeletonType } from "./feedback/skeleton"
 export type { SnackbarProps, SnackbarType } from "./feedback/snackbar"