@ndlib/component-library 0.0.62 → 0.0.65

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);
@@ -74,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

@@ -5,4 +5,5 @@ 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

@@ -50,6 +50,15 @@ export const OmitColumn = {
                     } }, { 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: {

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

@@ -8,6 +8,7 @@ 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;

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

@@ -3,6 +3,7 @@ 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 headerList = [];
     const parseHeaders = (children) => {
@@ -43,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;
@@ -56,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

@@ -34,6 +34,7 @@ export { TabList, Tab } from './components/elements/TabList';
 export { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
 export { SnackBar } from './components/composites/SnackBar';
 export { NavMenu } from './components/composites/NavMenu';
+export { MENU_ACTION_TYPE, MENU_ORIENTATION } from './components/providers/menu';
 export { EmptyState, EMPTY_STATE_SIZE, } from './components/composites/EmptyState';
 export { DropdownLinks } from './components/composites/DropdownLinks';
 export { Modal } from './components/composites/Modal';

package/dist/index.js

@@ -33,6 +33,7 @@ export { TabList, Tab } from './components/elements/TabList';
 export { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
 export { SnackBar } from './components/composites/SnackBar';
 export { NavMenu } from './components/composites/NavMenu';
+export { MENU_ACTION_TYPE, MENU_ORIENTATION } from './components/providers/menu';
 export { EmptyState, EMPTY_STATE_SIZE, } from './components/composites/EmptyState';
 export { DropdownLinks } from './components/composites/DropdownLinks';
 export { Modal } from './components/composites/Modal';

package/package.json

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