groovinads-ui 1.9.7 → 1.9.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +127 -8
  2. package/dist/index.es.js +2 -2
  3. package/dist/index.js +2 -2
  4. package/index.d.ts +135 -10
  5. package/package.json +17 -13
package/README.md CHANGED
@@ -122,7 +122,8 @@ import { Button } from 'groovinads-ui';
122
122
  | `className` | String | No | n/a | n/a | Additional CSS class names that can be applied to the button. |
123
123
  | `disabled` | Boolean | No | `true` `false` | `false` | If true, disables the button. If false, the button is enabled. |
124
124
  | `endIcon` | String | No | n/a | n/a | Specifies the name of the icon to be displayed at the end of the button (after the text). |
125
- | `hideLabelOnMobile` | Boolean | No | `true` `false` | `false` | If true, the text inside the button will not be displayed on mobile. If false, the text will be displayed on mobile. |
125
+ | `hideLabelOnDesktop` | Boolean | No | `true` `false` | `false` | If true, the text inside the button will not be displayed on desktop (only visible on mobile). Cannot be used together with `hideLabelOnMobile`. |
126
+ | `hideLabelOnMobile` | Boolean | No | `true` `false` | `false` | If true, the text inside the button will not be displayed on mobile. If false, the text will be displayed on mobile. Cannot be used together with `hideLabelOnDesktop`. |
126
127
  | `onClick` | Function | No | n/a | n/a | Function to be executed when the button is clicked. |
127
128
  | `processing` | Boolean | No | `true` `false` | `false` | If true, displays a loading animation (…) with a spinner. If false, it will not be displayed. |
128
129
  | `size` | String | No | `xs` `md` `lg` | `md` | Defines the size of the button. It's optional. |
@@ -270,6 +271,7 @@ export default NestedDropdownExample;
270
271
  | `label` | Node | No | n/a | n/a | Label text for the dropdown toggle button. |
271
272
  | `onToggle` | Function | No | n/a | n/a | Callback function triggered when dropdown visibility changes. |
272
273
  | `overflow` | Boolean | No | `true` `false` | `false` | Adjusts the dropdown's position to handle overflow situations with fixed positioning. |
274
+ | `processing` | Boolean | No | `true` `false` | `false` | If `true`, shows a spinner instead of the icon, appends "…" to the label, and disables the dropdown. |
273
275
  | `requiredText` | String | No | n/a | n/a | Error message displayed when validation fails. Used with `showError` prop. |
274
276
  | `selectedValue` | Node | No | n/a | n/a | Selected value to display (used with `variant='input'` to show the current selection). |
275
277
  | `setShow` | Function | No | n/a | n/a | Function to update the visibility state of the dropdown. |
@@ -306,7 +308,7 @@ const DropdownDatePickerExample = () => {
306
308
  show={show}
307
309
  setShow={setShow}
308
310
  onToggle={handleToggle}
309
- inputLabel='Select Period'
311
+ label='Select Period'
310
312
  locked={false}
311
313
  overflow={true}
312
314
  onRemoveFilter={handleRemoveFilter}
@@ -329,8 +331,8 @@ export default DropdownDatePickerExample;
329
331
  | `className` | String | No | n/a | n/a | Adds a custom CSS class to the component. |
330
332
  | `dateFrom` | String | No | n/a | `null` | Start date. |
331
333
  | `dateTo` | String | No | n/a | `null` | End date. |
332
- | `disabled` | Boolean | No | `true` `false` | `false` | If `true`, disables the dropdown. If `false`, the dropdown is enabled. |
333
- | `inputLabel` | String | No | n/a | `period` | Label to display on the dropdown toggle button. |
334
+ | `disabled` | Boolean | No | `true` `false` | `false` | If `true`, disables the dropdown. If `false`, the dropdown is enabled. |
335
+ | `label` | String | No | n/a | `period` | Label to display on the dropdown toggle button. |
334
336
  | `locked` | Boolean | No | `true` `false` | `false` | Determines if the dropdown is locked. If true, it is not interactive. If false, it is interactive. |
335
337
  | `maxDate` | Object | No | n/a | n/a | Max date filter. |
336
338
  | `minDate` | Object | No | n/a | n/a | Min date filter. |
@@ -431,7 +433,7 @@ const MultiSelectComponent = () => {
431
433
  object={true}
432
434
  nameKey='name'
433
435
  idKey='id'
434
- inputLabel='Filters'
436
+ label='Filters'
435
437
  focus={show}
436
438
  buttonVariant='primary'
437
439
  nowrap={true}
@@ -450,7 +452,7 @@ const MultiSelectComponent = () => {
450
452
  nameKey='name'
451
453
  nameKey1='name1'
452
454
  idKey={'id'}
453
- inputLabel={'Filters (array de objetos)'}
455
+ label={'Filters (array de objetos)'}
454
456
  focus={show}
455
457
  hasId={false}
456
458
  showError={false}
@@ -474,7 +476,7 @@ export default MultiSelectComponent;
474
476
  | `hasId` | Boolean | No | `true` `false` | `true` | Controls wether the hashtag and id shows or not in the dropdown options |
475
477
  | `idInPill` | Boolean | No | `true` `false` | `false` | If true, ID will be shown in the pill component. |
476
478
  | `idKey` | String | No | n/a | n/a | Defines the key used in the object to find the item's ID, allowing for the identification and handling of selected items and other operations within the component. |
477
- | `inputLabel` | String | No | n/a | '' | Allows customizing the label for the input field within the dropdown menu. |
479
+ | `label` | String | No | n/a | '' | Allows customizing the label for the input field within the dropdown menu. |
478
480
  | `nameKey` | String | No | n/a | n/a | Defines the key that will be used in the object to display the item's name. |
479
481
  | `notMatchedText` | String | No | n/a | 'No match found' | Text displayed when no matching items are found. |
480
482
  | `nowrap` | Boolean | No | `true` `false` | `false` | If `true`, the content will be displayed on a single line. If it exceeds the width, a scroll will be shown. If `false`, it will fit the width of the button. If it exceeds, the content will be displayed on multiple lines. |
@@ -538,7 +540,7 @@ export default DropdownSimpleDatePickerExample;
538
540
  | `date` | String | No | n/a | `null` | Selected date. |
539
541
  | `disabled` | Boolean | No | `true` `false` | `false` | If `true`, disables the dropdown. If `false`, the dropdown is enabled. |
540
542
  | `handleClear` | Function | No | n/a | n/a | Allows providing, as needed, a function to reset the date, update the state as necessary, etc. If none is provided, the date will be cleared by default. |
541
- | `inputLabel` | String | No | n/a | `period` | Label to display on the dropdown toggle button. |
543
+ | `label` | String | No | n/a | `period` | Label to display on the dropdown toggle button. |
542
544
  | `maxDate` | Object | No | n/a | n/a | Max date filter. |
543
545
  | `minDate` | Object | No | n/a | n/a | Min date filter. |
544
546
  | `onToggle` | Function | No | n/a | n/a | Function that is called when the dropdown is toggled. |
@@ -700,6 +702,7 @@ export default ExampleInputChip;
700
702
  | `counter` | Boolean | No | n/a | `false` | If true, it will display a progressive and numeric counter of keywords. If false, it will not display it. |
701
703
  | `disabled` | Boolean | No | `true` `false` | `false` | If `true`, disables the inputChip. If `false`, the inputChip is enabled. |
702
704
  | `duplicateKeywordErrorText` | String | No | n/a | 'Duplicate keyword.' | Allows you to add a custom message when trying to add a keyword that already exists. |
705
+ | `helpText` | String | No | n/a | n/a | Help text displayed below the input field. Useful for providing additional instructions to the user. |
703
706
  | `keywordsList` | Array | Yes | n/a | n/a | This property expects an array of keywords. You can initialize it as an empty array or with keywords, and it will be updated when new keywords are added or removed from the input field. |
704
707
  | `maxKeywords` | Number | Yes | n/a | n/a | Indicates the maximum number of allowed keywords. When the keywordsList reaches this limit, an error message defined in requiredText will be displayed. Additionally, if the counter is enabled, its status will change to the 'danger' color. |
705
708
  | `maxKeywordLength` | Number | No | n/a | n/a | Indicates the maximum length of each keyword. When a keyword exceeds this limit, an error message defined in `duplicateKeywordErrorText` will be displayed. |
@@ -775,6 +778,73 @@ import { Radio } from 'groovinads-ui';
775
778
  | `size` | String | No | `xs` `md` `lg` | `md` | Sets the size of the radio button. |
776
779
  | `status` | Boolean | No | `true` `false` | `false` | Indicates whether the radio button is selected (true, the radio button appears selected) or not (false, it appears unselected). |
777
780
 
781
+ ### Slider
782
+
783
+ ```jsx
784
+ import React, { useState } from 'react';
785
+ import { Slider } from 'groovinads-ui';
786
+
787
+ const ExampleSlider = () => {
788
+ const [singleValue, setSingleValue] = useState(50);
789
+ const [rangeValue, setRangeValue] = useState([25, 75]);
790
+
791
+ return (
792
+ <>
793
+ {/* Single value slider with label */}
794
+ <Slider
795
+ label='Volume'
796
+ labelInputMax='Value'
797
+ value={singleValue}
798
+ onChange={setSingleValue}
799
+ />
800
+
801
+ {/* Range slider with labels */}
802
+ <Slider
803
+ range
804
+ value={rangeValue}
805
+ onChange={setRangeValue}
806
+ labelInputMin='Min'
807
+ labelInputMax='Max'
808
+ />
809
+
810
+ {/* Vertical slider */}
811
+ <Slider
812
+ orientation='vertical'
813
+ value={singleValue}
814
+ onChange={setSingleValue}
815
+ />
816
+
817
+ {/* Custom range with step */}
818
+ <Slider
819
+ min={0}
820
+ max={1000}
821
+ step={50}
822
+ value={500}
823
+ onChange={(val) => console.log(val)}
824
+ />
825
+ </>
826
+ );
827
+ };
828
+
829
+ export default ExampleSlider;
830
+ ```
831
+
832
+ | Property | Type | Required | Options | Default | Description |
833
+ | ------------- | ------------------------ | -------- | ----------------------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
834
+ | `className` | String | No | n/a | `''` | Additional CSS class names that can be applied to the slider container. |
835
+ | `disabled` | Boolean | No | `true` `false` | `false` | If `true`, disables the slider and adds the 'disabled' class. If `false`, the slider is enabled. |
836
+ | `label` | String | No | n/a | n/a | Label text displayed at the start of the slider. Only visible when `range` is `false`. |
837
+ | `labelInputMax` | String | No | n/a | `'Max'` | Label for the end/max Input field. In single mode, this is the label for the value input. |
838
+ | `labelInputMin` | String | No | n/a | `'Min'` | Label for the start/min Input field. Only used when `range` is `true`. |
839
+ | `max` | Number | No | n/a | `100` | Maximum value of the slider. |
840
+ | `min` | Number | No | n/a | `0` | Minimum value of the slider. |
841
+ | `onChange` | Function | No | n/a | n/a | Callback function called when the slider value changes. Receives a number (single mode) or an array of two numbers (range mode). |
842
+ | `orientation` | String | No | `horizontal` `vertical` | `horizontal` | Sets the orientation of the slider. Vertical mode height can be configured via CSS class. |
843
+ | `range` | Boolean | No | `true` `false` | `false` | If `true`, enables range mode with two thumbs and input fields on both sides. If `false`, shows a single thumb with a label at the start and an input field at the end. |
844
+ | `step` | Number | No | n/a | `1` | Step increment for the slider value. |
845
+ | `tooltip` | Boolean | No | `true` `false` | `true` | If `true`, shows a tooltip with the current value when dragging the thumb. If `false`, the tooltip is hidden. |
846
+ | `value` | Number / Array of Number | No | n/a | n/a | Current value of the slider. A single number for single mode, or an array `[start, end]` for range mode. Values entered manually in inputs are automatically clamped to the min/max range. |
847
+
778
848
  ### Switch
779
849
 
780
850
  ```jsx
@@ -873,6 +943,21 @@ export default ExampleAlert;
873
943
  | `size` | String | No | `xs` `md` `lg` `md` | `md` | Size of the alert. |
874
944
  | `type` | String | Yes | `info` `success` `warning` `danger` | `info` | Type of alert to display. Each `type` has a specific associated icon. |
875
945
 
946
+ ### BlockIcon
947
+
948
+ ```jsx
949
+ import React from 'react';
950
+ import { BlockIcon } from 'groovinads-ui';
951
+
952
+ <BlockIcon name='house' size='md' color='blue' className='' />;
953
+ ```
954
+
955
+ | Property | Type | Required | Options | Default | Description |
956
+ | ----------- | ------ | -------- | ------------------------------------------------------------------------- | ----------- | ---------------------------------------- |
957
+ | `className` | String | No | n/a | n/a | Additional CSS class for the block icon. |
958
+ | `color` | String | No | `blue` `danger` `dark` `green` `grey` `light` `midtone` `neutral` `red` `yellow` | `neutral` | Color of the block icon container. |
959
+ | `name` | String | No | n/a | `font-awesome` | FontAwesome icon name. |
960
+ | `size` | String | No | `xs` `md` `lg` | `md` | Size of the block icon container. |
876
961
 
877
962
  ### EditableContent
878
963
 
@@ -972,6 +1057,39 @@ export default PillComponentExample;
972
1057
  | `disabled` | Boolean | No | `true` `false` | `false` | If `true`, disables the pill. If `false`, the pill is enabled. |
973
1058
  | `onClick` | Function | No | n/a | n/a | Handles the click event to close the pill. This property is only relevant if closeButton is set to true. |
974
1059
 
1060
+ ### ProgressBar
1061
+
1062
+ ```jsx
1063
+ import React from 'react';
1064
+ import { ProgressBar } from 'groovinads-ui';
1065
+
1066
+ // Basic usage
1067
+ <ProgressBar value={50} max={100} />;
1068
+
1069
+ // With label and warning/alert thresholds
1070
+ <ProgressBar
1071
+ label="Storage used"
1072
+ value={75}
1073
+ max={100}
1074
+ warningTo={70}
1075
+ dangerTo={90}
1076
+ />;
1077
+
1078
+ // Vertical orientation
1079
+ <ProgressBar value={60} max={100} orientation="vertical" />;
1080
+ ```
1081
+
1082
+ | Property | Type | Required | Options | Default | Description |
1083
+ | ------------- | ------- | -------- | --------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------ |
1084
+ | `className` | String | No | n/a | n/a | Additional CSS classes for the progress bar container. |
1085
+ | `dangerTo` | Number | No | n/a | n/a | When value reaches this threshold, adds "danger" class. Takes priority over warning. |
1086
+ | `label` | String | No | n/a | n/a | Label text displayed above the progress bar. |
1087
+ | `max` | Number | No | n/a | `100` | Maximum value for the progress bar. |
1088
+ | `orientation` | String | No | `horizontal` `vertical` | `horizontal` | Progress bar orientation. Vertical fills from bottom to top. |
1089
+ | `showNumbers` | Boolean | No | `true` `false` | `false` | If true, displays min (0) and max values below the progress bar. |
1090
+ | `value` | Number | No | n/a | `0` | Current progress value. |
1091
+ | `warningTo` | Number | No | n/a | n/a | When value reaches this threshold, adds "warning" class. Only applies if value < dangerTo. |
1092
+
975
1093
  ### Spinner
976
1094
 
977
1095
  ```jsx
@@ -1059,6 +1177,7 @@ import { ModalComponent } from 'groovinads-ui';
1059
1177
  | `children` | Node | Yes | n/a | n/a | Allows inserting custom content within the Modal. |
1060
1178
  | `footer` | Node | No | n/a | n/a | Allows inserting custom content within the Modal footer. If not provided, the footer is not displayed. |
1061
1179
  | `header` | String / Node | Yes | n/a | n/a | Allows inserting custom content within the Modal header. |
1180
+ | `onBeforeClose` | Function | No | n/a | n/a | Callback function called before closing the modal (on backdrop click, ESC key, or X button). Useful for showing confirmation dialogs before closing. When provided, the modal won't close automatically - you control when to close it. |
1062
1181
  | `setShow` | Function | Yes | n/a | n/a | Function to toggle the visibility state between visible and hidden. |
1063
1182
  | `show` | Boolean | Yes | `true` `false` | n/a | Controls the visibility of the Modal. If `true`, the Modal is displayed; if `false`, it is hidden. |
1064
1183
  | `size` | String | No | `sm` `md` `lg` | `md` | Sets the size of the Modal. It's optional. |