@ndlib/component-library 0.0.61 → 0.0.62

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.js

@@ -51,7 +51,12 @@ export const DropdownLinks = (_a) => {
                 },
             }),
             autoPlacement({
-                allowedPlacements: ['top-start', 'bottom-start'],
+                allowedPlacements: [
+                    'top-start',
+                    'bottom-start',
+                    'top-end',
+                    'bottom-end',
+                ],
             }),
         ],
     });

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

@@ -4,3 +4,5 @@ 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 ColumnGroup: Story;

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

@@ -40,3 +40,25 @@ 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 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

@@ -10,9 +10,10 @@ type ColumnProps<RowData extends object> = {
     children?: ColumnRenderFn<RowData>;
     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

@@ -4,9 +4,33 @@ import { COLOR } from '../../../theme/colors';
 import { useEnvironment } from '../../providers/env';
 import { TYPOGRAPHY_TYPE, typographyStyleMap } from '../../../theme/typography';
 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) {

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.62",
   "type": "module",
   "sideEffects": false,
   "files": [