@ndlib/component-library 0.0.20 → 0.0.22

package/dist/components/composites/NavMenu/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import _ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import { List, ListItem } from '../../elements/List';
 import { MENU_ACTION_TYPE, useMenu } from '../../providers/menu';
 import { Row } from '../../elements/layout/Row';
@@ -8,6 +8,9 @@ import { HEADING_SIZE, Heading } from '../../elements/text/Heading';
 import { Link } from '../../elements/Link';
 import { LINE_HEIGHT } from '../../../theme/typography';
 import { COLOR } from '../../../theme/colors';
+import { importedDefaultComponentShim } from '../../../utils/misc';
+// import { Column, HEADING_SIZE, Heading, LINE_HEIGHT, Link, Row } from "../../.."
+const ChevronRightIcon = importedDefaultComponentShim(_ChevronRightIcon);
 export const NavMenu = (props) => {
     const { isOpen, activePath, getMenuItem, getMenuItemProps, getMenuProps } = useMenu();
     if (!isOpen) {

package/dist/components/elements/Alerts/index.js

@@ -10,8 +10,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
-import WarningIcon from '@mui/icons-material/Warning';
-import InfoIcon from '@mui/icons-material/Info';
+import _WarningIcon from '@mui/icons-material/Warning';
+import _InfoIcon from '@mui/icons-material/Info';
 import { COLOR } from '../../../theme/colors';
 import { Markdown } from '../Markdown';
 import { Row } from '../layout/Row';
@@ -20,6 +20,9 @@ import { FONT_SIZE } from '../../../theme/typography';
 import { useAlerts, ALERT_TYPE } from '../../providers/alerts';
 import { useTheme } from '../../../theme';
 import { BUTTON_TYPE, Button } from '../Button';
+import { importedDefaultComponentShim } from '../../../utils/misc';
+const WarningIcon = importedDefaultComponentShim(_WarningIcon);
+const InfoIcon = importedDefaultComponentShim(_InfoIcon);
 export const Alerts = (_a) => {
     var { pageAlerts } = _a, rest = __rest(_a, ["pageAlerts"]);
     const { alerts, dismiss } = useAlerts(pageAlerts);

package/dist/components/elements/Fields/DatePicker/DatePicker.stories.d.ts

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof DatePicker>;
 export declare const Default: Story;
 export declare const Inline: Story;
+export declare const HighlightedDates: Story;

package/dist/components/elements/Fields/DatePicker/DatePicker.stories.js

@@ -10,7 +10,9 @@ const meta = {
 export default meta;
 const StatefulDatePicker = (props) => {
     const [date, setDate] = useState(new Date());
-    return _jsx(DatePicker, Object.assign({}, props, { value: date, onChange: setDate }));
+    return (_jsx(DatePicker, Object.assign({}, props, { value: date, onChange: (d) => {
+            setDate(d);
+        } })));
 };
 export const Default = {
     render: () => (_jsx(Box, Object.assign({ sx: { height: '500px' } }, { children: _jsx(StatefulDatePicker, { placeholder: "test" }) }))),
@@ -18,3 +20,12 @@ export const Default = {
 export const Inline = {
     render: () => (_jsx(Box, Object.assign({ sx: { height: '500px' } }, { children: _jsx(StatefulDatePicker, { inline: true }) }))),
 };
+export const HighlightedDates = {
+    render: () => {
+        const highlightedDate1 = new Date();
+        highlightedDate1.setDate(highlightedDate1.getDate() + 1);
+        const highlightedDate2 = new Date();
+        highlightedDate2.setDate(highlightedDate2.getDate() - 1);
+        return (_jsx(Box, Object.assign({ sx: { height: '500px' } }, { children: _jsx(StatefulDatePicker, { inline: true, highlightDates: [highlightedDate1, highlightedDate2] }) })));
+    },
+};

package/dist/components/elements/Fields/DatePicker/index.d.ts

@@ -14,6 +14,7 @@ export declare const DatePicker: React.FC<{
     minDate?: Date;
     maxDate?: Date;
     inline?: boolean;
+    highlightDates?: Date[];
     wrapperProps?: BoxProps;
     inputProps?: Partial<TextInputProps>;
 }>;

package/dist/components/elements/Fields/DatePicker/index.js

@@ -11,11 +11,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import ReactDatePicker from 'react-datepicker';
+import _ReactDatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import { TextInput } from '../TextInput';
-import CalendarIcon from '@mui/icons-material/CalendarMonth';
+import _CalendarIcon from '@mui/icons-material/CalendarMonth';
 import { Box } from '../../layout/Box';
+import { importedDefaultComponentShim } from '../../../../utils/misc';
+const CalendarIcon = importedDefaultComponentShim(_CalendarIcon);
+const ReactDatePicker = importedDefaultComponentShim(_ReactDatePicker);
 // Need to do this to allow passing props to TextInput
 // react-datepicker will overwrite all props passed to customInput
 export const InputWrapper = React.forwardRef(({ onChange, value, children, onClick }, ref) => {
@@ -28,7 +31,20 @@ export const InputWrapper = React.forwardRef(({ onChange, value, children, onCli
     });
 });
 const PermissiveTextInput = TextInput;
+const areDatesEqual = (d1, d2) => {
+    const serializeDate = (d) => `${d.getFullYear()} ${d.getMonth()} ${d.getDate()}`;
+    return serializeDate(d1) === serializeDate(d2);
+};
 export const DatePicker = (_a) => {
-    var { value, wrapperProps, inputProps } = _a, rest = __rest(_a, ["value", "wrapperProps", "inputProps"]);
-    return (_jsx(Box, Object.assign({}, wrapperProps, { children: _jsx(ReactDatePicker, Object.assign({ calendarClassName: "ndlib-date-picker", selected: value, customInput: _jsx(InputWrapper, { children: _jsx(PermissiveTextInput, Object.assign({}, inputProps)) }) }, rest)) })));
+    var { value, wrapperProps, inputProps, highlightDates } = _a, rest = __rest(_a, ["value", "wrapperProps", "inputProps", "highlightDates"]);
+    const highlightDateSet = new Set(highlightDates === null || highlightDates === void 0 ? void 0 : highlightDates.map((d) => d.toDateString()));
+    return (_jsx(Box, Object.assign({}, wrapperProps, { children: _jsx(ReactDatePicker, Object.assign({ calendarClassName: "ndlib-date-picker", selected: value, dayClassName: (date) => {
+                if (areDatesEqual(date, value)) {
+                    return '';
+                }
+                if (highlightDateSet.has(date.toDateString())) {
+                    return 'ndlib-date-picker-highlight';
+                }
+                return '';
+            }, customInput: _jsx(InputWrapper, { children: _jsx(PermissiveTextInput, Object.assign({}, inputProps)) }) }, rest)) })));
 };

package/dist/components/elements/Fields/MonthPicker/index.js

@@ -10,11 +10,13 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import ReactDatePicker from 'react-datepicker';
+import _ReactDatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import { TextInput } from '../TextInput';
 import { InputWrapper } from '../DatePicker';
 import { Box } from '../../layout/Box';
+import { importedDefaultComponentShim } from '../../../../utils/misc';
+const ReactDatePicker = importedDefaultComponentShim(_ReactDatePicker);
 const PermissiveTextInput = TextInput;
 export const MonthPicker = (_a) => {
     var { value, inputProps, wrapperProps } = _a, rest = __rest(_a, ["value", "inputProps", "wrapperProps"]);

package/dist/components/elements/Fields/Select/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
-import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import _ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import { useFloating, size as sizeMiddleware, offset, autoPlacement, } from '@floating-ui/react';
 import { TYPOGRAPHY_TYPE, getTypographyStyles, } from '../../../../theme/typography';
 import { useTheme } from '../../../../theme';
@@ -9,8 +9,9 @@ import { ListBox } from '../../ListBox';
 import { BUTTON_SIZE, BUTTON_TYPE, Button } from '../../Button';
 import { defaultRenderOptionLabel, getOptionId, } from '../option';
 import { useUniqueHtmlId } from '../../../../utils/hooks/useUniqueHtmlId';
-import { KEY_CODES } from '../../../../utils/misc';
+import { KEY_CODES, importedDefaultComponentShim } from '../../../../utils/misc';
 import { COLOR } from '../../../../theme/colors';
+const ArrowDropDownIcon = importedDefaultComponentShim(_ArrowDropDownIcon);
 const typographyMap = {
     [INPUT_SIZE.SM]: TYPOGRAPHY_TYPE.PARAGRAPH_SMALL,
     [INPUT_SIZE.MD]: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM,

package/dist/components/elements/List/index.js

@@ -12,13 +12,18 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
 /** @jsxImportSource theme-ui */
 import React from 'react';
-import CircleIcon from '@mui/icons-material/Circle';
-import CircleOutlinedIcon from '@mui/icons-material/CircleOutlined';
-import SquareIcon from '@mui/icons-material/Square';
-import SquareOutlinedIcon from '@mui/icons-material/SquareOutlined';
+import _CircleIcon from '@mui/icons-material/Circle';
+import _CircleOutlinedIcon from '@mui/icons-material/CircleOutlined';
+import _SquareIcon from '@mui/icons-material/Square';
+import _SquareOutlinedIcon from '@mui/icons-material/SquareOutlined';
 import { COLOR, Label, TYPOGRAPHY_TYPE } from '../../..';
 import { FONT_SIZE, getTypographyStyles } from '../../../theme/typography';
 import { Icon } from '../Icon';
+import { importedDefaultComponentShim } from '../../../utils/misc';
+const CircleIcon = importedDefaultComponentShim(_CircleIcon);
+const CircleOutlinedIcon = importedDefaultComponentShim(_CircleOutlinedIcon);
+const SquareIcon = importedDefaultComponentShim(_SquareIcon);
+const SquareOutlinedIcon = importedDefaultComponentShim(_SquareOutlinedIcon);
 export var LIST_SIZE;
 (function (LIST_SIZE) {
     LIST_SIZE["SM"] = "sm";

package/dist/components/providers/ui.d.ts

@@ -8,6 +8,7 @@ export type UiConfig = {
     alertsConfig?: AlertQueryParams;
     disableAlerts?: boolean;
     loadFonts?: boolean;
+    loadGlobalStyles?: boolean;
 };
 type UiProviderProps = PropsWithChildren<UiConfig>;
 export declare const UiProvider: React.FC<UiProviderProps>;

package/dist/components/providers/ui.js

@@ -4,6 +4,7 @@ import { EnvironmentProvider } from './env';
 import { ThemeProvider } from './theme';
 import { AlertsProvider } from './alerts';
 import { FontLoader } from '../../FontLoader';
-export const UiProvider = ({ env, components, alertsConfig, children, loadFonts, }) => {
-    return (_jsxs(EnvironmentProvider, Object.assign({ env: env }, { children: [_jsx(ComponentConfigProvider, Object.assign({ config: components || {} }, { children: _jsx(ThemeProvider, { children: _jsx(AlertsProvider, Object.assign({}, alertsConfig, { children: children })) }) })), loadFonts && _jsx(FontLoader, {})] })));
+import { GlobalStyles } from '../../theme/GlobalStyles';
+export const UiProvider = ({ env, components, alertsConfig, children, loadFonts, loadGlobalStyles, }) => {
+    return (_jsxs(EnvironmentProvider, Object.assign({ env: env }, { children: [_jsx(ComponentConfigProvider, Object.assign({ config: components || {} }, { children: _jsx(ThemeProvider, { children: _jsx(AlertsProvider, Object.assign({}, alertsConfig, { children: children })) }) })), loadGlobalStyles && _jsx(GlobalStyles, {}), loadFonts && _jsx(FontLoader, {})] })));
 };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export { theme, ThemeProvider, useTheme } from './theme';
 export { COLOR } from './theme/colors';
 export { TYPOGRAPHY_TYPE, FONT, FONT_SIZE, FONT_WEIGHT, LINE_HEIGHT, } from './theme/typography';
+export { GlobalStyles } from './theme/GlobalStyles';
 export { Alert, Alerts } from './components/elements/Alerts';
 export { BrandingBar } from './components/elements/BrandingBar';
 export { Button, BUTTON_SIZE, BUTTON_TYPE } from './components/elements/Button';
@@ -24,6 +25,7 @@ export { Radio } from './components/elements/Fields/Radio';
 export { RadioGroup } from './components/elements/Fields/RadioGroup';
 export { List, ListItem, LIST_SIZE } from './components/elements/List';
 export { ReadMore } from './components/elements/text/ReadMore';
+export { Icon } from './components/elements/Icon';
 export { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
 export { UiProvider } from './components/providers/ui';
 export { MenuProvider, useMenu } from './components/providers/menu';

package/dist/index.js

@@ -1,6 +1,7 @@
 export { theme, ThemeProvider, useTheme } from './theme';
 export { COLOR } from './theme/colors';
 export { TYPOGRAPHY_TYPE, FONT, FONT_SIZE, FONT_WEIGHT, LINE_HEIGHT, } from './theme/typography';
+export { GlobalStyles } from './theme/GlobalStyles';
 export { Alert, Alerts } from './components/elements/Alerts';
 export { BrandingBar } from './components/elements/BrandingBar';
 export { Button, BUTTON_SIZE, BUTTON_TYPE } from './components/elements/Button';
@@ -24,6 +25,7 @@ export { Radio } from './components/elements/Fields/Radio';
 export { RadioGroup } from './components/elements/Fields/RadioGroup';
 export { List, ListItem, LIST_SIZE } from './components/elements/List';
 export { ReadMore } from './components/elements/text/ReadMore';
+export { Icon } from './components/elements/Icon';
 export { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
 export { UiProvider } from './components/providers/ui';
 export { MenuProvider, useMenu } from './components/providers/menu';

package/dist/theme/GlobalStyles.js

@@ -147,6 +147,12 @@ const globalStyles = css `
     padding: 4px;
   }
 
+  .ndlib-date-picker .ndlib-date-picker-highlight {
+    background-color: ${colors.ndTertiary1};
+    border-radius: 0.3rem;
+    color: ${colors.background};
+  }
+
   @font-face {
     font-family: GPCMed;
     font-display: swap;

package/dist/utils/misc.d.ts

@@ -11,3 +11,4 @@ export declare enum KEY_CODES {
     ESCAPE = "Escape"
 }
 export declare const equals: (a: any, b: any) => boolean;
+export declare function importedDefaultComponentShim<T>(component: T): T;

package/dist/utils/misc.js

@@ -14,3 +14,15 @@ export var KEY_CODES;
     KEY_CODES["ESCAPE"] = "Escape";
 })(KEY_CODES || (KEY_CODES = {}));
 export const equals = (a, b) => JSON.stringify(a) === JSON.stringify(b);
+// @mui/material-icons and react-datepicker dependencies exports
+// their modules as { default: Component } with is causing problems
+// when included in downstream apps. This shim prevents issues by
+// resolving ambiguity on how to handle the imports explicitly
+export function importedDefaultComponentShim(component) {
+    if (component && typeof component === 'object' && 'default' in component) {
+        return component.default;
+    }
+    else {
+        return component;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndlib/component-library",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "type": "module",
   "sideEffects": false,
   "files": [