@webority/ui-react 0.96.0 → 0.99.0

package/dist/guidance.json

@@ -2,7 +2,7 @@
   "format": "webority-guidance/1",
   "package": {
     "name": "@webority/ui-react",
-    "version": "0.96.0"
+    "version": "0.99.0"
   },
   "components": [
     {
@@ -2430,6 +2430,31 @@
         ]
       }
     },
+    {
+      "name": "AppCountryFlag",
+      "usage": {
+        "when": [
+          "A country beside its name in a list, a table cell or a profile.",
+          "A country column in a table."
+        ],
+        "whenNot": [
+          {
+            "text": "Picking a country.",
+            "instead": "AppCountrySelect"
+          },
+          {
+            "text": "A phone number with its country.",
+            "instead": "AppPhoneNumberInput"
+          }
+        ],
+        "do": [],
+        "dont": [],
+        "a11y": [
+          "Decorative by default: the country name in the text beside it carries the meaning.",
+          "Give label when the flag stands alone, so assistive tech reads the country."
+        ]
+      }
+    },
     {
       "name": "AppCountrySelect",
       "usage": {

package/dist/lib/wuiMarker.js

@@ -1 +1 @@
-var e=`data-wui`,t=`data-wui-props`,n=`data-canvas`,r=`__WUI_MARKERS__`,i=`props`,a=new Set([`children`,`className`,`style`,`id`,`key`,`ref`,`as`,`linkComponent`,`src`]),o=e=>typeof e==`string`||typeof e==`number`||typeof e==`boolean`;function s(){return globalThis[r]===i}function c(r,i){let c={[e]:r},l=i?.[n];if(typeof l==`string`&&l!==``&&(c[n]=l),!s())return c;let u={};for(let[e,t]of Object.entries(i||{}))a.has(e)||e.startsWith(`aria-`)||e.startsWith(`data-`)||/^on[A-Z]/.test(e)||o(t)&&(u[e]=t);return c[t]=JSON.stringify(u),c}export{n as WUI_CANVAS_KEY_ATTRIBUTE,r as WUI_MARKERS_GLOBAL,i as WUI_MARKERS_PROPS_MODE,e as WUI_MARKER_ATTRIBUTE,t as WUI_MARKER_PROPS_ATTRIBUTE,c as wuiMarkerAttributes,s as wuiMarkerPropsOn};
+var e=`data-wui`,t=`data-wui-props`,n=`data-canvas`,r=`data-canvas-at`,i=`__WUI_MARKERS__`,a=`props`,o=new Set([`children`,`className`,`style`,`id`,`key`,`ref`,`as`,`linkComponent`,`src`]),s=e=>typeof e==`string`||typeof e==`number`||typeof e==`boolean`;function c(){return globalThis[i]===a}function l(i,a){let l={[e]:i},u=a?.[n];typeof u==`string`&&u!==``&&(l[n]=u);let d=a?.[r];if(typeof d==`string`&&d!==``&&(l[r]=d),!c())return l;let f={};for(let[e,t]of Object.entries(a||{}))o.has(e)||e.startsWith(`aria-`)||e.startsWith(`data-`)||/^on[A-Z]/.test(e)||s(t)&&(f[e]=t);return l[t]=JSON.stringify(f),l}export{r as WUI_CANVAS_AT_ATTRIBUTE,n as WUI_CANVAS_KEY_ATTRIBUTE,i as WUI_MARKERS_GLOBAL,a as WUI_MARKERS_PROPS_MODE,e as WUI_MARKER_ATTRIBUTE,t as WUI_MARKER_PROPS_ATTRIBUTE,l as wuiMarkerAttributes,c as wuiMarkerPropsOn};

package/dist/types/components/AppAutocomplete.d.ts

@@ -32,6 +32,8 @@ declare const AppAutocomplete: import("react").ForwardRefExoticComponent<{
      * @default false
      */
     disabled?: boolean;
+    /** Shows the list open, for a design preview or a controlled caller. */
+    open?: boolean;
     /** The control size. Leave it out for the default size. */
     size?: 'sm' | 'lg';
     /**

package/dist/types/components/AppAvatar.d.ts

@@ -72,6 +72,9 @@ export default function AppAvatar(props: {
      * @default "auto"
      */
     tooltipPlacement?: "auto" | "top" | "bottom" | "start" | "end";
-    /** Extra classes on the avatar. */
+    /**
+     * Extra classes on the avatar.
+     * @default ""
+     */
     className?: string;
 }): any;

package/dist/types/components/AppAvatarPicker.d.ts

@@ -78,9 +78,15 @@ export default function AppAvatarPicker(props: {
     disabled?: boolean;
     /** The accessible name of the photo button. Defaults to the words of the action. */
     ariaLabel?: string;
-    /** Extra class on the picker (the photo and its actions). */
+    /**
+     * Extra class on the picker (the photo and its actions).
+     * @default ""
+     */
     className?: string;
-    /** Extra class on the field wrapper. */
+    /**
+     * Extra class on the field wrapper.
+     * @default ""
+     */
     fieldClassName?: string;
     style?: object;
 }): import("react").JSX.Element;

package/dist/types/components/AppBadge.d.ts

@@ -29,6 +29,9 @@ export default function AppBadge(props: {
      * @default "auto"
      */
     tooltipPlacement?: "auto" | "top" | "bottom" | "start" | "end";
-    /** Extra classes on the badge. */
+    /**
+     * Extra classes on the badge.
+     * @default ""
+     */
     className?: string;
 }): any;

package/dist/types/components/AppBanner.d.ts

@@ -27,6 +27,9 @@ export default function AppBanner(props: {
      */
     dismissible?: boolean;
     onDismiss?: () => void;
-    /** Extra classes on the banner. */
+    /**
+     * Extra classes on the banner.
+     * @default ""
+     */
     className?: string;
-}): import("react").JSX.Element;
+}): import("react").JSX.Element | null;

package/dist/types/components/AppBreadcrumbs.d.ts

@@ -26,6 +26,9 @@ export default function AppBreadcrumbs(props: {
         icon?: string | import('react').ReactNode;
     }[];
     linkComponent?: import('react').ElementType;
-    /** Extra classes on the trail. */
+    /**
+     * Extra classes on the trail.
+     * @default ""
+     */
     className?: string;
 }): import("react").JSX.Element;

package/dist/types/components/AppButton.d.ts

@@ -4,7 +4,7 @@ export declare function buttonVariantClass(variant: any): string;
  *
  * @param {object} props
  * @param {import('react').ReactNode} props.children The label.
- * @param {"primary"|"secondary"|"outline"|"ghost"|"text"|"danger"|"success"|"secondary-danger"|"outline-danger"|"light"|"warning"|"neutral"|"outline-light"|"outline-secondary"|"subtle"} [props.variant]
+ * @param {"primary"|"secondary"|"outline"|"ghost"|"text"|"danger"|"success"|"secondary-danger"|"outline-danger"|"light"|"warning"|"neutral"|"outline-light"|"outline-secondary"} [props.variant]
  * @param {"sm"|"md"|"lg"} [props.size]
  * @param {"button"|"submit"|"reset"} [props.type]
  * @param {boolean} [props.loading]
@@ -27,10 +27,10 @@ export declare function buttonVariantClass(variant: any): string;
 export default function AppButton(props: {
     children: import('react').ReactNode;
     /**
-     * Emphasis level. subtle is deprecated (use neutral) and is removed in 0.79.0.
+     * Emphasis level.
      * @default "primary"
      */
-    variant?: "primary" | "secondary" | "outline" | "ghost" | "text" | "danger" | "success" | "secondary-danger" | "outline-danger" | "light" | "warning" | "neutral" | "outline-light" | "outline-secondary" | "subtle";
+    variant?: "primary" | "secondary" | "outline" | "ghost" | "text" | "danger" | "success" | "secondary-danger" | "outline-danger" | "light" | "warning" | "neutral" | "outline-light" | "outline-secondary";
     /**
      * Control size.
      * @default "md"

package/dist/types/components/AppButtonGroup.d.ts

@@ -32,6 +32,9 @@ export default function AppButtonGroup(props: {
      * @default false
      */
     fullWidth?: boolean;
-    /** Extra classes on the group. */
+    /**
+     * Extra classes on the group.
+     * @default ""
+     */
     className?: string;
 }): import("react").JSX.Element;

package/dist/types/components/AppCalendar.d.ts

@@ -39,7 +39,10 @@ declare const AppCalendar: import("react").ForwardRefExoticComponent<{
         end: string;
         title: string;
     }) => void;
-    /** Extra classes on the element. */
+    /**
+     * Extra classes on the element.
+     * @default ""
+     */
     className?: string;
     /** Inline style on the element. */
     style?: import('react').CSSProperties;

package/dist/types/components/AppCard.d.ts

@@ -40,7 +40,10 @@ export default function AppCard(props: {
     subtitle?: import('react').ReactNode;
     /** Leading header glyph: an icon name (or a node). */
     headerIcon?: string;
-    /** Extra classes on the title. */
+    /**
+     * Extra classes on the title.
+     * @default ""
+     */
     titleClassName?: string;
     /**
      * Face of the title. `serif` draws it in the display typeface.
@@ -75,11 +78,20 @@ export default function AppCard(props: {
     padding?: "none" | "sm" | "md" | "lg";
     /** Cap and centre a standalone card. A preset (xs, sm, md, lg), a number of pixels or a CSS length. */
     maxWidth?: "xs" | "sm" | "md" | "lg" | number | string;
-    /** Extra classes on the `.card` root. The padding hook: a class here can set `--wui-card-pad` to retune the inset (the Razor counterpart is a plain `class`). */
+    /**
+     * Extra classes on the `.card` root. The padding hook: a class here can set `--wui-card-pad` to retune the inset (the Razor counterpart is a plain `class`).
+     * @default ""
+     */
     className?: string;
-    /** Extra classes on the card body. */
+    /**
+     * Extra classes on the card body.
+     * @default ""
+     */
     bodyClassName?: string;
-    /** Extra classes on the card header. */
+    /**
+     * Extra classes on the card header.
+     * @default ""
+     */
     headerClassName?: string;
     /**
      * Wrap children in `.card-body`. False for a flush card.
@@ -103,4 +115,4 @@ export default function AppCard(props: {
      * @default "Close"
      */
     closeLabel?: string;
-}): import("react").JSX.Element;
+}): import("react").JSX.Element | null;

package/dist/types/components/AppCarousel.d.ts

@@ -86,7 +86,10 @@ export default function AppCarousel(props: {
      * @default "Play"
      */
     playLabel?: string;
-    /** Extra classes on the element. */
+    /**
+     * Extra classes on the element.
+     * @default ""
+     */
     className?: string;
     /** Merged after the per-view custom properties. */
     style?: import('react').CSSProperties;

package/dist/types/components/AppChart.d.ts

@@ -100,7 +100,10 @@ declare const AppChart: import("react").ForwardRefExoticComponent<{
     onReady?: (detail: {
         renderer: string;
     }) => void;
-    /** Extra classes on the element. */
+    /**
+     * Extra classes on the element.
+     * @default ""
+     */
     className?: string;
     /** Inline style on the element. */
     style?: import('react').CSSProperties;

package/dist/types/components/AppChartCard.d.ts

@@ -42,6 +42,9 @@ export default function AppChartCard(props: {
     /** A row under the chart: a source, an updated-at time, a link. */
     footer?: import('react').ReactNode;
     children: import('react').ReactNode;
-    /** Extra classes on the card. */
+    /**
+     * Extra classes on the card.
+     * @default ""
+     */
     className?: string;
 }): import("react").JSX.Element;

package/dist/types/components/AppCheckbox.d.ts

@@ -16,7 +16,10 @@ declare const AppCheckbox: import("react").ForwardRefExoticComponent<{
     error?: string;
     /** Helper text below the control. Hidden while an error is shown. */
     hint?: string;
-    /** Extra classes on the element. */
+    /**
+     * Extra classes on the element.
+     * @default ""
+     */
     className?: string;
 } & import("react").RefAttributes<HTMLInputElement>>;
 export default AppCheckbox;

package/dist/types/components/AppChip.d.ts

@@ -55,6 +55,9 @@ export default function AppChip(props: {
     disabled?: boolean;
     /** aria-label for the dismiss button. */
     removeLabel?: string;
-    /** Extra classes on the element. */
+    /**
+     * Extra classes on the element.
+     * @default ""
+     */
     className?: string;
 }): import("react").JSX.Element;

package/dist/types/components/AppConfirmDialog.d.ts

@@ -79,4 +79,4 @@ export default function AppConfirmDialog(props: {
      * @default ""
      */
     className?: string;
-}): import("react").JSX.Element;
+}): import("react").JSX.Element | null;

package/dist/types/components/AppCountryFlag.d.ts

@@ -0,0 +1,22 @@
+/**
+ * A country flag on its own: the flag the country select's options show, drawn from the theme's
+ * .wui-flag-<iso> artwork and sized to the text around it. Decorative by default, so the country
+ * name beside it carries the meaning; pass `label` when the flag stands alone and assistive tech
+ * should read the country.
+ *
+ * @param {object} props
+ * @param {string} props.country ISO 3166-1 alpha-2 code of the country, such as "IN".
+ * @param {string} [props.label] The country name, read by assistive tech when the flag stands alone.
+ * @param {string} [props.className]
+ */
+export default function AppCountryFlag(props: {
+    /** ISO 3166-1 alpha-2 code of the country, such as IN. The flag follows the size of the text around it. */
+    country: string;
+    /** Names the flag for assistive tech. Without it the flag is decorative and hidden, so put the country name in the text beside it. */
+    label?: string;
+    /**
+     * Extra classes on the flag.
+     * @default ""
+     */
+    className?: string;
+}): import("react").JSX.Element | null;

package/dist/types/components/AppCountrySelect.d.ts

@@ -47,6 +47,8 @@ declare const AppCountrySelect: import("react").ForwardRefExoticComponent<{
     floatingLabel?: "off" | "border";
     /** Disables the control. */
     disabled?: boolean;
+    /** Shows the list open, for a design preview or a controlled caller. */
+    open?: boolean;
     /** The visible field label. */
     label?: import('react').ReactNode;
     /**

package/dist/types/components/AppDataTable.d.ts

@@ -42,6 +42,8 @@
  * @param {(row: object) => 'success'|'warning'|'danger'|'info'|undefined} [props.rowStatus] A coloured
  *   bar on the row's leading edge, e.g. danger for an overdue invoice. Undefined draws none.
  * @param {string|number} [props.activeRowKey]
+ * @param {string|number} [props.hoverRowKey] The key, as rowKey returns it, of a row drawn in its hover look without a
+ *   pointer, for previews and design tools: the row carries the theme class wui-force-hover. Razor: class="wui-force-hover" on the <tr>.
  * @param {boolean} [props.selectable]
  * @param {Set<string|number>} [props.selectedIds]
  * @param {(row: object, index: number) => boolean} [props.isRowSelectable] A row it returns false for shows a disabled
@@ -188,6 +190,8 @@ export default function AppDataTable(props: {
     rowStatus?: (row: object) => 'success' | 'warning' | 'danger' | 'info' | undefined;
     /** The key, as rowKey returns it, of the row whose record is open, for example in a detail pane beside the table. That row gets aria-current and a subtle primary background, apart from the row status bar and selected rows. */
     activeRowKey?: string | number;
+    /** The key, as rowKey returns it, of a row drawn in its hover look without a pointer, for previews and design tools. The row carries the theme class wui-force-hover and otherwise looks and behaves as any other row. */
+    hoverRowKey?: string | number;
     /**
      * Renders a leading checkbox column. Fires a bubbling selectionchange with selected, total and keys when the ticked count changes.
      * @default false

package/dist/types/components/AppErrorSummary.d.ts

@@ -35,4 +35,4 @@ export default function AppErrorSummary(props: {
      * @default ""
      */
     className?: string;
-}): import("react").JSX.Element;
+}): import("react").JSX.Element | null;

package/dist/types/components/AppFormActions.d.ts

@@ -23,6 +23,9 @@ export default function AppFormActions(props: {
      * @default "end"
      */
     align?: "end" | "start" | "between";
-    /** Extra class names added to the root element. */
+    /**
+     * Extra class names added to the root element.
+     * @default ""
+     */
     className?: string;
 }): import("react").JSX.Element;

package/dist/types/components/AppFormRow.d.ts

@@ -23,6 +23,9 @@ export default function AppFormRow(props: {
      * @default true
      */
     collapse?: boolean;
-    /** Extra class names added to the root element. */
+    /**
+     * Extra class names added to the root element.
+     * @default ""
+     */
     className?: string;
 }): import("react").JSX.Element;

package/dist/types/components/AppFormSection.d.ts

@@ -57,6 +57,9 @@ export default function AppFormSection(props: {
      * @default "line"
      */
     rule?: 'line' | 'none';
-    /** Extra class names added to the root element. */
+    /**
+     * Extra class names added to the root element.
+     * @default ""
+     */
     className?: string;
 }): import("react").JSX.Element;

package/dist/types/components/AppHoverCard.d.ts

@@ -50,6 +50,9 @@ export default function AppHoverCard(props: {
      */
     closeDelay?: number;
     onOpenChange?: (open: boolean) => void;
-    /** Extra class names added to the root element. */
+    /**
+     * Extra class names added to the root element.
+     * @default ""
+     */
     className?: string;
 }): import("react").JSX.Element;

package/dist/types/components/AppInfoList.d.ts

@@ -21,6 +21,9 @@ export default function AppInfoList(props: {
         value: import('react').ReactNode;
         href?: string;
     }[];
-    /** Extra classes on the list. */
+    /**
+     * Extra classes on the list.
+     * @default ""
+     */
     className?: string;
 }): import("react").JSX.Element;

package/dist/types/components/AppInfoTip.d.ts

@@ -31,4 +31,4 @@ export default function AppInfoTip(props: {
      * @default ""
      */
     className?: string;
-}): import("react").JSX.Element;
+}): import("react").JSX.Element | null;

package/dist/types/components/AppInlineEdit.d.ts

@@ -45,7 +45,10 @@ export default function AppInlineEdit(props: {
      * @default "text"
      */
     type?: 'text' | 'number' | 'select' | 'date' | 'textarea';
-    /** The choices of a select. */
+    /**
+     * The choices of a select.
+     * @default []
+     */
     options?: {
         value: string | number;
         label: string;
@@ -61,7 +64,10 @@ export default function AppInlineEdit(props: {
      * @default false
      */
     disabled?: boolean;
-    /** Extra classes on the root element. */
+    /**
+     * Extra classes on the root element.
+     * @default ""
+     */
     className?: string;
     /** The root's id; the control and error ids derive from it. Generated when omitted. */
     id?: string;

package/dist/types/components/AppInput.d.ts

@@ -46,15 +46,26 @@ declare const AppInput: import("react").ForwardRefExoticComponent<{
     value?: string | number;
     /** The starting value of an uncontrolled field. */
     defaultValue?: string | number;
-    /** Extra classes on the control. */
+    /**
+     * Extra classes on the control.
+     * @default ""
+     */
     className?: string;
-    /** Extra classes on the field wrapper. */
+    /**
+     * Extra classes on the field wrapper.
+     * @default ""
+     */
     fieldClassName?: string;
     /**
      * Disables the field.
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Locks the field; the value still posts. A clearable field shows no clear button.
+     * @default false
+     */
+    readOnly?: boolean;
     /**
      * Shows a clear button while the field has a value.
      * @default false

package/dist/types/components/AppInputGroup.d.ts

@@ -37,6 +37,9 @@ export default function AppInputGroup(props: {
      * @default "md"
      */
     size?: 'sm' | 'md' | 'lg';
-    /** Extra class on the root. */
+    /**
+     * Extra class on the root.
+     * @default ""
+     */
     className?: string;
 }): import("react").JSX.Element;

package/dist/types/components/AppKanban.d.ts

@@ -137,7 +137,10 @@ export default function AppKanban(props: {
      * @default "rupees"
      */
     summaryUnit?: 'rupees' | 'paise';
-    /** Extra classes on the board. */
+    /**
+     * Extra classes on the board.
+     * @default ""
+     */
     className?: string;
     /** The board's id; the column, body and help ids derive from it. Generated when omitted. */
     id?: string;

package/dist/types/components/AppKbd.d.ts

@@ -11,6 +11,9 @@
  */
 export default function AppKbd(props: {
     children: string | number;
-    /** Extra classes on the key chip. */
+    /**
+     * Extra classes on the key chip.
+     * @default ""
+     */
     className?: string;
 }): import("react").JSX.Element;

package/dist/types/components/AppKpiTile.d.ts

@@ -79,19 +79,40 @@ export default function AppKpiTile(props: {
     /** Renders the whole tile as a link to this address. */
     href?: string;
     linkComponent?: import('react').ElementType;
-    /** Extra classes on the tile root. */
+    /**
+     * Extra classes on the tile root.
+     * @default ""
+     */
     className?: string;
     style?: import('react').CSSProperties;
-    /** Extra classes on the icon chip. */
+    /**
+     * Extra classes on the icon chip.
+     * @default ""
+     */
     iconClassName?: string;
-    /** Extra classes on the label. */
+    /**
+     * Extra classes on the label.
+     * @default ""
+     */
     labelClassName?: string;
-    /** Extra classes on the value. */
+    /**
+     * Extra classes on the value.
+     * @default ""
+     */
     valueClassName?: string;
-    /** Extra classes on the caption. */
+    /**
+     * Extra classes on the caption.
+     * @default ""
+     */
     captionClassName?: string;
-    /** Extra classes on the delta. */
+    /**
+     * Extra classes on the delta.
+     * @default ""
+     */
     deltaClassName?: string;
-    /** Extra classes on the sparkline. */
+    /**
+     * Extra classes on the sparkline.
+     * @default ""
+     */
     sparklineClassName?: string;
 }): import("react").JSX.Element;

package/dist/types/components/AppLightbox.d.ts

@@ -44,6 +44,9 @@ export default function AppLightbox(props: {
     openIndex?: number;
     onChange?: (index: number) => void;
     onClose?: () => void;
-    /** Extra classes on the gallery. */
+    /**
+     * Extra classes on the gallery.
+     * @default ""
+     */
     className?: string;
 }): import("react").JSX.Element;

package/dist/types/components/AppMarkdown.d.ts

@@ -21,6 +21,9 @@ export default function AppMarkdown(props: {
     value?: string;
     resolveLink?: (href: string) => string | null | undefined;
     linkComponent?: import('react').ElementType;
-    /** Extra classes on the root element. */
+    /**
+     * Extra classes on the root element.
+     * @default ""
+     */
     className?: string;
 }): import("react").JSX.Element;

package/dist/types/components/AppMentionInput.d.ts

@@ -68,9 +68,15 @@ declare const AppMentionInput: import("react").ForwardRefExoticComponent<{
      * @default "More information"
      */
     helpLabel?: string;
-    /** Extra classes on the element. */
+    /**
+     * Extra classes on the element.
+     * @default ""
+     */
     className?: string;
-    /** Extra classes on the field wrapper. */
+    /**
+     * Extra classes on the field wrapper.
+     * @default ""
+     */
     fieldClassName?: string;
 } & import("react").RefAttributes<HTMLElement>>;
 export default AppMentionInput;

package/dist/types/components/AppMenubar.d.ts

@@ -42,6 +42,9 @@ export default function AppMenubar(props: {
      */
     ariaLabel?: string;
     linkComponent?: import('react').ElementType;
-    /** Extra classes on the bar. */
+    /**
+     * Extra classes on the bar.
+     * @default ""
+     */
     className?: string;
 }): import("react").JSX.Element;

package/dist/types/components/AppMeter.d.ts

@@ -56,6 +56,9 @@ export default function AppMeter(props: {
      * @default false
      */
     showLabel?: boolean;
-    /** Extra classes on the component. */
+    /**
+     * Extra classes on the component.
+     * @default ""
+     */
     className?: string;
 }): import("react").JSX.Element;