@smwb/ui-react 2.6.3 → 2.8.0

package/dist/components/inputs/selectField/optionNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"optionNavigation.js","sources":["../../../../src/components/inputs/selectField/optionNavigation.ts"],"sourcesContent":["// Moves of the active option over a select's options, by index in the order\n// they are drawn. A disabled option is passed over, as in a native select.\n\nexport type IsOptionEnabled = (index: number) => boolean;\n\n/** The first enabled option, or -1. */\nexport function firstOption(count: number, isEnabled: IsOptionEnabled): number {\n  for (let index = 0; index < count; index++) {\n    if (isEnabled(index)) {\n      return index;\n    }\n  }\n  return -1;\n}\n\n/** The last enabled option, or -1. */\nexport function lastOption(count: number, isEnabled: IsOptionEnabled): number {\n  for (let index = count - 1; index >= 0; index--) {\n    if (isEnabled(index)) {\n      return index;\n    }\n  }\n  return -1;\n}\n\n/**\n * The enabled option `steps` options after `from` (before it for a negative\n * count), stopping at the first or the last one. With no active option, a move\n * down starts at the first option and a move up at the last.\n */\nexport function moveOption(count: number, isEnabled: IsOptionEnabled, from: number, steps: number): number {\n  if (from < 0) {\n    return steps > 0 ? firstOption(count, isEnabled) : lastOption(count, isEnabled);\n  }\n  const direction = steps > 0 ? 1 : -1;\n  let result = from;\n  let left = Math.abs(steps);\n  for (let index = from + direction; index >= 0 && index < count && left > 0; index += direction) {\n    if (isEnabled(index)) {\n      result = index;\n      left--;\n    }\n  }\n  return result;\n}\n\n/**\n * Type-ahead: the next enabled option whose text starts with what was typed.\n * One character typed again and again (\"ttt\") steps through the options that\n * start with it; a longer string keeps the current option while it matches.\n */\nexport function matchOption(texts: string[], isEnabled: IsOptionEnabled, typed: string, from: number): number {\n  const query = typed.toLowerCase();\n  const repeated = Array.from(query).every((char) => char === query.charAt(0));\n  const prefix = repeated ? query.charAt(0) : query;\n  const start = repeated ? from + 1 : Math.max(from, 0);\n  for (let step = 0; step < texts.length; step++) {\n    const index = (start + step) % texts.length;\n    if (isEnabled(index) && texts[index]?.toLowerCase().startsWith(prefix)) {\n      return index;\n    }\n  }\n  return -1;\n}\n"],"names":["firstOption","count","isEnabled","index","lastOption","moveOption","from","steps","direction","result","left","matchOption","texts","typed","_a","query","repeated","char","prefix","start","step"],"mappings":"AAMO,SAASA,EAAYC,GAAeC,GAAoC;AAC7E,WAASC,IAAQ,GAAGA,IAAQF,GAAOE;AACjC,QAAID,EAAUC,CAAK;AACjB,aAAOA;AAGX,SAAO;AACT;AAGO,SAASC,EAAWH,GAAeC,GAAoC;AAC5E,WAASC,IAAQF,IAAQ,GAAGE,KAAS,GAAGA;AACtC,QAAID,EAAUC,CAAK;AACjB,aAAOA;AAGX,SAAO;AACT;AAOO,SAASE,EAAWJ,GAAeC,GAA4BI,GAAcC,GAAuB;AACzG,MAAID,IAAO;AACT,WAAOC,IAAQ,IAAIP,EAAYC,GAAOC,CAAS,IAAIE,EAAWH,GAAOC,CAAS;AAEhF,QAAMM,IAAYD,IAAQ,IAAI,IAAI;AAClC,MAAIE,IAASH,GACTI,IAAO,KAAK,IAAIH,CAAK;AACzB,WAASJ,IAAQG,IAAOE,GAAWL,KAAS,KAAKA,IAAQF,KAASS,IAAO,GAAGP,KAASK;AACnF,IAAIN,EAAUC,CAAK,MACjBM,IAASN,GACTO;AAGJ,SAAOD;AACT;AAOO,SAASE,EAAYC,GAAiBV,GAA4BW,GAAeP,GAAsB;AA7CvG,MAAAQ;AA8CL,QAAMC,IAAQF,EAAM,YAAA,GACdG,IAAW,MAAM,KAAKD,CAAK,EAAE,MAAM,CAACE,MAASA,MAASF,EAAM,OAAO,CAAC,CAAC,GACrEG,IAASF,IAAWD,EAAM,OAAO,CAAC,IAAIA,GACtCI,IAAQH,IAAWV,IAAO,IAAI,KAAK,IAAIA,GAAM,CAAC;AACpD,WAASc,IAAO,GAAGA,IAAOR,EAAM,QAAQQ,KAAQ;AAC9C,UAAMjB,KAASgB,IAAQC,KAAQR,EAAM;AACrC,QAAIV,EAAUC,CAAK,OAAKW,IAAAF,EAAMT,CAAK,MAAX,QAAAW,EAAc,cAAc,WAAWI;AAC7D,aAAOf;AAAA,EAEX;AACA,SAAO;AACT;"}

package/dist/components/inputs/selectField/selectField.d.ts

@@ -5,6 +5,13 @@ import { MenuItemProps } from "../../navigation/menu";
 export type OnSelectChange = (e: SyntheticEvent, data: SelectFieldProps) => void;
 export interface SelectFieldProps {
     className?: string;
+    /**
+     * The selected value, or the values of a `multiple` field. Any value but
+     * `undefined` makes the field controlled: it shows this value and nothing
+     * else, and a pick, a chip delete or a clear only asks for a change through
+     * `onChange`. `null` means nothing is selected. While `value` is `undefined`,
+     * the field keeps its own value, starting from `defaultValue`.
+     */
     value?: null | string | number | (string | number | undefined | null)[];
     defaultValue?: null | string | number | (string | number)[];
     onChange?: OnSelectChange;
@@ -16,13 +23,25 @@ export interface SelectFieldProps {
     menuMiddleware?: DropdownItemProps["menuMiddleware"];
     menuNoItemsMessage?: React.ReactNode;
     menuContainer?: HTMLElement;
+    /**
+     * A search box for the options: `true` puts it in the field, where it takes
+     * the focus and is the combobox; `"menu"` puts it at the top of the menu,
+     * which moves the focus into it when it opens.
+     */
     search?: true | false | "menu";
     chips?: boolean;
     isFocused?: boolean;
     error?: boolean;
     items: DropdownItem[];
+    /**
+     * Visible label, drawn above the field (an `inline` field draws none). It
+     * names the combobox, whose value is the selected text: "Country", "Russia".
+     * With `chips` the chips' texts follow it in the name: "Labels Backend Docs".
+     */
     label?: string;
     variant?: "outlined" | "filled";
+    /** Height of the field, as for TextField: `small` (40px, for toolbars), `medium` (default) or `large`. */
+    size?: "small" | "medium" | "large";
     fullWidth?: boolean;
     helperText?: React.ReactNode;
     onSearch?: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -31,6 +50,12 @@ export interface SelectFieldProps {
     inline?: boolean;
     endAdornment?: React.ReactNode;
     hideSelectArrowIcon?: boolean;
+    /**
+     * Draws an option in place of the default one. It gets the option's props
+     * and returns its `<li>`: pass `id`, `role`, `aria-selected`, `aria-disabled`,
+     * `className` and `onClick` on to it, so the option can be reached from the
+     * keyboard, read out and picked.
+     */
     optionRenderer?: (args: MenuItemProps) => React.ReactNode;
     /** Shows a clear button to reset the selection. */
     clearable?: boolean;
@@ -42,8 +67,15 @@ export interface SelectFieldProps {
     virtualized?: boolean;
     /** Row height (px) used when `virtualized`. */
     itemHeight?: number;
-    /** Accessible label for the combobox control. */
+    /**
+     * Accessible name of the combobox. Replaces the name the visible `label`
+     * gives it; a field without a drawn label needs it.
+     */
     "aria-label"?: string;
+    /**
+     * Id of the control, the part of the field that holds the selected text. It is
+     * the combobox, unless `search` puts a search box in it: then the box is.
+     */
     id?: string;
 }
 export declare const SelectField: React.ForwardRefExoticComponent<SelectFieldProps & React.RefAttributes<HTMLSpanElement>>;