@ndlib/component-library 0.0.61 → 0.0.63

package/dist/components/composites/DropdownLinks/DropdownLinks.stories.d.ts

@@ -4,4 +4,5 @@ declare const meta: Meta<typeof DropdownLinks>;
 export default meta;
 type Story = StoryObj<typeof DropdownLinks>;
 export declare const Default: Story;
+export declare const Right: Story;
 export declare const OpenInNewTab: Story;

package/dist/components/composites/DropdownLinks/DropdownLinks.stories.js

@@ -3,6 +3,7 @@ import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import { DropdownLinks } from '.';
 import { Button } from '../../elements/Button';
 import { Box } from '../../elements/layout/Box';
+import { Row } from '../../elements/layout/Row';
 const meta = {
     title: 'Composites/DropdownLinks',
     component: DropdownLinks,
@@ -11,11 +12,14 @@ const meta = {
 export default meta;
 const options = [
     { value: 'https://google.com', label: 'Google' },
-    { value: 'https://facebook.com', label: 'Facebook' },
+    { value: 'https://facebook.com', label: 'This is intentionally long' },
 ];
 export const Default = {
     render: () => (_jsx(Box, Object.assign({ sx: { width: '200px', height: '200px' } }, { children: _jsx(DropdownLinks, Object.assign({ options: options }, { children: ({ anchorProps }) => (_jsx(Button, Object.assign({}, anchorProps, { rightIcon: ArrowDropDownIcon }, { children: "Links" }))) })) }))),
 };
+export const Right = {
+    render: () => (_jsx(Row, Object.assign({ sx: { width: '90vw', height: '200px' }, justify: "flex-end" }, { children: _jsx(DropdownLinks, Object.assign({ options: options }, { children: ({ anchorProps }) => (_jsx(Button, Object.assign({}, anchorProps, { rightIcon: ArrowDropDownIcon }, { children: "Links" }))) })) }))),
+};
 export const OpenInNewTab = {
     render: () => (_jsx(Box, Object.assign({ sx: { width: '200px', height: '200px' } }, { children: _jsx(DropdownLinks, Object.assign({ options: options, openNewTab: true }, { children: ({ anchorProps }) => _jsx(Button, Object.assign({}, anchorProps, { children: "Links" })) })) }))),
 };

package/dist/components/composites/DropdownLinks/index.d.ts

@@ -11,5 +11,6 @@ type DropdownLinksProps = StyledElementProps<HTMLDivElement, {
     renderOption?: RenderOption<string, LinkOption>;
     openNewTab?: boolean;
 }, DropdownChildrenFn>;
+export declare const Overlay: React.FC<StyledElementProps<HTMLDivElement>>;
 export declare const DropdownLinks: React.FC<DropdownLinksProps>;
 export {};

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

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useState } from 'react';
 import { autoPlacement, offset, size, useFloating } from '@floating-ui/react';
 import { ListBox } from '../../elements/ListBox';
@@ -17,6 +17,15 @@ import { Link } from '../../elements/Link';
 import { Box } from '../../elements/layout/Box';
 import { useComponentConfig } from '../../providers/componentConfig';
 import { useUniqueId } from '../../providers/uniqueIds';
+import { Z_INDEX } from '../../../theme/custom';
+export const Overlay = (props) => (_jsx(Box, Object.assign({}, props, { sx: {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100vw',
+        height: '100vh',
+        zIndex: Z_INDEX.ELEVATED,
+    } })));
 export const DropdownLinks = (_a) => {
     var { children, options: optionsParam, renderOption: renderOptionParam, openNewTab, role = 'navigation' } = _a, rest = __rest(_a, ["children", "options", "renderOption", "openNewTab", "role"]);
     const [isOpen, setIsOpen] = useState(false);
@@ -51,7 +60,12 @@ export const DropdownLinks = (_a) => {
                 },
             }),
             autoPlacement({
-                allowedPlacements: ['top-start', 'bottom-start'],
+                allowedPlacements: [
+                    'top-start',
+                    'bottom-start',
+                    'top-end',
+                    'bottom-end',
+                ],
             }),
         ],
     });
@@ -69,5 +83,5 @@ export const DropdownLinks = (_a) => {
     return (_jsxs(Box, Object.assign({}, rest, { children: [children &&
                 children({
                     anchorProps: dropdownAnchorProps,
-                }), isOpen && (_jsx(ListBox, { role: role, id: listboxId, options: options, ref: refs.setFloating, renderOption: renderOption, style: Object.assign(Object.assign({ minWidth: dropdownMinWidth }, floatingStyles), { zIndex: 1 }) }))] })));
+                }), isOpen && (_jsxs(_Fragment, { children: [_jsx(ListBox, { role: role, id: listboxId, options: options, ref: refs.setFloating, renderOption: renderOption, style: Object.assign(Object.assign({ minWidth: dropdownMinWidth }, floatingStyles), { zIndex: Z_INDEX.DIALOG }) }), _jsx(Overlay, { onClick: () => setIsOpen(false) })] }))] })));
 };

package/dist/components/elements/Table/Table.stories.d.ts

@@ -4,3 +4,6 @@ declare const meta: Meta<typeof Table>;
 export default meta;
 type Story = StoryObj<typeof Table>;
 export declare const Default: Story;
+export declare const OmitColumn: Story;
+export declare const ResponsiveColumn: Story;
+export declare const ColumnGroup: Story;

package/dist/components/elements/Table/Table.stories.js

@@ -40,3 +40,34 @@ export const Default = {
                     width: '100px',
                 } }, { children: (row) => row.age })), _jsx(TableColumn, Object.assign({ header: "Occupation" }, { children: (row) => row.position }))] }))),
 };
+export const OmitColumn = {
+    render: () => {
+        const someCondition = false;
+        return (_jsxs(Table, Object.assign({ data: data, alternateRowColor: true }, { children: [_jsx(TableColumn, { header: "Name", dataKey: "name", sx: {
+                        width: '160px',
+                    } }), someCondition ? (_jsx(TableColumn, Object.assign({ header: "Age", sx: {
+                        width: '100px',
+                    } }, { children: (row) => row.age }))) : null, _jsx(TableColumn, Object.assign({ header: "Occupation" }, { children: (row) => row.position }))] })));
+    },
+};
+export const ResponsiveColumn = {
+    render: () => {
+        return (_jsxs(Table, Object.assign({ data: data, alternateRowColor: true }, { children: [_jsx(TableColumn, { header: "Name", dataKey: "name", sx: {
+                        width: '160px',
+                    } }), _jsx(TableColumn, Object.assign({ breakpoint: 2, header: "Age", sx: {
+                        width: '100px',
+                    } }, { children: (row) => row.age })), _jsx(TableColumn, Object.assign({ header: "Occupation" }, { children: (row) => row.position }))] })));
+    },
+};
+export const ColumnGroup = {
+    render: () => {
+        return (_jsxs(Table, Object.assign({ data: data, alternateRowColor: true }, { children: [_jsx(TableColumn, { header: "Name", dataKey: "name", sx: {
+                        width: '160px',
+                    } }), [
+                    _jsx(TableColumn, Object.assign({ header: "Age", sx: {
+                            width: '100px',
+                        } }, { children: (row) => row.age })),
+                    _jsx(TableColumn, Object.assign({ header: "Occupation" }, { children: (row) => row.position })),
+                ]] })));
+    },
+};

package/dist/components/elements/Table/index.d.ts

@@ -8,11 +8,13 @@ type ColumnProps<RowData extends object> = {
     align?: 'left' | 'center' | 'right';
     alignHeader?: 'left' | 'center' | 'right';
     children?: ColumnRenderFn<RowData>;
+    breakpoint?: number;
     sx?: StylesProp;
 };
+type ChildList = ChildList[] | JSX.Element | null | undefined;
 type TableProps<RowData> = StyledElementProps<HTMLTableElement, {
     data: RowData[];
-    children: JSX.Element[];
+    children: ChildList[];
     cellStyles?: StylesProp;
     alternateRowColor?: boolean;
     showRowDividers?: boolean;

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

@@ -3,10 +3,35 @@ import { useMemo } from 'react';
 import { COLOR } from '../../../theme/colors';
 import { useEnvironment } from '../../providers/env';
 import { TYPOGRAPHY_TYPE, typographyStyleMap } from '../../../theme/typography';
+import { useMediaQuery } from '../../providers/media';
 const useColumnSpec = (children) => {
-    const columnList = JSON.stringify(children.map((child) => child.props.header));
+    const headerList = [];
+    const parseHeaders = (children) => {
+        children.forEach((child) => {
+            if (Array.isArray(child)) {
+                parseHeaders(child);
+            }
+            else if (child) {
+                headerList.push(child.props.header);
+            }
+        });
+    };
+    parseHeaders(children);
+    const columnList = JSON.stringify(headerList);
     return useMemo(() => {
-        return children.map((child) => child.props);
+        const columnProps = [];
+        const parseColumnProps = (children) => {
+            children.forEach((child) => {
+                if (Array.isArray(child)) {
+                    parseColumnProps(child);
+                }
+                else if (child) {
+                    columnProps.push(child.props);
+                }
+            });
+        };
+        parseColumnProps(children);
+        return columnProps;
     }, [columnList]);
 };
 export function TableColumn(props) {
@@ -19,6 +44,7 @@ export function Table(props) {
     const { role, data, alternateRowColor = true, cellStyles, sx, children, showRowDividers = true, showColumnDividers = false, } = props;
     const cellTypographyStyles = typographyStyleMap[TYPOGRAPHY_TYPE.CONDENSED_TEXT_MEDIUM];
     const headerTypographyStyles = typographyStyleMap[TYPOGRAPHY_TYPE.CONTROL_MEDIUM];
+    const { breakpoint } = useMediaQuery();
     const columnSpec = useColumnSpec(children);
     const getCellStyles = (params) => {
         const { columnProps, rowIndex, columnIndex } = params;
@@ -32,9 +58,15 @@ export function Table(props) {
     };
     return (_jsxs("table", Object.assign({ role: role, sx: sx }, { children: [_jsx("thead", Object.assign({ role: "rowgroup" }, { children: _jsx("tr", { children: columnSpec.map((column, i) => {
                         const isLastColumn = i === columnSpec.length - 1;
+                        if (column.breakpoint && breakpoint < column.breakpoint) {
+                            return null;
+                        }
                         return (_jsx("th", Object.assign({ role: "columnheader", sx: Object.assign(Object.assign({ textAlign: column.alignHeader || column.align || 'left', borderBottom: '1px solid', borderRight: showColumnDividers && !isLastColumn ? '1px solid' : 'none', borderColor: COLOR.LIGHT_GRAY, px: 3, pb: 1 }, headerTypographyStyles), column.headerStyles) }, { children: column.header }), i));
                     }) }) })), _jsx("tbody", Object.assign({ role: "rowgroup" }, { children: data.map((rowData, rowIndex) => {
                     return (_jsx("tr", Object.assign({ role: "row" }, { children: columnSpec.map((column, columnIndex) => {
+                            if (column.breakpoint && breakpoint < column.breakpoint) {
+                                return null;
+                            }
                             const { children, dataKey } = column;
                             const cellStyles = getCellStyles({
                                 columnProps: column,

package/dist/index.d.ts

@@ -43,7 +43,7 @@ export { StructuredData } from './components/composites/StructuredData';
 export { UiProvider } from './components/providers/ui';
 export { MenuProvider, useMenu } from './components/providers/menu';
 export { SnackBarProvider, useSnackBar } from './components/providers/snackBar';
-export { useAlerts, AlertsProvider, ALERT_DOMAIN, } from './components/providers/alerts';
+export { useAlerts, AlertsProvider, ALERT_TYPE, ALERT_DOMAIN, } from './components/providers/alerts';
 export { MediaSizeProvider, useMediaQuery } from './components/providers/media';
 export { DialogsProvider, useDialog } from './components/providers/dialogs';
 export { useUniqueId } from './components/providers/uniqueIds';

package/dist/index.js

@@ -42,7 +42,7 @@ export { StructuredData } from './components/composites/StructuredData';
 export { UiProvider } from './components/providers/ui';
 export { MenuProvider, useMenu } from './components/providers/menu';
 export { SnackBarProvider, useSnackBar } from './components/providers/snackBar';
-export { useAlerts, AlertsProvider, ALERT_DOMAIN, } from './components/providers/alerts';
+export { useAlerts, AlertsProvider, ALERT_TYPE, ALERT_DOMAIN, } from './components/providers/alerts';
 export { MediaSizeProvider, useMediaQuery } from './components/providers/media';
 export { DialogsProvider, useDialog } from './components/providers/dialogs';
 export { useUniqueId } from './components/providers/uniqueIds';

package/package.json

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