freemium-ui 2.0.0-beta.21 → 2.0.0-beta.23

package/index.cjs.js

@@ -3608,7 +3608,7 @@ const e=i.reduce(((e,t)=>{const n=t.group??"default"
 ;return e[n]?e[n].push(t):e[n]=[t],e}),{})
 ;return Object.keys(e).sort(((e,t)=>"default"!==e?1:-1)).map((t=>({key:t,
 items:e[t]})))}),[i])
-;return console.log("groupedItems",E),e.createElement(fd,null,a&&e.createElement(e.Fragment,null,e.createElement(wn,{
+;return e.createElement(fd,null,a&&e.createElement(e.Fragment,null,e.createElement(wn,{
 className:"input-label","aria-label":a,htmlFor:o
 },a,d&&e.createElement(zn,null,"*"))),e.createElement(md,{open:x,defaultOpen:M,
 name:f,required:d,disabled:u,value:b?.[r]??void 0,onValueChange:e=>{if(s)return
@@ -3634,7 +3634,7 @@ className:"SelectScrollButton"},e.createElement(rr,{fill:n.colors.text.primary
 })))))),w&&z&&e.createElement(vc,null,z))
 },rm=({itemIdentifier:t="id",label:n,id:r,items:a=[],placeholder:o,readOnly:i=!1,disabled:l=!1,isRequired:c=!1,hideClear:s=!1,itemToString:u,name:d,filterKey:h,width:p,customValues:f,onCustomValueAdd:m,itemComponent:v,emptyItemsText:g,getCustomMessage:y,onChange:b,useComboboxProps:w,isErrored:C,errorText:z,defaultSelectedItem:M,isMenuLoading:x})=>{
 const E=qt(),[S,_]=e.useState(a),{isOpen:H,selectedItem:D,getToggleButtonProps:L,getLabelProps:V,getMenuProps:A,openMenu:k,highlightedIndex:T,setHighlightedIndex:R,setInputValue:P,inputValue:I,getItemProps:O,getInputProps:N}=ff({
-selectedItem:M,items:S,isOpen:!0,onSelectedItemChange:({selectedItem:e})=>{
+selectedItem:M,items:S,onSelectedItemChange:({selectedItem:e})=>{
 console.log("onSelectedItemChange",{sI:e}),b?.(e??null)},
 onIsOpenChange:({isOpen:e})=>{
 if(e&&(""===I||D&&h&&(I||"").toLowerCase()===`${D?.[h||t]||""}`.toLowerCase()))_(a),
@@ -3657,10 +3657,11 @@ isOpen:F,fill:E.colors.text.primary,width:8,height:8})))
 onClick:e=>{e.stopPropagation(),m&&m({inputValue:I,customValues:!0}),P("")}
 },y?.(I)||"Click to add")):e.createElement(ud,{readOnly:!0
 },g||"No items")),H&&S.map(((n,r)=>{const a="string"==typeof n?n:n?.[t]
-;return e.createElement(ud,{isHilighted:T===r,isSelected:D===n,key:a,...O({
-item:n,index:r})
-},v?v(n):e.createElement(e.Fragment,null,u(n),D===n&&e.createElement(Lc,{
-fill:E.colors.common.accent})))})))),C&&z&&e.createElement(vc,null,z))
+;return e.createElement(e.Fragment,null,v?v(n,{isHilighted:T===r,
+isSelected:D===n,key:a,...O({item:n,index:r})}):e.createElement(ud,{
+isHilighted:T===r,isSelected:D===n,key:a,...O({item:n,index:r})
+},u(n),D===n&&e.createElement(Lc,{fill:E.colors.common.accent})))
+})))),C&&z&&e.createElement(vc,null,z))
 },am=e.forwardRef((({children:t,showTick:n=!0,...r},a)=>{const o=qt()
 ;return e.createElement(bd,{className:"SelectItem",...r,ref:a
 },e.createElement(Md,{className:"SelectItemText"},t),n&&e.createElement(Ed,{
@@ -16120,8 +16121,8 @@ forceMount:!0,className:`DialogContent ${a}`.trim(),isFullHeight:i,size:o,
 placement:l},!r&&e.createElement(Ys,{asChild:!0},e.createElement($s,{
 "aria-label":"Close"},e.createElement(qn,{fill:u.colors.text.inverse}))),n)))
 },exports.Dropdown=tm,
-exports.DropdownItem=am,exports.DropdownMenuItem=Pl,exports.Fade=t=>{
-const{timeout:n=150,...r}=t;return e.createElement(Wj,{
+exports.DropdownInputItem=ud,exports.DropdownItem=am,exports.DropdownMenuItem=Pl,
+exports.Fade=t=>{const{timeout:n=150,...r}=t;return e.createElement(Wj,{
 transition:`all ${n}ms cubic-bezier(0.175, 0.885, 0.320, 1.175)`,styles:Gj,
 timeout:{enter:0,exit:n},...r})
 },exports.FreshLink=xn,exports.IconButton=Mn,exports.Input=Kf,
@@ -16255,8 +16256,8 @@ onColumnOrderChange:e=>{let t=P??[];t="function"==typeof e?e(P??[]):e,I?.(t)},
 onRowSelectionChange:e=>{let t=F;t="function"==typeof e?e(F):e,B?.(t)},
 enableRowSelection:!0,manualPagination:!0,rowCount:Z?-1:w
 }),{getPageCount:te,getRowModel:ne,getState:re,getCanNextPage:ae,getCanPreviousPage:oe,getPageOptions:ie,previousPage:le,setPageIndex:ce,nextPage:se,lastPage:ue,firstPage:de}=ee,{rows:he}=ne(),{pagination:{pageIndex:pe,pageSize:fe}}=re(),me=pe*fe+(pe<te()-1?fe:he.length),ve=ee.getAllColumns().filter((e=>e.getIsVisible())).length+(L?0:1)+(_?1:0)
-;return console.log("STATE",re()),e.createElement(cF,{className:"TableContainer"
-},!b&&e.createElement(fF,{className:"table-actions"
+;return e.createElement(cF,{className:"TableContainer"},!b&&e.createElement(fF,{
+className:"table-actions"
 },d&&e.createElement(e.Fragment,null,d),e.createElement(gF,{
 className:"table-header-component"},h??null),e.createElement(yF,{
 className:"pagination-actions"

package/index.d.ts

@@ -5,17 +5,17 @@ import * as Popover$1 from '@radix-ui/react-popover';
 import { PopperContentProps } from '@radix-ui/react-popover';
 import { RadioGroupProps as RadioGroupProps$1, RadioGroupContextValue } from '@radix-ui/react-radio-group';
 import { CheckboxProps as CheckboxProps$1 } from '@radix-ui/react-checkbox';
-import * as _radix_ui_react_select from '@radix-ui/react-select';
+import * as Select from '@radix-ui/react-select';
 import { SelectProps, SelectItemProps } from '@radix-ui/react-select';
 export { Item as RadixSelectItem } from '@radix-ui/react-select';
+import * as styled_components from 'styled-components';
+import * as styled_components_dist_types from 'styled-components/dist/types';
 import { UseSelectProps, UseComboboxProps, UseMultipleSelectionProps } from 'downshift';
 import * as _radix_ui_react_label from '@radix-ui/react-label';
 import { LabelProps } from '@radix-ui/react-label';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { MenuItemProps as MenuItemProps$1 } from '@radix-ui/react-dropdown-menu';
 export { Item as RadixMenuItem } from '@radix-ui/react-dropdown-menu';
-import * as styled_components from 'styled-components';
-import * as styled_components_dist_types from 'styled-components/dist/types';
 import { DateInput3Props, DateRangeInput3Props, TimePrecision } from '@blueprintjs/datetime2';
 import { DraggableSyntheticListeners } from '@dnd-kit/core';
 import { CoreOptions, ColumnDef, Cell, RowSelectionState } from '@tanstack/react-table';
@@ -350,6 +350,14 @@ type DefaultDropdownItem = {
     [key: string]: any;
     group?: string;
 };
+type StyledListItemType = {
+    readOnly?: boolean;
+    isSelected?: boolean;
+    isHilighted?: boolean;
+};
+type DropdownInputItemProps = React.LiHTMLAttributes<HTMLLIElement> & StyledListItemType & {
+    key: string;
+};
 type PickedSelectProps = Pick<SelectProps, 'name' | 'disabled' | 'value'>;
 interface DropdownProps<T extends DefaultDropdownItem = DefaultDropdownItem> extends PickedSelectProps {
     /**
@@ -374,10 +382,6 @@ interface DropdownProps<T extends DefaultDropdownItem = DefaultDropdownItem> ext
      * Fuction to give the string representation of the item
      */
     itemToString: (item: T, type?: 'list-item' | 'display' | 'downshift') => string;
-    /**
-     * Fuction to give the string representation of the item
-     */
-    itemComponent?: (item: T, props?: DropdownItemProps) => React.ReactNode | string;
     /**
      * The type of the dropdown
      */
@@ -465,16 +469,19 @@ interface DropdownProps<T extends DefaultDropdownItem = DefaultDropdownItem> ext
      *
      */
     useComboboxProps?: UseComboboxProps<T>;
+    itemComponent?: (item: T, props?: DropdownItemProps | DropdownInputItemProps) => React.ReactNode | string;
 }
 type DropdownItemProps = SelectItemProps & {
     showTick: boolean;
 };
 
+declare const ListItem: styled_components.IStyledComponent<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, StyledListItemType>>;
+
 /**
  * Dropdown displays a list or drop-down box that enables selection of an option or multiple options from an available list of values.
  */
 declare const Dropdown: <T extends DefaultDropdownItem>({ type, ...props }: DropdownProps<T>) => react__default.JSX.Element;
-declare const Item: react__default.ForwardRefExoticComponent<_radix_ui_react_select.SelectItemProps & {
+declare const Item: react__default.ForwardRefExoticComponent<Select.SelectItemProps & {
     showTick: boolean;
 } & react__default.RefAttributes<HTMLDivElement>>;
 
@@ -1646,4 +1653,4 @@ declare namespace index_d {
   export { index_d_dark as dark, index_d_light as light };
 }
 
-export { Alert, type AlertProps, type BaseProps, BoxedRadio, type BoxedRadioItemProps, type BoxedRadioProps, Button, ButtonDropdown, type ButtonDropdownItemProps, type ButtonDropdownProps, type ButtonProps, type ButtonSizeKey, type ButtonVariant, CardActions, CardContent, CardDescription, CardText, CardTitle, Checkbox, type CheckboxProps, ChevronUp, Confirmation, type ConfirmationProps, Cross as CrossIcon, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, DateTimePicker, type DateTimePickerProps, DateTimeRangePicker, type DateTimeRangePickerProps, type DefaultDropdownItem, type DefaultMultiSelectDropdownItem, type DefaultProps, Drawer, type DrawerPlacement, type DrawerProps, type DrawerSizeType, Dropdown, Item as DropdownItem, DropdownMenuItem, type DropdownProps, type DropdownTypes, Fade, type FadeProps, type FreemiumUiTheme, FreshLink, type FreshworksPalette, type FuiContextType, IconButton, Input, InputLabel, type InputProps, type LevelType, Loader, type LoaderPropTypes, type LoaderSizes, type LoaderSpeeds, Menu, type MenuItemProps, type MenuProps, Minus, Modal, type ModalAlignType, type ModalCssType, type ModalPositionType, type ModalProps, type ModalSizeType, MoreVertical, MultiSelectDropdown, type MultiSelectDropdownProps, type Origin, Popover, PopoverClose, type PopoverProps, Radio, RadioGroup, type RadioGroupProps, type RadioItemProps, type RadioProps, Reorder, type ReorderItemType, type ReorderProps, RequiredIndicator, type RowData, Slide, SlideFade, type SlideFadeProps, type SlidePlacement, type SlideProps, StyledLabel, Table, type TableProps, Tabs, TabsContent, type TabsItemProps, TabsList, type TabsProps, TabsRoot, TabsTrigger, Tag, type TagProps, TextArea, type TextAreaProps, ThemeProvider, type ThemeProviderType, index_d as Themes, TickIcon, TimePicker, type TimePickerProps, type ToastContextType, type ToastItemProps, ToastProvider, type ToastType, type ToastTypes, type ToastWithID, Toggle, type ToggleProps, type ToggleSizes, Tooltip, type TooltipAlign, type TooltipPosition, type TooltipProps, type TooltipSide, Transition, type TransitionProps, type TransitionStyleState, type TransitionStyles, TriggerButtonWrapper, Typography, type TypographyProps, type TypographyVariantType, type TypographyWeightType, type UpdateToastsFunction, Warning, basicHide, basicShow, contentHide, contentShow, slideDownAndFade, slideLeftAndFade, slideRightAndFade, slideUpAndFade, useToasts };
+export { Alert, type AlertProps, type BaseProps, BoxedRadio, type BoxedRadioItemProps, type BoxedRadioProps, Button, ButtonDropdown, type ButtonDropdownItemProps, type ButtonDropdownProps, type ButtonProps, type ButtonSizeKey, type ButtonVariant, CardActions, CardContent, CardDescription, CardText, CardTitle, Checkbox, type CheckboxProps, ChevronUp, Confirmation, type ConfirmationProps, Cross as CrossIcon, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, DateTimePicker, type DateTimePickerProps, DateTimeRangePicker, type DateTimeRangePickerProps, type DefaultDropdownItem, type DefaultMultiSelectDropdownItem, type DefaultProps, Drawer, type DrawerPlacement, type DrawerProps, type DrawerSizeType, Dropdown, ListItem as DropdownInputItem, Item as DropdownItem, DropdownMenuItem, type DropdownProps, type DropdownTypes, Fade, type FadeProps, type FreemiumUiTheme, FreshLink, type FreshworksPalette, type FuiContextType, IconButton, Input, InputLabel, type InputProps, type LevelType, Loader, type LoaderPropTypes, type LoaderSizes, type LoaderSpeeds, Menu, type MenuItemProps, type MenuProps, Minus, Modal, type ModalAlignType, type ModalCssType, type ModalPositionType, type ModalProps, type ModalSizeType, MoreVertical, MultiSelectDropdown, type MultiSelectDropdownProps, type Origin, Popover, PopoverClose, type PopoverProps, Radio, RadioGroup, type RadioGroupProps, type RadioItemProps, type RadioProps, Reorder, type ReorderItemType, type ReorderProps, RequiredIndicator, type RowData, Slide, SlideFade, type SlideFadeProps, type SlidePlacement, type SlideProps, StyledLabel, Table, type TableProps, Tabs, TabsContent, type TabsItemProps, TabsList, type TabsProps, TabsRoot, TabsTrigger, Tag, type TagProps, TextArea, type TextAreaProps, ThemeProvider, type ThemeProviderType, index_d as Themes, TickIcon, TimePicker, type TimePickerProps, type ToastContextType, type ToastItemProps, ToastProvider, type ToastType, type ToastTypes, type ToastWithID, Toggle, type ToggleProps, type ToggleSizes, Tooltip, type TooltipAlign, type TooltipPosition, type TooltipProps, type TooltipSide, Transition, type TransitionProps, type TransitionStyleState, type TransitionStyles, TriggerButtonWrapper, Typography, type TypographyProps, type TypographyVariantType, type TypographyWeightType, type UpdateToastsFunction, Warning, basicHide, basicShow, contentHide, contentShow, slideDownAndFade, slideLeftAndFade, slideRightAndFade, slideUpAndFade, useToasts };

package/index.js

@@ -3598,7 +3598,7 @@ const e=i.reduce(((e,t)=>{const n=t.group??"default"
 ;return e[n]?e[n].push(t):e[n]=[t],e}),{})
 ;return Object.keys(e).sort(((e,t)=>"default"!==e?1:-1)).map((t=>({key:t,
 items:e[t]})))}),[i])
-;return console.log("groupedItems",S),t.createElement(Nd,null,a&&t.createElement(t.Fragment,null,t.createElement(Fn,{
+;return t.createElement(Nd,null,a&&t.createElement(t.Fragment,null,t.createElement(Fn,{
 className:"input-label","aria-label":a,htmlFor:o
 },a,d&&t.createElement(jn,null,"*"))),t.createElement(Fd,{open:x,defaultOpen:M,
 name:f,required:d,disabled:u,value:b?.[r]??void 0,onValueChange:e=>{if(s)return
@@ -3624,7 +3624,7 @@ className:"SelectScrollButton"},t.createElement(xr,{fill:n.colors.text.primary
 })))))),w&&z&&t.createElement(Oc,null,z))
 },Dm=({itemIdentifier:e="id",label:n,id:r,items:a=[],placeholder:o,readOnly:i=!1,disabled:l=!1,isRequired:c=!1,hideClear:s=!1,itemToString:u,name:d,filterKey:h,width:p,customValues:f,onCustomValueAdd:m,itemComponent:v,emptyItemsText:g,getCustomMessage:y,onChange:b,useComboboxProps:w,isErrored:C,errorText:z,defaultSelectedItem:M,isMenuLoading:x})=>{
 const S=vn(),[E,_]=t.useState(a),{isOpen:H,selectedItem:D,getToggleButtonProps:L,getLabelProps:V,getMenuProps:A,openMenu:k,highlightedIndex:T,setHighlightedIndex:P,setInputValue:I,inputValue:R,getItemProps:O,getInputProps:N}=Nf({
-selectedItem:M,items:E,isOpen:!0,onSelectedItemChange:({selectedItem:e})=>{
+selectedItem:M,items:E,onSelectedItemChange:({selectedItem:e})=>{
 console.log("onSelectedItemChange",{sI:e}),b?.(e??null)},
 onIsOpenChange:({isOpen:t})=>{
 if(t&&(""===R||D&&h&&(R||"").toLowerCase()===`${D?.[h||e]||""}`.toLowerCase()))_(a),
@@ -3647,10 +3647,11 @@ isOpen:F,fill:S.colors.text.primary,width:8,height:8})))
 onClick:e=>{e.stopPropagation(),m&&m({inputValue:R,customValues:!0}),I("")}
 },y?.(R)||"Click to add")):t.createElement(Pd,{readOnly:!0
 },g||"No items")),H&&E.map(((n,r)=>{const a="string"==typeof n?n:n?.[e]
-;return t.createElement(Pd,{isHilighted:T===r,isSelected:D===n,key:a,...O({
-item:n,index:r})
-},v?v(n):t.createElement(t.Fragment,null,u(n),D===n&&t.createElement(Jc,{
-fill:S.colors.common.accent})))})))),C&&z&&t.createElement(Oc,null,z))
+;return t.createElement(t.Fragment,null,v?v(n,{isHilighted:T===r,
+isSelected:D===n,key:a,...O({item:n,index:r})}):t.createElement(Pd,{
+isHilighted:T===r,isSelected:D===n,key:a,...O({item:n,index:r})
+},u(n),D===n&&t.createElement(Jc,{fill:S.colors.common.accent})))
+})))),C&&z&&t.createElement(Oc,null,z))
 },Lm=t.forwardRef((({children:e,showTick:n=!0,...r},a)=>{const o=vn()
 ;return t.createElement($d,{className:"SelectItem",...r,ref:a
 },t.createElement(Kd,{className:"SelectItemText"},e),n&&t.createElement(Zd,{
@@ -15432,8 +15433,8 @@ onColumnOrderChange:e=>{let t=I??[];t="function"==typeof e?e(I??[]):e,R?.(t)},
 onRowSelectionChange:e=>{let t=F;t="function"==typeof e?e(F):e,B?.(t)},
 enableRowSelection:!0,manualPagination:!0,rowCount:Z?-1:w
 }),{getPageCount:te,getRowModel:ne,getState:re,getCanNextPage:ae,getCanPreviousPage:oe,getPageOptions:ie,previousPage:le,setPageIndex:ce,nextPage:se,lastPage:ue,firstPage:de}=ee,{rows:he}=ne(),{pagination:{pageIndex:pe,pageSize:fe}}=re(),me=pe*fe+(pe<te()-1?fe:he.length),ve=ee.getAllColumns().filter((e=>e.getIsVisible())).length+(L?0:1)+(_?1:0)
-;return console.log("STATE",re()),t.createElement(jF,{className:"TableContainer"
-},!b&&t.createElement(KF,{className:"table-actions"
+;return t.createElement(jF,{className:"TableContainer"},!b&&t.createElement(KF,{
+className:"table-actions"
 },d&&t.createElement(t.Fragment,null,d),t.createElement(XF,{
 className:"table-header-component"},h??null),t.createElement(QF,{
 className:"pagination-actions"
@@ -16218,4 +16219,4 @@ return n=vM(e),t!==yM.STANDARD?[3,2]:[4,Promise.resolve().then((function(){
 return wM}))];case 1:return r=a.sent(),[3,4];case 2:
 return[4,Promise.resolve().then((function(){return zM}))];case 3:
 r=a.sent(),a.label=4;case 4:return[2,r[n]]}}))}))}})
-;export{br as Alert,Nc as BoxedRadio,zr as Button,oc as ButtonDropdown,Wn as CardActions,Yn as CardContent,Kn as CardDescription,qn as CardText,Gn as CardTitle,ts as Checkbox,xr as ChevronUp,lu as Confirmation,mr as CrossIcon,yI as DatePicker,wI as DateRangePicker,bI as DateTimePicker,CI as DateTimeRangePicker,yu as Drawer,_m as Dropdown,Lm as DropdownItem,rc as DropdownMenuItem,TU as Fade,$n as FreshLink,Un as IconButton,bm as Input,Bn as InputLabel,Em as Loader,ac as Menu,es as Minus,Om as Modal,Ld as MoreVertical,ev as MultiSelectDropdown,XI as Popover,ZI as PopoverClose,rR as Radio,aR as RadioGroup,Zl as RadixMenuItem,Sd as RadixSelectItem,WN as Reorder,jn as RequiredIndicator,RU as Slide,OU as SlideFade,Fn as StyledLabel,CB as Table,OB as Tabs,PB as TabsContent,IB as TabsList,TB as TabsRoot,RB as TabsTrigger,Jm as Tag,wm as TextArea,Rj as ThemeProvider,YU as Themes,Jc as TickIcon,MI as TimePicker,Pj as ToastProvider,Qj as Toggle,VU as Tooltip,AU as Transition,Zn as TriggerButtonWrapper,yr as Typography,vr as Warning,Qn as basicHide,er as basicShow,nr as contentHide,ar as contentShow,ur as slideDownAndFade,hr as slideLeftAndFade,cr as slideRightAndFade,ir as slideUpAndFade,Ij as useToasts};
+;export{br as Alert,Nc as BoxedRadio,zr as Button,oc as ButtonDropdown,Wn as CardActions,Yn as CardContent,Kn as CardDescription,qn as CardText,Gn as CardTitle,ts as Checkbox,xr as ChevronUp,lu as Confirmation,mr as CrossIcon,yI as DatePicker,wI as DateRangePicker,bI as DateTimePicker,CI as DateTimeRangePicker,yu as Drawer,_m as Dropdown,Pd as DropdownInputItem,Lm as DropdownItem,rc as DropdownMenuItem,TU as Fade,$n as FreshLink,Un as IconButton,bm as Input,Bn as InputLabel,Em as Loader,ac as Menu,es as Minus,Om as Modal,Ld as MoreVertical,ev as MultiSelectDropdown,XI as Popover,ZI as PopoverClose,rR as Radio,aR as RadioGroup,Zl as RadixMenuItem,Sd as RadixSelectItem,WN as Reorder,jn as RequiredIndicator,RU as Slide,OU as SlideFade,Fn as StyledLabel,CB as Table,OB as Tabs,PB as TabsContent,IB as TabsList,TB as TabsRoot,RB as TabsTrigger,Jm as Tag,wm as TextArea,Rj as ThemeProvider,YU as Themes,Jc as TickIcon,MI as TimePicker,Pj as ToastProvider,Qj as Toggle,VU as Tooltip,AU as Transition,Zn as TriggerButtonWrapper,yr as Typography,vr as Warning,Qn as basicHide,er as basicShow,nr as contentHide,ar as contentShow,ur as slideDownAndFade,hr as slideLeftAndFade,cr as slideRightAndFade,ir as slideUpAndFade,Ij as useToasts};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "freemium-ui",
-  "version": "2.0.0-beta.21",
+  "version": "2.0.0-beta.23",
   "description": "React Ui Components for Freemium Apps",
   "main": "./index.js",
   "module": "./index.js",