kiban-design-system 1.1.1-hotfix.0 → 1.1.1

package/dist/components/IconButton/IconButton.props.d.ts

@@ -1,32 +1,31 @@
-/// <reference types="react" />
-import type { IconName } from '../Icon';
-export interface IconButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
-    /**
-     * The type of button to display
-     *
-     * @default 'primary'
-     */
-    appearance?: 'primary' | 'secondary' | 'tertiary' | 'transparent' | 'danger';
-    /**
-     * Changes the size of the button, giving it more or less padding and changing the font size
-     *
-     * @default 'medium'
-     */
-    size?: 'small' | 'medium' | 'large';
-    /**
-     * The show a iconbutton round
-     *
-     * @default false
-     */
-    isRound?: boolean;
-    /** to show styles disabled */
-    isDisabled?: boolean;
-    /** Icon to be displayed into button */
-    icon: IconName;
-    /** Callback when clicked */
-    onClick?: () => void;
-    /** Callback when focus leaves button */
-    onBlur?: () => void;
-    /** Callback when button becomes focussed */
-    onFocus?: () => void;
-}
+import type { IconName } from '../Icon';
+export interface IconButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+    /**
+     * The type of button to display
+     *
+     * @default 'primary'
+     */
+    appearance?: 'primary' | 'secondary' | 'tertiary' | 'transparent' | 'danger';
+    /**
+     * Changes the size of the button, giving it more or less padding and changing the font size
+     *
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * The show a iconbutton round
+     *
+     * @default false
+     */
+    isRound?: boolean;
+    /** to show styles disabled */
+    isDisabled?: boolean;
+    /** Icon to be displayed into button */
+    icon: IconName;
+    /** Callback when clicked */
+    onClick?: () => void;
+    /** Callback when focus leaves button */
+    onBlur?: () => void;
+    /** Callback when button becomes focussed */
+    onFocus?: () => void;
+}

package/dist/components/IconButton/index.d.ts

@@ -1,3 +1,3 @@
-import IconButton from './IconButton';
-export type { IconButtonProps } from './IconButton.props';
-export { IconButton };
+import IconButton from './IconButton';
+export type { IconButtonProps } from './IconButton.props';
+export { IconButton };

package/dist/components/IndexList/IndexList.d.ts

@@ -1,13 +1,12 @@
-/// <reference types="react" />
-import type { IndexListProps } from './IndexList.props';
-import './IndexList.styles.scss';
-/**
- * IndexList component is used to list a Index array to display as list
- *
- * @param {IndexListProps} IndexListProps - PaginationProps
- * @param {string} IndexListProps.activeValue - Value of active index
- * @param {Array} IndexListProps.indexes - Content to disolay in previous button
- * @param {Function} IndexListProps.onSelectIndex - Content to disolay in next button
- */
-declare const IndexList: ({ activeValue, indexes, onSelectIndex }: IndexListProps) => JSX.Element;
-export default IndexList;
+import type { IndexListProps } from './IndexList.props';
+import './IndexList.styles.scss';
+/**
+ * IndexList component is used to list a Index array to display as list
+ *
+ * @param {IndexListProps} IndexListProps - PaginationProps
+ * @param {string} IndexListProps.activeValue - Value of active index
+ * @param {Array} IndexListProps.indexes - Content to disolay in previous button
+ * @param {Function} IndexListProps.onSelectIndex - Content to disolay in next button
+ */
+declare const IndexList: ({ activeValue, indexes, onSelectIndex }: IndexListProps) => import("react/jsx-runtime").JSX.Element;
+export default IndexList;

package/dist/components/IndexList/IndexList.props.d.ts

@@ -1,29 +1,32 @@
-/// <reference types="react" />
-export interface Index {
-    /**
-     * Index label
-     */
-    label: React.ReactNode;
-    /**
-     * Index value
-     */
-    value: string;
-    /**
-     * Flag to set if Index is disabled
-     */
-    isDisabled: boolean;
-}
-export interface IndexListProps {
-    /**
-     * Actual Index  active value
-     */
-    activeValue?: string;
-    /**
-     * Array to show as elements in list
-     */
-    indexes?: Index[];
-    /**
-     * Array to show as elements in list
-     */
-    onSelectIndex?: (activeIndex: string) => void;
-}
+export interface Index {
+    /**
+     * Index label
+     */
+    label: React.ReactNode;
+    /**
+     * Index value
+     */
+    value: string;
+    /**
+     * Flag to set if Index is disabled
+     */
+    isDisabled: boolean;
+    /**
+     * Label to use in automatic tests
+     */
+    ariaLabel?: string;
+}
+export interface IndexListProps {
+    /**
+     * Actual Index  active value
+     */
+    activeValue?: string;
+    /**
+     * Array to show as elements in list
+     */
+    indexes?: Index[];
+    /**
+     * Array to show as elements in list
+     */
+    onSelectIndex?: (activeIndex: string) => void;
+}

package/dist/components/IndexList/index.d.ts

@@ -1,3 +1,3 @@
-import IndexList from './IndexList';
-export * from './IndexList.props';
-export { IndexList };
+import IndexList from './IndexList';
+export * from './IndexList.props';
+export { IndexList };

package/dist/components/InlineEdit/InlineEdit.d.ts

@@ -1,20 +1,20 @@
-/// <reference types="react" />
-import type { InlineEditProps } from './InlineEdit.props';
-import './InlineEdit.styles.scss';
-/**
- * InlineEdit component display a label and icon, when user click button
- * the label changes to a input text to be able to edited
- *
- * @param {InlineEditProps}  InlineEditProps - InlineEditProps
- * @param {string} InlineEditProps.value - Value to display in label and input text
- * @param {string} InlineEditProps.state - State of component, only 'edit' or 'display'
- * @param {string} InlineEditProps.size - Size of icons
- * @param {string} InlineEditProps.editIcon - Edit button icon
- * @param {string} InlineEditProps.saveIcon - Save button icon
- * @param {boolean} InlineEditProps.isDisable - Disable edit button
- * @param {Function} InlineEditProps.onEdit - Function to execute when click Edit
- * @param {Function} InlineEditProps.onSave - Function to execut when click Save
- * @param {Function} InlineEditProps.onInputChange - Function to execut when input changes
- */
-declare const InlineEdit: ({ editIcon, isDisable, onChange, onEdit, onSave, saveIcon, size, state, value, }: InlineEditProps) => JSX.Element;
-export default InlineEdit;
+import type { InlineEditProps } from './InlineEdit.props';
+import './InlineEdit.styles.scss';
+/**
+ * InlineEdit component display a label and icon, when user click button
+ * the label changes to a input text to be able to edited
+ *
+ * @param {InlineEditProps}  InlineEditProps - InlineEditProps
+ * @param {string} InlineEditProps.value - Value to display in label and input text
+ * @param {string} InlineEditProps.state - State of component, only 'edit' or 'display'
+ * @param {string} InlineEditProps.size - Size of icons
+ * @param {string} InlineEditProps.editIcon - Edit button icon
+ * @param {string} InlineEditProps.saveIcon - Save button icon
+ * @param {boolean} InlineEditProps.isDisable - Disable edit button
+ * @param {Function} InlineEditProps.onEdit - Function to execute when click Edit
+ * @param {Function} InlineEditProps.onSave - Function to execut when click Save
+ * @param {Function} InlineEditProps.onInputChange - Function to execut when input changes
+ * @param {string} InputTextProps.ariaLabel - Label to use in automatic tests
+ */
+declare const InlineEdit: ({ ariaLabel, editIcon, isDisable, onChange, onEdit, onSave, saveIcon, size, state, value, }: InlineEditProps) => import("react/jsx-runtime").JSX.Element;
+export default InlineEdit;

package/dist/components/InlineEdit/InlineEdit.props.d.ts

@@ -1,47 +1,51 @@
-import type { IconName } from '../Icon';
-export interface InlineEditProps {
-    /**
-     * Value to display that will be edited
-     */
-    value: string;
-    /**
-     * Component state, edit shows input text, display shows
-     * label
-     * @default display
-     */
-    state?: 'edit' | 'display';
-    /**
-     * Icon and label size
-     * @default medium
-     */
-    size?: 'small' | 'medium' | 'large';
-    /**
-     * Icon to display in edit button
-     * @default Edit3
-     */
-    editIcon?: IconName;
-    /**
-     * Icon to display in save button
-     * @default Check
-     */
-    saveIcon?: IconName;
-    /**
-     * Flag to enable or disable buttons
-     * @default false
-     */
-    isDisable?: boolean;
-    /**
-     * Function to execute when edit button is
-     * clicked
-     */
-    onEdit?: () => void;
-    /**
-     * Function to execute when save button is
-     * clicked
-     */
-    onSave?: () => void;
-    /**
-     * Function to execute when input changes
-     */
-    onChange: (value: string) => void;
-}
+import type { IconName } from '../Icon';
+export interface InlineEditProps {
+    /**
+     * Value to display that will be edited
+     */
+    value: string;
+    /**
+     * Component state, edit shows input text, display shows
+     * label
+     * @default display
+     */
+    state?: 'edit' | 'display';
+    /**
+     * Icon and label size
+     * @default medium
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Icon to display in edit button
+     * @default Edit3
+     */
+    editIcon?: IconName;
+    /**
+     * Icon to display in save button
+     * @default Check
+     */
+    saveIcon?: IconName;
+    /**
+     * Flag to enable or disable buttons
+     * @default false
+     */
+    isDisable?: boolean;
+    /**
+     * Function to execute when edit button is
+     * clicked
+     */
+    onEdit?: () => void;
+    /**
+     * Function to execute when save button is
+     * clicked
+     */
+    onSave?: () => void;
+    /**
+     * Function to execute when input changes
+     */
+    onChange: (value: string) => void;
+    /**
+     * Label to use in automatic tests
+     */
+    ariaLabel?: string;
+}

package/dist/components/InlineEdit/index.d.ts

@@ -1,3 +1,3 @@
-import InlineEdit from './InlineEdit';
-export * from './InlineEdit.props';
-export { InlineEdit };
+import InlineEdit from './InlineEdit';
+export * from './InlineEdit.props';
+export { InlineEdit };

package/dist/components/InputPhoneNumber/InputPhoneNumber.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
-import type { InputPhoneNumberProps } from './InputPhoneNumber.props';
-import 'react-phone-input-2/lib/style.css';
-import './InputPhoneNumber.styles.scss';
-declare const InputPhoneNumber: ({ helperText, isHelperMode, isErrorMode, label, tooltip, disabled, placeholder, id, name, value, isFocused, onChange, onBlur, onFocus, defaultCountry, language, preferredCountries, isRequired, tooltipLabel, }: InputPhoneNumberProps) => JSX.Element;
-export default InputPhoneNumber;
+import type { InputPhoneNumberProps } from "./InputPhoneNumber.props";
+import "react-phone-input-2/lib/style.css";
+import "./InputPhoneNumber.styles.scss";
+declare const InputPhoneNumber: ({ ariaLabel, helperText, isHelperMode, isErrorMode, label, tooltip, disabled, placeholder, id, name, value, isFocused, onChange, onBlur, onFocus, defaultCountry, language, preferredCountries, isRequired, tooltipLabel, }: InputPhoneNumberProps) => import("react/jsx-runtime").JSX.Element;
+export default InputPhoneNumber;

package/dist/components/InputPhoneNumber/InputPhoneNumber.props.d.ts

@@ -1,103 +1,106 @@
-/// <reference types="react" />
-import type { CountryData } from 'react-phone-input-2';
-import type { TooltipInput } from '../InputText';
-export type { CountryData };
-export interface TooltipInputPhoneNumber {
-    text?: string;
-    id?: string;
-    position?: 'topLeft' | 'topRight' | 'topCenter' | 'bottomLeft' | 'bottomRight' | 'bottomCenter' | 'right' | 'left';
-}
-export interface InputPhoneNumberOnChangeProps {
-    paramsOnChange: {} | CountryData;
-    value: string;
-    formattedValue: string;
-}
-export interface InputPhoneNumberOnFocusProps extends InputPhoneNumberOnChangeProps {
-    event: React.FocusEvent<HTMLInputElement>;
-}
-export interface InputPhoneNumberProps {
-    /**
-     * Element to show a helper text information in inputText
-     */
-    helperText?: React.ReactNode;
-    /**
-     * Show input label
-     */
-    label?: string;
-    /**
-     * To show a different style in input (style help)
-     *
-     * @default false
-     */
-    isHelperMode?: boolean;
-    /**
-     * To show a different style in input (style error)
-     *
-     * @default false
-     */
-    isErrorMode?: boolean;
-    /**
-     * To show tooltip
-     *
-     */
-    tooltip?: TooltipInputPhoneNumber;
-    /**
-     * To desactivate input
-     *
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * To event on change input
-     *
-     */
-    onChange?: (data: InputPhoneNumberOnChangeProps) => void;
-    /**
-     * To show a text inside input
-     */
-    placeholder?: string;
-    /** Callback when focus leaves button */
-    onBlur?: (paramsOnBlur: CountryData) => void;
-    /** Callback when input becomes focussed */
-    onFocus?: (paramsOnFocus: {} | CountryData) => void;
-    /**
-     * id element
-     *
-     */
-    id?: string;
-    /**
-     * name element
-     *
-     */
-    name?: string;
-    /**
-     * to value for input
-     *
-     */
-    value?: string;
-    /**
-     * to force input to show focus
-     *
-     * @default false
-     */
-    isFocused?: boolean;
-    /**
-     * country default
-     * @default 'mx'
-     */
-    defaultCountry?: string;
-    /**
-     * list of preferred countries
-     * @default []
-     */
-    preferredCountries?: string[];
-    /**
-     * List to language preference
-     */
-    language?: 'es' | 'en';
-    /**
-     * Returns a * if the field is required
-     */
-    isRequired?: boolean;
-    tooltipLabel?: TooltipInput;
-}
+import type { CountryData } from 'react-phone-input-2';
+import type { TooltipInput } from '../InputText';
+export type { CountryData };
+export interface TooltipInputPhoneNumber {
+    text?: string;
+    id?: string;
+    position?: 'topLeft' | 'topRight' | 'topCenter' | 'bottomLeft' | 'bottomRight' | 'bottomCenter' | 'right' | 'left';
+}
+export interface InputPhoneNumberOnChangeProps {
+    paramsOnChange: {} | CountryData;
+    value: string;
+    formattedValue: string;
+}
+export interface InputPhoneNumberOnFocusProps extends InputPhoneNumberOnChangeProps {
+    event: React.FocusEvent<HTMLInputElement>;
+}
+export interface InputPhoneNumberProps {
+    /**
+     * Element to show a helper text information in inputText
+     */
+    helperText?: React.ReactNode;
+    /**
+     * Show input label
+     */
+    label?: string;
+    /**
+     * To show a different style in input (style help)
+     *
+     * @default false
+     */
+    isHelperMode?: boolean;
+    /**
+     * To show a different style in input (style error)
+     *
+     * @default false
+     */
+    isErrorMode?: boolean;
+    /**
+     * To show tooltip
+     *
+     */
+    tooltip?: TooltipInputPhoneNumber;
+    /**
+     * To desactivate input
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * To event on change input
+     *
+     */
+    onChange?: (data: InputPhoneNumberOnChangeProps) => void;
+    /**
+     * To show a text inside input
+     */
+    placeholder?: string;
+    /** Callback when focus leaves button */
+    onBlur?: (paramsOnBlur: CountryData) => void;
+    /** Callback when input becomes focussed */
+    onFocus?: (paramsOnFocus: {} | CountryData) => void;
+    /**
+     * id element
+     *
+     */
+    id?: string;
+    /**
+     * name element
+     *
+     */
+    name?: string;
+    /**
+     * to value for input
+     *
+     */
+    value?: string;
+    /**
+     * to force input to show focus
+     *
+     * @default false
+     */
+    isFocused?: boolean;
+    /**
+     * country default
+     * @default 'mx'
+     */
+    defaultCountry?: string;
+    /**
+     * list of preferred countries
+     * @default []
+     */
+    preferredCountries?: string[];
+    /**
+     * List to language preference
+     */
+    language?: 'es' | 'en';
+    /**
+     * Returns a * if the field is required
+     */
+    isRequired?: boolean;
+    tooltipLabel?: TooltipInput;
+    /**
+     * Label to use in automatic tests
+     */
+    ariaLabel?: string;
+}

package/dist/components/InputPhoneNumber/index.d.ts

@@ -1,3 +1,3 @@
-import InputPhoneNumber from './InputPhoneNumber';
-export * from './InputPhoneNumber.props';
-export { InputPhoneNumber };
+import InputPhoneNumber from './InputPhoneNumber';
+export * from './InputPhoneNumber.props';
+export { InputPhoneNumber };

package/dist/components/InputTag/InputTag.d.ts

@@ -1,31 +1,31 @@
-/// <reference types="react" />
-import type { InputTagProps } from './InputTag.props';
-import './InputTag.styles.scss';
-/**
- * InputTag component is used to display as a tag any word
- * that was typed, to do it possible it is necessary to type enter or lose the
- * input focus, also the triggerKeys parameter is an array with extra keys that
- * user should add as trigger, now there are only two keys, comma and space.
- * if user types the backspace key and there is not letters in the input,
- * the last tag will be deleted
- *
- * @param {InputTagProps}  PageActionsProps - PageActionsProps
- * @param {ReactNode}  PageActionsProps.helperText - Messaje to display after the InputTag
- * @param {boolean} PageActionsProps.isDisabled - Flag to disable the component
- * @param {boolean} PageActionsProps.isDanger - Flag to set error styles
- * @param {boolean} PageActionsProps.isFocused - Flag to set focus styles
- * @param {boolean} PageActionsProps.isHelperMode - Flag to set help style
- * @param {boolean} PageActionsProps.isReadOnly - Flag to set input text as read only
- * @param {string} PageActionsProps.label - Label to show above
- * @param {Function} PageActionsProps.onAddTag - Function to execute when a tag is added
- * @param {Function} PageActionsProps.onBlur - Function to execute when onBlur happens
- * @param {Function} PageActionsProps.onChange - Function to execute when onChange happens
- * @param {Function} PageActionsProps.onDeleteTag - Function to execute when a tag es going to be deleted
- * @param {Function} PageActionsProps.onFocus - Function to execute when onFocus happens
- * @param {string} PageActionsProps.placeholder - Array of string to preload tags
- * @param {TagPropsInputTag[]} PageActionsProps.tags - Array of string to preload tags
- * @param {Tooltip} PageActionsProps.tooltip - Array of objects to preload tags
- * @param {keyToAddTag[]} PageActionsProps.triggerKeys - Array of string to set keys to add tag
- */
-declare const InputTag: ({ helperText, isDisabled, isDanger, isFocused, isHelperMode, isReadOnly, label, onAddTag, onBlur, onChange, onDeleteTag, onFocus, placeholder, tags, tooltip, triggerKeys, value, isRequired, tooltipLabel, }: InputTagProps) => JSX.Element;
-export default InputTag;
+import type { InputTagProps } from './InputTag.props';
+import './InputTag.styles.scss';
+/**
+ * InputTag component is used to display as a tag any word
+ * that was typed, to do it possible it is necessary to type enter or lose the
+ * input focus, also the triggerKeys parameter is an array with extra keys that
+ * user should add as trigger, now there are only two keys, comma and space.
+ * if user types the backspace key and there is not letters in the input,
+ * the last tag will be deleted
+ *
+ * @param {InputTagProps}  PageActionsProps - PageActionsProps
+ * @param {ReactNode}  PageActionsProps.helperText - Messaje to display after the InputTag
+ * @param {boolean} PageActionsProps.isDisabled - Flag to disable the component
+ * @param {boolean} PageActionsProps.isDanger - Flag to set error styles
+ * @param {boolean} PageActionsProps.isFocused - Flag to set focus styles
+ * @param {boolean} PageActionsProps.isHelperMode - Flag to set help style
+ * @param {boolean} PageActionsProps.isReadOnly - Flag to set input text as read only
+ * @param {string} PageActionsProps.label - Label to show above
+ * @param {Function} PageActionsProps.onAddTag - Function to execute when a tag is added
+ * @param {Function} PageActionsProps.onBlur - Function to execute when onBlur happens
+ * @param {Function} PageActionsProps.onChange - Function to execute when onChange happens
+ * @param {Function} PageActionsProps.onDeleteTag - Function to execute when a tag es going to be deleted
+ * @param {Function} PageActionsProps.onFocus - Function to execute when onFocus happens
+ * @param {string} PageActionsProps.placeholder - Array of string to preload tags
+ * @param {TagPropsInputTag[]} PageActionsProps.tags - Array of string to preload tags
+ * @param {Tooltip} PageActionsProps.tooltip - Array of objects to preload tags
+ * @param {keyToAddTag[]} PageActionsProps.triggerKeys - Array of string to set keys to add tag
+ * @param {string} InputTextProps.ariaLabel - Label to use in automatic tests
+ */
+declare const InputTag: ({ ariaLabel, helperText, isDisabled, isDanger, isFocused, isHelperMode, isReadOnly, label, onAddTag, onBlur, onChange, onDeleteTag, onFocus, placeholder, tags, tooltip, triggerKeys, value, isRequired, tooltipLabel, }: InputTagProps) => import("react/jsx-runtime").JSX.Element;
+export default InputTag;