@vector-business-services/cristal-ds-web 0.21.0 → 0.23.0

package/dist/index.d.cts

@@ -84,6 +84,11 @@ interface AutoCompleteProps extends Omit<AutoCompleteProps$1, 'size' | 'variant'
     dropdown?: boolean;
     /** Nome da seta para o leitor de tela. Padrão: "Mostrar opções". */
     dropdownAriaLabel?: string;
+    /**
+     * O clique no campo abre a lista, com as sugestões do texto que já está nele (com o campo vazio,
+     * todas). Padrão: true.
+     */
+    openOnClick?: boolean;
 }
 declare const AutoComplete: react.ForwardRefExoticComponent<AutoCompleteProps & react.RefAttributes<HTMLInputElement>>;
 
@@ -320,34 +325,6 @@ interface ContextMenuHandle {
 }
 declare const ContextMenu: react.ForwardRefExoticComponent<ContextMenuProps & react.RefAttributes<ContextMenuHandle>>;
 
-type DatePickerVariant = InputVariant;
-type DatePickerSize = InputSize;
-/**
- * Props do Calendar do PrimeReact (`selectionMode` single, range ou multiple, `numberOfMonths`,
- * `view`, `dateFormat`, `minDate`, `maxDate`, `disabledDates`, `showTime`...), mais o campo do Input
- * do Cristal. O visual (pt e unstyled), o ícone e as setas são do Cristal.
- */
-interface DatePickerProps<TMode extends CalendarSelectionMode = 'single'> extends Omit<CalendarProps$1<TMode>, 'pt' | 'ptOptions' | 'unstyled' | 'inline' | 'prevIcon' | 'nextIcon' | 'showIcon' | 'icon' | 'iconPos' | 'invalid' | 'variant' | 'inputClassName' | 'panelClassName'> {
-    /** Type no Figma (Input Text): Outline (com borda) e Filled (com fundo). */
-    variant?: DatePickerVariant;
-    /** Size no Figma (Input Text): 32, 36, 42 e 48px de altura do campo. */
-    size?: DatePickerSize;
-    /** Rótulo acima do campo (Label no Figma). Sem rótulo, passe `aria-label`. */
-    label?: string;
-    /** Dica abaixo do campo (Hint no Figma). */
-    hint?: string;
-    /** Mensagem de erro: deixa o campo no estado Error e mostra a dica de erro no lugar da dica. */
-    error?: string;
-    /** Dias de folga (Day Off no Figma): aparecem riscados. Para não deixar escolher, use `disabledDates`. */
-    offDays?: Date[];
-}
-/** A ref é a do Calendar do Prime: `show()`, `hide()`, `getInput()`, `getElement()`... */
-type DatePickerHandle = Calendar$1;
-/** DatePicker do Figma "Cristal - Core Components | Web": o campo com o calendário em popup. */
-declare const DatePicker: <TMode extends CalendarSelectionMode = "single">(props: DatePickerProps<TMode> & {
-    ref?: Ref<DatePickerHandle>;
-}) => ReactElement;
-
 /** Um período: [início, fim], com as duas datas no mesmo dia quando é um dia só. */
 type DateRange = [Date, Date];
 /** Item da lista de períodos do Data Picker (.Period no Figma). */
@@ -400,6 +377,47 @@ declare const DATE_PERIODS: {
     };
 };
 
+type DatePickerVariant = InputVariant;
+type DatePickerSize = InputSize;
+/**
+ * Props do Calendar do PrimeReact (`selectionMode` single, range ou multiple, `numberOfMonths`,
+ * `view`, `dateFormat`, `minDate`, `maxDate`, `disabledDates`, `showTime`...), mais o campo do Input
+ * do Cristal. O visual (pt e unstyled), o ícone e as setas são do Cristal.
+ */
+interface DatePickerProps<TMode extends CalendarSelectionMode = 'single'> extends Omit<CalendarProps$1<TMode>, 'pt' | 'ptOptions' | 'unstyled' | 'inline' | 'prevIcon' | 'nextIcon' | 'showIcon' | 'icon' | 'iconPos' | 'invalid' | 'variant' | 'inputClassName' | 'panelClassName'> {
+    /** Type no Figma (Input Text): Outline (com borda) e Filled (com fundo). */
+    variant?: DatePickerVariant;
+    /** Size no Figma (Input Text): 32, 36, 42 e 48px de altura do campo. */
+    size?: DatePickerSize;
+    /** Rótulo acima do campo (Label no Figma). Sem rótulo, passe `aria-label`. */
+    label?: string;
+    /** Dica abaixo do campo (Hint no Figma). */
+    hint?: string;
+    /** Mensagem de erro: deixa o campo no estado Error e mostra a dica de erro no lugar da dica. */
+    error?: string;
+    /** Dias de folga (Day Off no Figma): aparecem riscados. Para não deixar escolher, use `disabledDates`. */
+    offDays?: Date[];
+    /**
+     * Lista de períodos à esquerda do calendário, com os campos de data inicial e final em cima (o
+     * Data Picker do Figma). Só com `selectionMode="range"`; os do Figma estão em `DATE_PERIODS`.
+     * Padrão: sem lista.
+     */
+    periods?: DateRangePeriod[];
+    /**
+     * Rodapé com Fechar e Selecionar (Data Picker do Figma): a escolha só vale no Selecionar; o
+     * Fechar, o Esc e o clique fora descartam. Padrão: false.
+     */
+    footer?: boolean;
+    /** O dia de hoje para os períodos (Hoje, Este mês...). Padrão: a data atual. */
+    today?: Date;
+}
+/** A ref é a do Calendar do Prime: `show()`, `hide()`, `getInput()`, `getElement()`... */
+type DatePickerHandle = Calendar$1;
+/** DatePicker do Figma "Cristal - Core Components | Web": o campo com o calendário em popup. */
+declare const DatePicker: <TMode extends CalendarSelectionMode = "single">(props: DatePickerProps<TMode> & {
+    ref?: Ref<DatePickerHandle>;
+}) => ReactElement;
+
 interface DateRangeButtonChangeEvent {
     /** O período escolhido: [início, fim]. */
     value: DateRange;

package/dist/index.d.ts

@@ -84,6 +84,11 @@ interface AutoCompleteProps extends Omit<AutoCompleteProps$1, 'size' | 'variant'
     dropdown?: boolean;
     /** Nome da seta para o leitor de tela. Padrão: "Mostrar opções". */
     dropdownAriaLabel?: string;
+    /**
+     * O clique no campo abre a lista, com as sugestões do texto que já está nele (com o campo vazio,
+     * todas). Padrão: true.
+     */
+    openOnClick?: boolean;
 }
 declare const AutoComplete: react.ForwardRefExoticComponent<AutoCompleteProps & react.RefAttributes<HTMLInputElement>>;
 
@@ -320,34 +325,6 @@ interface ContextMenuHandle {
 }
 declare const ContextMenu: react.ForwardRefExoticComponent<ContextMenuProps & react.RefAttributes<ContextMenuHandle>>;
 
-type DatePickerVariant = InputVariant;
-type DatePickerSize = InputSize;
-/**
- * Props do Calendar do PrimeReact (`selectionMode` single, range ou multiple, `numberOfMonths`,
- * `view`, `dateFormat`, `minDate`, `maxDate`, `disabledDates`, `showTime`...), mais o campo do Input
- * do Cristal. O visual (pt e unstyled), o ícone e as setas são do Cristal.
- */
-interface DatePickerProps<TMode extends CalendarSelectionMode = 'single'> extends Omit<CalendarProps$1<TMode>, 'pt' | 'ptOptions' | 'unstyled' | 'inline' | 'prevIcon' | 'nextIcon' | 'showIcon' | 'icon' | 'iconPos' | 'invalid' | 'variant' | 'inputClassName' | 'panelClassName'> {
-    /** Type no Figma (Input Text): Outline (com borda) e Filled (com fundo). */
-    variant?: DatePickerVariant;
-    /** Size no Figma (Input Text): 32, 36, 42 e 48px de altura do campo. */
-    size?: DatePickerSize;
-    /** Rótulo acima do campo (Label no Figma). Sem rótulo, passe `aria-label`. */
-    label?: string;
-    /** Dica abaixo do campo (Hint no Figma). */
-    hint?: string;
-    /** Mensagem de erro: deixa o campo no estado Error e mostra a dica de erro no lugar da dica. */
-    error?: string;
-    /** Dias de folga (Day Off no Figma): aparecem riscados. Para não deixar escolher, use `disabledDates`. */
-    offDays?: Date[];
-}
-/** A ref é a do Calendar do Prime: `show()`, `hide()`, `getInput()`, `getElement()`... */
-type DatePickerHandle = Calendar$1;
-/** DatePicker do Figma "Cristal - Core Components | Web": o campo com o calendário em popup. */
-declare const DatePicker: <TMode extends CalendarSelectionMode = "single">(props: DatePickerProps<TMode> & {
-    ref?: Ref<DatePickerHandle>;
-}) => ReactElement;
-
 /** Um período: [início, fim], com as duas datas no mesmo dia quando é um dia só. */
 type DateRange = [Date, Date];
 /** Item da lista de períodos do Data Picker (.Period no Figma). */
@@ -400,6 +377,47 @@ declare const DATE_PERIODS: {
     };
 };
 
+type DatePickerVariant = InputVariant;
+type DatePickerSize = InputSize;
+/**
+ * Props do Calendar do PrimeReact (`selectionMode` single, range ou multiple, `numberOfMonths`,
+ * `view`, `dateFormat`, `minDate`, `maxDate`, `disabledDates`, `showTime`...), mais o campo do Input
+ * do Cristal. O visual (pt e unstyled), o ícone e as setas são do Cristal.
+ */
+interface DatePickerProps<TMode extends CalendarSelectionMode = 'single'> extends Omit<CalendarProps$1<TMode>, 'pt' | 'ptOptions' | 'unstyled' | 'inline' | 'prevIcon' | 'nextIcon' | 'showIcon' | 'icon' | 'iconPos' | 'invalid' | 'variant' | 'inputClassName' | 'panelClassName'> {
+    /** Type no Figma (Input Text): Outline (com borda) e Filled (com fundo). */
+    variant?: DatePickerVariant;
+    /** Size no Figma (Input Text): 32, 36, 42 e 48px de altura do campo. */
+    size?: DatePickerSize;
+    /** Rótulo acima do campo (Label no Figma). Sem rótulo, passe `aria-label`. */
+    label?: string;
+    /** Dica abaixo do campo (Hint no Figma). */
+    hint?: string;
+    /** Mensagem de erro: deixa o campo no estado Error e mostra a dica de erro no lugar da dica. */
+    error?: string;
+    /** Dias de folga (Day Off no Figma): aparecem riscados. Para não deixar escolher, use `disabledDates`. */
+    offDays?: Date[];
+    /**
+     * Lista de períodos à esquerda do calendário, com os campos de data inicial e final em cima (o
+     * Data Picker do Figma). Só com `selectionMode="range"`; os do Figma estão em `DATE_PERIODS`.
+     * Padrão: sem lista.
+     */
+    periods?: DateRangePeriod[];
+    /**
+     * Rodapé com Fechar e Selecionar (Data Picker do Figma): a escolha só vale no Selecionar; o
+     * Fechar, o Esc e o clique fora descartam. Padrão: false.
+     */
+    footer?: boolean;
+    /** O dia de hoje para os períodos (Hoje, Este mês...). Padrão: a data atual. */
+    today?: Date;
+}
+/** A ref é a do Calendar do Prime: `show()`, `hide()`, `getInput()`, `getElement()`... */
+type DatePickerHandle = Calendar$1;
+/** DatePicker do Figma "Cristal - Core Components | Web": o campo com o calendário em popup. */
+declare const DatePicker: <TMode extends CalendarSelectionMode = "single">(props: DatePickerProps<TMode> & {
+    ref?: Ref<DatePickerHandle>;
+}) => ReactElement;
+
 interface DateRangeButtonChangeEvent {
     /** O período escolhido: [início, fim]. */
     value: DateRange;