kiban-design-system 1.0.245-alpha.0 → 1.0.247-alpha.0

package/dist/index.js

@@ -2243,6 +2243,7 @@ const useTheme = () => {
  * options can be selected or not
  * @param {string} SelectProps.placeholder - Select Placeholder
  * @param {string} SelectProps.selectLabel - Select Label
+ * @param {object} InputTextProps.secondaryAction - Text for show icon inside right input.
  * @param {string[]} SelectProps.selected - Selected data to highlight in the render
  * of the list items
  * @param {Function} SelectProps.onChange - Action that is triggered by selecting
@@ -2262,7 +2263,7 @@ const useTheme = () => {
  * @param {string} InputTextProps.ariaLabel - Label to use in automatic tests
  * @returns {symbol} - Element Select
  */
-const Select = ({ ariaLabel, items, sections, isMultiple, placeholder, label, selected, onChange, searchPlaceholder, searchLabel, helperText, isHelperMode, isDisabled = false, tooltip, isDanger, isReadOnly = false, id, emptyState, onBlur, isRequired, tooltipLabel, action, showSearch = true, }) => {
+const Select = ({ ariaLabel, items, sections, isMultiple, placeholder, label, secondaryAction, selected, onChange, searchPlaceholder, searchLabel, helperText, isHelperMode, isDisabled = false, tooltip, isDanger, isReadOnly = false, id, emptyState, onBlur, isRequired, tooltipLabel, action, showSearch = true, }) => {
     const [isActivePopover, setIsActive] = useState(false);
     const selectActivatorRef = useRef(null);
     const [parentCoord, setParentCoords] = useState();
@@ -2437,8 +2438,12 @@ const Select = ({ ariaLabel, items, sections, isMultiple, placeholder, label, se
             setParentCoords(selectActivatorRef.current.getBoundingClientRect());
         }
     }, [selectActivatorRef]);
+    const showLabelContainer = label || secondaryAction;
     const tooltipLabelMarkup = useMemo(() => tooltipLabel ? (jsx(AlphaTooltip, Object.assign({ content: tooltipLabel.content, theme: tooltipLabel.theme, width: 'default', parentTooltip: parentCoord }, { children: jsx("span", Object.assign({ className: 'Select__TooltipLabelContainer' }, { children: jsx(Icon, { name: tooltipLabel.icon || 'Info' }, void 0) }), void 0) }), void 0)) : null, [tooltipLabel, parentCoord]);
-    return (jsxs("div", Object.assign({ className: `Select ${isMultiple ? 'Select--isMultiple' : ''}`, ref: selectActivatorRef }, { children: [label && (jsxs("div", Object.assign({ className: 'Select__label' }, { children: [jsx("label", { children: label }, void 0), isRequired && jsx("span", Object.assign({ className: 'Select__label-required' }, { children: "*" }), void 0), tooltipLabelMarkup] }), void 0)), tooltip ? renderWithTooltip() : renderInput(), helperText && jsx("div", Object.assign({ className: 'Select__helperText' }, { children: helperText }), void 0)] }), void 0));
+    const secondaryActionMarkup = secondaryAction ? (jsx("div", Object.assign({ className: 'Select__labelContainer--secondaryAction' }, { children: jsx(Button, Object.assign({ type: 'button', onClick: secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.onClick, contentAlign: 'center' }, { children: secondaryAction.text }), void 0) }), void 0)) : null;
+    const requiredMarkup = isRequired ? (jsx("span", Object.assign({ className: 'Select__labelContainer--required' }, { children: "*" }), void 0)) : null;
+    const labelContainerMarkup = showLabelContainer ? (jsxs("div", Object.assign({ className: 'Select__labelContainer' }, { children: [label && (jsxs("label", Object.assign({ className: 'Select__labelContainer--label' }, { children: [label, requiredMarkup, tooltipLabelMarkup] }), void 0)), secondaryActionMarkup] }), void 0)) : null;
+    return (jsxs("div", Object.assign({ className: `Select ${isMultiple ? 'Select--isMultiple' : ''}`, ref: selectActivatorRef }, { children: [labelContainerMarkup, tooltip ? renderWithTooltip() : renderInput(), helperText && jsx("div", Object.assign({ className: 'Select__helperText' }, { children: helperText }), void 0)] }), void 0));
 };
 
 // these aren't really private, but nor are they really useful to document
@@ -24584,17 +24589,17 @@ function Form({ ariaLabel, data, fields, fieldsSection, iconHelperText, onChange
     return jsx(Fragment, { children: formMarkup }, void 0);
 }
 
-const SectionForm = ({ ariaLabel, data, fields, fieldsSection, iconDeletable, iconHelperText, onChange, onDelete, tagRemoveIcon, isDeletable, extraPropsField, }) => {
+const SectionForm = ({ ariaLabel, data, fields, fieldsSection, iconDeletable, iconHelperText, onChange, onDelete, tagRemoveIcon, isDeletable, extraPropsField, columnsSize: columnsSizeProps = 3, }) => {
     // eslint-disable-next-line
     // @ts-ignore
-    const wrapperMarkup = jsx(Grid.Item, { size: 3 }, void 0);
+    const wrapperMarkup = jsx(Grid.Item, { size: columnsSizeProps }, void 0);
     const formMarkup = (jsx(Form, { ariaLabel: ariaLabel, data: data, fields: fields, fieldsSection: fieldsSection, iconHelperText: iconHelperText, onChange: onChange, fieldWrapperElement: wrapperMarkup, tagRemoveIcon: tagRemoveIcon, extraPropsField: extraPropsField }, void 0));
     const gridMarkup = jsx(Grid, Object.assign({ isMultiline: true }, { children: formMarkup }), void 0);
     return (jsx(DeletableSection, Object.assign({ ariaLabel: ariaLabel, onDelete: onDelete, iconDeletable: iconDeletable, isDeletable: isDeletable }, { children: gridMarkup }), void 0));
 };
 
 const COMPONENT_NAME$a = 'DynamicForm';
-const DynamicForm = ({ ariaLabel, dataFormArray = [], fields, fieldsSection, iconDeletable, iconHelperText, labelDivider, onChange, onAddForm, tagRemoveIcon, deletableFormArray, extraPropsFieldsArray, }) => {
+const DynamicForm = ({ ariaLabel, dataFormArray = [], fields, fieldsSection, iconDeletable, iconHelperText, labelDivider, onChange, onAddForm, tagRemoveIcon, deletableFormArray, extraPropsFieldsArray, columnsSize, }) => {
     const { theme } = useTheme();
     const handleChange = (contact, id) => {
         if (onChange) {
@@ -24619,7 +24624,7 @@ const DynamicForm = ({ ariaLabel, dataFormArray = [], fields, fieldsSection, ico
         const extraProps = extraPropsFieldsArray && index < extraPropsFieldsArray.length
             ? extraPropsFieldsArray[index]
             : undefined;
-        return (jsx(SectionForm, { ariaLabel: ariaLabel, data: form, fields: fields, fieldsSection: fieldsSection, iconDeletable: iconDeletable, iconHelperText: iconHelperText, onChange: (formData) => handleChange(formData, form.id || ''), onDelete: () => handleDelete(form.id || ''), tagRemoveIcon: tagRemoveIcon, isDeletable: isDeletable, extraPropsField: extraProps }, `DynamicForm-${form.id}-${index}}`));
+        return (jsx(SectionForm, { ariaLabel: ariaLabel, data: form, fields: fields, fieldsSection: fieldsSection, iconDeletable: iconDeletable, iconHelperText: iconHelperText, onChange: (formData) => handleChange(formData, form.id || ''), onDelete: () => handleDelete(form.id || ''), tagRemoveIcon: tagRemoveIcon, isDeletable: isDeletable, extraPropsField: extraProps, columnsSize: columnsSize }, `DynamicForm-${form.id}-${index}}`));
     };
     const contactsMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$a}__SectionFormWrapper` }, { children: dataFormArray.map(renderForm) }), void 0));
     const dividerMarkup = labelDivider && jsx(Divider, { label: labelDivider }, void 0);