sage-nexus-ui 1.5.5 → 1.6.0

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.
@@ -0,0 +1 @@
1
+ import{jsxs as n,Fragment as r,jsx as e}from"react/jsx-runtime";import{useState as t,useMemo as o,useCallback as a}from"react";import*as d from"@radix-ui/react-popover";import{DayPicker as i}from"react-day-picker";import{startOfDay as p,isAfter as l,isBefore as s,subDays as m,format as c}from"date-fns";import b from"@mui/icons-material/CalendarToday";import h from"@mui/icons-material/ChevronLeft";import y from"@mui/icons-material/ChevronRight";import g from"@mui/material/GlobalStyles";import{Box as u}from"./Box.mjs";import{Caption as f}from"./Typography.mjs";import{Chip as k}from"./Chip.mjs";import{Divider as v}from"./Divider.mjs";import{Paper as x}from"./Paper.mjs";import{SecondaryButton as w}from"./SecondaryButton.mjs";import{Stack as C}from"./Stack.mjs";import{useTheme as j,alpha as M}from"@mui/material";import{colours as D}from"../theme/tokens.mjs";const S=[{label:"Last 7 days",days:7},{label:"Last 30 days",days:30},{label:"Last 90 days",days:90}],R=({startDate:R,endDate:_,onChange:z,dataAvailableThrough:T,earliestStartDate:I,className:L})=>{const[G,O]=t(!1),$="dark"===j().palette.mode,A=D.brilliantGreen,N=M(A,.2),W=$?D.white:D.black,B=$?D.lightGrey:D.darkGrey,F=o(()=>T??p(new Date),[T]),P=o(()=>I?p(I):void 0,[I]),Y=a(n=>{const r=p(n);return!!l(r,F)||!(!P||!s(r,P))},[F,P]),H=a(n=>{const r=F,e=m(r,n-1),t=P&&s(e,P)?P:e;z({startDate:t,endDate:r})},[F,P,z]),q=a(n=>{z({startDate:n?.from,endDate:n?.to})},[z]),E=o(()=>{if(!R&&!_)return"Select dates";const n=n=>c(n,"MMM d, yyyy");return R&&_?R.getFullYear()===_.getFullYear()?`${r=R,c(r,"MMM d")} - ${n(_)}`:`${n(R)} - ${n(_)}`:R?n(R):_?n(_):"Select dates";var r},[R,_]),J=o(()=>R||m(F,30),[R,F]);return n(r,{children:[e(g,{styles:{".rdp-nn-root":{padding:16},".rdp-nn-months":{display:"flex",gap:16},"@media (max-width: 899px)":{".rdp-nn-months":{flexDirection:"column"}},".rdp-nn-month":{position:"relative"},".rdp-nn-month-caption":{display:"flex",justifyContent:"center",alignItems:"center",paddingTop:4,minHeight:28},".rdp-nn-caption-label":{fontSize:"0.875rem",fontWeight:500,color:W},".rdp-nn-nav":{display:"flex",alignItems:"center",gap:4},".rdp-nn-weekdays":{display:"flex"},".rdp-nn-weekday":{width:36,borderRadius:6,fontSize:"0.8rem",fontWeight:400,textAlign:"center"},".rdp-nn-week":{display:"flex",width:"100%",marginTop:8},".rdp-nn-day":{position:"relative",width:36,height:36,padding:0,textAlign:"center"},".rdp-nn-day-btn":{width:36,height:36,padding:0,border:0,borderRadius:999,backgroundColor:"transparent",color:W,cursor:"pointer",font:"inherit",transition:"background-color 150ms ease"},".rdp-nn-day-btn:hover":{backgroundColor:N},".rdp-nn-nav-btn":{position:"absolute",top:0,width:28,height:28,padding:0,border:0,backgroundColor:"transparent",color:B,opacity:.5,cursor:"pointer",transition:"opacity 150ms ease"},".rdp-nn-nav-btn:hover":{opacity:1},".rdp-nn-button-previous":{left:4},".rdp-nn-button-next":{right:4},".rdp-nn-weekday, .rdp-nn-nav-btn":{color:B},".rdp-nn-outside .rdp-nn-day-btn, .rdp-nn-disabled .rdp-nn-day-btn":{color:B,opacity:.4},".rdp-nn-disabled .rdp-nn-day-btn:hover":{backgroundColor:"transparent",cursor:"not-allowed"},".rdp-nn-selected":{backgroundColor:A,borderRadius:"50%"},".rdp-nn-selected .rdp-nn-day-btn":{color:D.black},".rdp-nn-selected .rdp-nn-day-btn:hover":{backgroundColor:D.jade},".rdp-nn-range-start":{backgroundColor:A,borderRadius:"50% 0 0 50%"},".rdp-nn-range-start .rdp-nn-day-btn":{color:D.black},".rdp-nn-range-start .rdp-nn-day-btn:hover":{backgroundColor:D.jade},".rdp-nn-range-end":{backgroundColor:A,borderRadius:"0 50% 50% 0"},".rdp-nn-range-end .rdp-nn-day-btn":{color:D.black},".rdp-nn-range-end .rdp-nn-day-btn:hover":{backgroundColor:D.jade},".rdp-nn-range-middle":{backgroundColor:N,borderRadius:0},".rdp-nn-today .rdp-nn-day-btn":{fontWeight:700}}}),n(d.Root,{open:G,onOpenChange:O,children:[e(d.Trigger,{asChild:!0,children:e(w,{size:"small",startIcon:e(b,{sx:{fontSize:14}}),className:L,children:E})}),e(d.Portal,{children:e(d.Content,{align:"end",sideOffset:8,style:{zIndex:1300},children:n(x,{sx:{p:0,overflow:"hidden",borderRadius:1},children:[e(C,{direction:"row",spacing:1,sx:{p:2},children:S.map(n=>e(k,{label:n.label,size:"small",onClick:()=>H(n.days),variant:"outlined",clickable:!0},n.days))}),e(v,{}),n(C,{direction:"row",spacing:1,sx:{px:2,py:1,alignItems:"center"},children:[e(u,{sx:{width:8,height:8,borderRadius:"50%",bgcolor:"primary.main",flexShrink:0}}),n(f,{children:["Data available through ",c(F,"MMM d, yyyy")]})]}),e(i,{mode:"range",numberOfMonths:2,selected:R||_?{from:R,to:_}:void 0,onSelect:q,defaultMonth:J,startMonth:P,endMonth:F,disabled:Y,navLayout:"around",showOutsideDays:!0,classNames:{root:"rdp-nn-root",months:"rdp-nn-months",month:"rdp-nn-month",month_caption:"rdp-nn-month-caption",caption_label:"rdp-nn-caption-label",nav:"rdp-nn-nav",button_previous:"rdp-nn-nav-btn rdp-nn-button-previous",button_next:"rdp-nn-nav-btn rdp-nn-button-next",weekdays:"rdp-nn-weekdays",weekday:"rdp-nn-weekday",week:"rdp-nn-week",day:"rdp-nn-day",day_button:"rdp-nn-day-btn",range_start:"rdp-nn-range-start",range_end:"rdp-nn-range-end",range_middle:"rdp-nn-range-middle",selected:"rdp-nn-selected",today:"rdp-nn-today",outside:"rdp-nn-outside",disabled:"rdp-nn-disabled"},components:{Chevron:({orientation:n,...r})=>e("left"===n?h:y,{sx:{fontSize:16},...r})}})]})})})]})]})};export{R as DateRangeFilter};
@@ -1 +1 @@
1
- const o="1.5.5";export{o as SAGE_NEXUS_UI_VERSION};
1
+ const o="1.6.0";export{o as SAGE_NEXUS_UI_VERSION};
package/dist/index.d.ts CHANGED
@@ -18,6 +18,19 @@ declare const getFiscalPeriod: (date: Date) => {
18
18
  };
19
19
  declare const formatDate: (date: Date) => string;
20
20
 
21
+ interface DateRangeFilterProps {
22
+ startDate: Date | undefined;
23
+ endDate: Date | undefined;
24
+ onChange: (range: {
25
+ startDate: Date | undefined;
26
+ endDate: Date | undefined;
27
+ }) => void;
28
+ dataAvailableThrough?: Date;
29
+ earliestStartDate?: Date;
30
+ className?: string;
31
+ }
32
+ declare const DateRangeFilter: ({ startDate, endDate, onChange, dataAvailableThrough, earliestStartDate, className, }: DateRangeFilterProps) => react_jsx_runtime.JSX.Element;
33
+
21
34
  interface DateRangeValue {
22
35
  from?: Date;
23
36
  to?: Date;
@@ -637,5 +650,5 @@ declare const getGradientBorderStyles: (theme: Theme, options?: GradientBorderOp
637
650
  declare const leftPipe: SxProps$2<Theme>;
638
651
  declare const expandableText: (isExpanded: boolean) => SxProps$2<Theme>;
639
652
 
640
- export { AccordionGroup, AccordionGroupItem, AccordionSingle, ActionBar, ActionBarTitle, AiButton, AiCard, AiChip, AiGlassCard, AiGlassPaper, AiPaper, Alert, Avatar, Body1, Body2, Box, ButtonBase, Caption, Card, CheckboxGroup, Chip, Code, Collapse, Container, DateRangePicker, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Divider, FaviconLinks, GlassCard, GlassPaper, GlassPaperAsync, GreenWaveBackground, Grid, H1, H2, H3, H4, IconButton, Link, LoadingSpinnerNexus, LocationMultiSelect, LogoOptions, MuiAppThemeProvider, NexusDataGrid, NexusHome, NexusLogo, Paper, PrimaryButton, PrimaryButtonLink, RagChip, RagDot, SearchInput, SecondaryButton, SecondaryButtonLink, Select, SideBlade, Skeleton, SkillChip, Stack, StatusBadge, StatusChip, Switch, Tab, Tabs, TextField, ThemeModeContext, ThemeModeProvider, ThemeToggle, Tooltip, colours, createSageTheme, expandableText, fontSageHeadline, fontSageText, fontSageUI, formatDate, getFaviconUrls, getFiscalPeriod, getGradientBorderStyles, getModeTokens, gradients, leftPipe, useThemeMode, useTokens };
641
- export type { AccordionGroupItemProps, AccordionGroupProps, AccordionSingleProps, AiButtonProps, AiCardProps, AiChipProps, AiGlassCardProps, AiGlassPaperProps, AiPaperProps, AvatarProps, AvatarSize, AvatarVariant, CardProps, CardTrend, DateRangePickerProps, DateRangePreset, DateRangeValue, GlassCardProps, GlassPaperAsyncProps, GlassPaperProps, GradientBorderOptions, GreenWaveBackgroundProps, IconButtonProps, IconButtonVariant, LinkProps, LoadingSpinnerNexusProps, ModeTokens, PrimaryButtonLinkProps, PrimaryButtonProps, SecondaryButtonLinkProps, SecondaryButtonProps, SelectOption, SelectProps, SideBladeProps, SkeletonProps, StatusBadgeProps, StatusBadgeVariant, ThemeMode, TooltipProps };
653
+ export { AccordionGroup, AccordionGroupItem, AccordionSingle, ActionBar, ActionBarTitle, AiButton, AiCard, AiChip, AiGlassCard, AiGlassPaper, AiPaper, Alert, Avatar, Body1, Body2, Box, ButtonBase, Caption, Card, CheckboxGroup, Chip, Code, Collapse, Container, DateRangeFilter, DateRangePicker, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Divider, FaviconLinks, GlassCard, GlassPaper, GlassPaperAsync, GreenWaveBackground, Grid, H1, H2, H3, H4, IconButton, Link, LoadingSpinnerNexus, LocationMultiSelect, LogoOptions, MuiAppThemeProvider, NexusDataGrid, NexusHome, NexusLogo, Paper, PrimaryButton, PrimaryButtonLink, RagChip, RagDot, SearchInput, SecondaryButton, SecondaryButtonLink, Select, SideBlade, Skeleton, SkillChip, Stack, StatusBadge, StatusChip, Switch, Tab, Tabs, TextField, ThemeModeContext, ThemeModeProvider, ThemeToggle, Tooltip, colours, createSageTheme, expandableText, fontSageHeadline, fontSageText, fontSageUI, formatDate, getFaviconUrls, getFiscalPeriod, getGradientBorderStyles, getModeTokens, gradients, leftPipe, useThemeMode, useTokens };
654
+ export type { AccordionGroupItemProps, AccordionGroupProps, AccordionSingleProps, AiButtonProps, AiCardProps, AiChipProps, AiGlassCardProps, AiGlassPaperProps, AiPaperProps, AvatarProps, AvatarSize, AvatarVariant, CardProps, CardTrend, DateRangeFilterProps, DateRangePickerProps, DateRangePreset, DateRangeValue, GlassCardProps, GlassPaperAsyncProps, GlassPaperProps, GradientBorderOptions, GreenWaveBackgroundProps, IconButtonProps, IconButtonVariant, LinkProps, LoadingSpinnerNexusProps, ModeTokens, PrimaryButtonLinkProps, PrimaryButtonProps, SecondaryButtonLinkProps, SecondaryButtonProps, SelectOption, SelectProps, SideBladeProps, SkeletonProps, StatusBadgeProps, StatusBadgeVariant, ThemeMode, TooltipProps };
package/dist/index.mjs CHANGED
@@ -1 +1 @@
1
- export{formatDate,getFiscalPeriod}from"./components/DateFormats.mjs";export{DateRangePicker}from"./components/DateRangePicker.mjs";export{Alert}from"./components/Alert.mjs";export{Code}from"./components/Code.mjs";export{Container}from"./components/Container.mjs";export{Grid}from"./components/Grid.mjs";export{Link}from"./components/Link.mjs";export{Select}from"./components/Select.mjs";export{StatusBadge}from"./components/StatusBadge.mjs";export{Switch}from"./components/Switch.mjs";export{ActionBarTitle,Body1,Body2,Caption,H1,H2,H3,H4}from"./components/Typography.mjs";export{ActionBar}from"./components/ActionBar.mjs";export{AccordionGroup,AccordionGroupItem}from"./components/AccordionGroup.mjs";export{AccordionSingle}from"./components/AccordionSingle.mjs";export{AiButton}from"./components/AiButton.mjs";export{AiChip}from"./components/AiChip.mjs";export{AiCard}from"./components/AiCard.mjs";export{AiGlassCard}from"./components/AiGlassCard.mjs";export{AiPaper}from"./components/AiPaper.mjs";export{AiGlassPaper}from"./components/AiGlassPaper.mjs";export{Box}from"./components/Box.mjs";export{Collapse}from"./components/Collapse.mjs";export{NexusDataGrid}from"./components/NexusDataGrid.mjs";export{ButtonBase}from"./components/ButtonBase.mjs";export{Card}from"./components/Card.mjs";export{CheckboxGroup}from"./components/CheckboxGroup.mjs";export{Chip}from"./components/Chip.mjs";export{Dialog,DialogActions,DialogContent,DialogContentText,DialogTitle}from"./components/Dialog.mjs";export{Divider}from"./components/Divider.mjs";export{GlassCard}from"./components/GlassCard.mjs";export{GlassPaper}from"./components/GlassPaper.mjs";export{GlassPaperAsync}from"./components/GlassPaperAsync.mjs";export{GreenWaveBackground}from"./components/GreenWaveBackground.mjs";export{IconButton}from"./components/IconButton.mjs";export{Avatar}from"./components/Avatar.mjs";export{LoadingSpinnerNexus}from"./components/LoadingSpinnerNexus.mjs";export{LocationMultiSelect}from"./components/LocationMultiSelect.mjs";export{LogoOptions}from"./components/LogoOptions/index.mjs";export{NexusHome}from"./components/NexusHome.mjs";export{default as NexusLogo}from"./components/NexusLogo.mjs";export{Paper}from"./components/Paper.mjs";export{PrimaryButton}from"./components/PrimaryButton.mjs";export{PrimaryButtonLink}from"./components/PrimaryButtonLink.mjs";export{SecondaryButton}from"./components/SecondaryButton.mjs";export{RagDot}from"./components/RagDot.mjs";export{RagChip}from"./components/RagChip.mjs";export{SecondaryButtonLink}from"./components/SecondaryButtonLink.mjs";export{SearchInput}from"./components/SearchInput.mjs";export{SideBlade}from"./components/SideBlade.mjs";export{Skeleton}from"./components/Skeleton.mjs";export{SkillChip}from"./components/SkillChip.mjs";export{Stack}from"./components/Stack.mjs";export{StatusChip}from"./components/StatusChip.mjs";export{Tab}from"./components/Tab.mjs";export{Tabs}from"./components/Tabs.mjs";export{TextField}from"./components/TextField.mjs";export{ThemeToggle}from"./components/ThemeToggle.mjs";export{Tooltip}from"./components/Tooltip.mjs";export{default as nexusLogoNode}from"./assets/images/nexus-logo-node.svg.mjs";export{default as nexusLogoFavicon}from"./assets/images/nexus-logo-favicon.svg.mjs";export{default as nexusLogoIco}from"./assets/images/favicon.ico.mjs";export{getFaviconUrls}from"./assets/images/urls.mjs";export{FaviconLinks}from"./components/FaviconLinks.mjs";export{createSageTheme}from"./theme/sageTheme.mjs";export{colours,fontSageHeadline,fontSageText,fontSageUI,getModeTokens,gradients}from"./theme/tokens.mjs";export{useTokens}from"./theme/useTokens.mjs";export{default as MuiAppThemeProvider}from"./theme/MuiAppThemeProvider.mjs";export{ThemeModeContext,ThemeModeProvider,useThemeMode}from"./theme/ThemeContext.mjs";export{AlertTitle,MenuItem,alpha,useMediaQuery,useTheme}from"@mui/material";export{expandableText,getGradientBorderStyles,leftPipe}from"./theme/sxHelpers.mjs";
1
+ export{formatDate,getFiscalPeriod}from"./components/DateFormats.mjs";export{DateRangeFilter}from"./components/DateRangeFilter.mjs";export{DateRangePicker}from"./components/DateRangePicker.mjs";export{Alert}from"./components/Alert.mjs";export{Code}from"./components/Code.mjs";export{Container}from"./components/Container.mjs";export{Grid}from"./components/Grid.mjs";export{Link}from"./components/Link.mjs";export{Select}from"./components/Select.mjs";export{StatusBadge}from"./components/StatusBadge.mjs";export{Switch}from"./components/Switch.mjs";export{ActionBarTitle,Body1,Body2,Caption,H1,H2,H3,H4}from"./components/Typography.mjs";export{ActionBar}from"./components/ActionBar.mjs";export{AccordionGroup,AccordionGroupItem}from"./components/AccordionGroup.mjs";export{AccordionSingle}from"./components/AccordionSingle.mjs";export{AiButton}from"./components/AiButton.mjs";export{AiChip}from"./components/AiChip.mjs";export{AiCard}from"./components/AiCard.mjs";export{AiGlassCard}from"./components/AiGlassCard.mjs";export{AiPaper}from"./components/AiPaper.mjs";export{AiGlassPaper}from"./components/AiGlassPaper.mjs";export{Box}from"./components/Box.mjs";export{Collapse}from"./components/Collapse.mjs";export{NexusDataGrid}from"./components/NexusDataGrid.mjs";export{ButtonBase}from"./components/ButtonBase.mjs";export{Card}from"./components/Card.mjs";export{CheckboxGroup}from"./components/CheckboxGroup.mjs";export{Chip}from"./components/Chip.mjs";export{Dialog,DialogActions,DialogContent,DialogContentText,DialogTitle}from"./components/Dialog.mjs";export{Divider}from"./components/Divider.mjs";export{GlassCard}from"./components/GlassCard.mjs";export{GlassPaper}from"./components/GlassPaper.mjs";export{GlassPaperAsync}from"./components/GlassPaperAsync.mjs";export{GreenWaveBackground}from"./components/GreenWaveBackground.mjs";export{IconButton}from"./components/IconButton.mjs";export{Avatar}from"./components/Avatar.mjs";export{LoadingSpinnerNexus}from"./components/LoadingSpinnerNexus.mjs";export{LocationMultiSelect}from"./components/LocationMultiSelect.mjs";export{LogoOptions}from"./components/LogoOptions/index.mjs";export{NexusHome}from"./components/NexusHome.mjs";export{default as NexusLogo}from"./components/NexusLogo.mjs";export{Paper}from"./components/Paper.mjs";export{PrimaryButton}from"./components/PrimaryButton.mjs";export{PrimaryButtonLink}from"./components/PrimaryButtonLink.mjs";export{SecondaryButton}from"./components/SecondaryButton.mjs";export{RagDot}from"./components/RagDot.mjs";export{RagChip}from"./components/RagChip.mjs";export{SecondaryButtonLink}from"./components/SecondaryButtonLink.mjs";export{SearchInput}from"./components/SearchInput.mjs";export{SideBlade}from"./components/SideBlade.mjs";export{Skeleton}from"./components/Skeleton.mjs";export{SkillChip}from"./components/SkillChip.mjs";export{Stack}from"./components/Stack.mjs";export{StatusChip}from"./components/StatusChip.mjs";export{Tab}from"./components/Tab.mjs";export{Tabs}from"./components/Tabs.mjs";export{TextField}from"./components/TextField.mjs";export{ThemeToggle}from"./components/ThemeToggle.mjs";export{Tooltip}from"./components/Tooltip.mjs";export{default as nexusLogoNode}from"./assets/images/nexus-logo-node.svg.mjs";export{default as nexusLogoFavicon}from"./assets/images/nexus-logo-favicon.svg.mjs";export{default as nexusLogoIco}from"./assets/images/favicon.ico.mjs";export{getFaviconUrls}from"./assets/images/urls.mjs";export{FaviconLinks}from"./components/FaviconLinks.mjs";export{createSageTheme}from"./theme/sageTheme.mjs";export{colours,fontSageHeadline,fontSageText,fontSageUI,getModeTokens,gradients}from"./theme/tokens.mjs";export{useTokens}from"./theme/useTokens.mjs";export{default as MuiAppThemeProvider}from"./theme/MuiAppThemeProvider.mjs";export{ThemeModeContext,ThemeModeProvider,useThemeMode}from"./theme/ThemeContext.mjs";export{AlertTitle,MenuItem,alpha,useMediaQuery,useTheme}from"@mui/material";export{expandableText,getGradientBorderStyles,leftPipe}from"./theme/sxHelpers.mjs";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sage-nexus-ui",
3
- "version": "1.5.5",
3
+ "version": "1.6.0",
4
4
  "description": "Nexus core components",
5
5
  "license": "ISC",
6
6
  "author": "emsmart-sage",
@@ -33,6 +33,7 @@
33
33
  "test": "echo \"Error: no test specified\" && exit 1"
34
34
  },
35
35
  "peerDependencies": {
36
+ "@radix-ui/react-popover": "^1.1.15",
36
37
  "@emotion/react": "^11.14.0",
37
38
  "@emotion/styled": "^11.14.1",
38
39
  "@mui/icons-material": "^7 || ^8 || ^9",
@@ -41,17 +42,25 @@
41
42
  "@mui/x-date-pickers": "^7 || ^8 || ^9",
42
43
  "date-fns": "^3 || ^4",
43
44
  "react": "^18 || ^19",
45
+ "react-day-picker": "^9.13.2",
44
46
  "react-dom": "^18 || ^19"
45
47
  },
46
48
  "peerDependenciesMeta": {
49
+ "@radix-ui/react-popover": {
50
+ "optional": true
51
+ },
47
52
  "@mui/x-data-grid": {
48
53
  "optional": true
49
54
  },
50
55
  "@mui/x-date-pickers": {
51
56
  "optional": true
57
+ },
58
+ "react-day-picker": {
59
+ "optional": true
52
60
  }
53
61
  },
54
62
  "devDependencies": {
63
+ "@radix-ui/react-popover": "^1.1.15",
55
64
  "@chromatic-com/storybook": "^5.1.1",
56
65
  "@emotion/react": "^11.14.0",
57
66
  "@emotion/styled": "^11.14.1",
@@ -85,6 +94,7 @@
85
94
  "playwright": "^1.59.1",
86
95
  "png-to-ico": "^2.1.8",
87
96
  "react": "^19.2.5",
97
+ "react-day-picker": "^9.13.2",
88
98
  "react-dom": "^19.2.5",
89
99
  "rollup": "^4.60.1",
90
100
  "rollup-plugin-dts": "^6.4.1",