@ndlib/component-library 0.0.91 → 0.0.93

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

@@ -1,3 +1,14 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import _ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import { ArrowLink } from '../../elements/ArrowLink';
@@ -12,6 +23,7 @@ import { COLOR } from '../../../theme/colors';
 import { importedDefaultComponentShim } from '../../../utils/misc';
 const ChevronRightIcon = importedDefaultComponentShim(_ChevronRightIcon);
 export const NavMenu = (props) => {
+    const { sx } = props, rest = __rest(props, ["sx"]);
     const { isOpen, activePath, getMenuItem, getMenuItemProps, getMenuProps } = useMenu();
     if (!isOpen) {
         return null;
@@ -23,14 +35,7 @@ export const NavMenu = (props) => {
         return null;
     }
     const submenu = activeTopLevelMenu.action.submenu;
-    return (_jsxs(Row, Object.assign({}, props, { sx: {
-            justifyContent: 'center',
-            p: 3,
-            border: 'solid 1px',
-            borderColor: COLOR.EXTRA_LIGHT_GRAY,
-            borderRadius: '4px',
-            margin: '0px 10px 0px 10px',
-        } }, { children: [_jsx(Column, { sx: { flexGrow: 1 } }), submenu.items.map((submenuItem, i) => {
+    return (_jsxs(Row, Object.assign({}, rest, { sx: Object.assign({ justifyContent: 'center', p: 3, border: 'solid 1px', borderColor: COLOR.EXTRA_LIGHT_GRAY, bg: COLOR.WHITE, borderRadius: '4px', margin: '0px 10px 0px 10px' }, sx) }, { children: [_jsx(Column, { sx: { flexGrow: 1 } }), submenu.items.map((submenuItem, i) => {
                 if (!(submenuItem.action.type === MENU_ACTION_TYPE.SUBMENU)) {
                     return null;
                 }

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

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof Dropdown>;
 export declare const Default: Story;
 export declare const MatchWidth: Story;
+export declare const ForcePlacement: Story;

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

@@ -4,6 +4,7 @@ import { Button } from '../../elements/Button';
 import { Box } from '../../elements/layout/Box';
 import { Dropdown } from '.';
 import { Paragraph } from '../text/Paragraph';
+import { Column } from '../layout/Column';
 const meta = {
     title: 'Elements/Dropdown',
     component: Dropdown,
@@ -18,3 +19,6 @@ export const Default = {
 export const MatchWidth = {
     render: () => (_jsx(Box, Object.assign({ sx: { width: '200px', height: '200px' } }, { children: _jsx(Dropdown, { matchWidth: true, renderAnchor: ({ anchorProps }) => (_jsx(Button, Object.assign({}, anchorProps, { rightIcon: ArrowDropDownIcon }, { children: "Open Dropdown" }))), renderDropdown: () => _jsx(Paragraph, { children: lorem }) }) }))),
 };
+export const ForcePlacement = {
+    render: () => (_jsx(Column, Object.assign({ sx: { width: '200x', height: '100vh' }, justify: "flex-end" }, { children: _jsx(Dropdown, { allowedPlacements: ['bottom-start'], renderAnchor: ({ anchorProps }) => (_jsx(Button, Object.assign({}, anchorProps, { rightIcon: ArrowDropDownIcon }, { children: "Open Dropdown" }))), renderDropdown: () => _jsx(Paragraph, { children: lorem }) }) }))),
+};

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

@@ -13,11 +13,13 @@ type DropdownRenderFn = (params: {
     setIsOpen: (isOpen: boolean) => void;
     id: string;
 }) => React.ReactNode;
+type Placement = 'top-start' | 'bottom-start' | 'top-end' | 'bottom-end';
 type DropdownProps = StyledElementProps<HTMLDivElement, {
     renderAnchor: AnchorRenderFn;
     renderDropdown: DropdownRenderFn;
     shouldRenderDropdownContainer?: boolean;
     matchWidth?: boolean;
+    allowedPlacements?: Placement[];
 }>;
 export declare const Overlay: React.FC<StyledElementProps<HTMLDivElement>>;
 export declare const Dropdown: React.FC<DropdownProps>;

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

@@ -26,7 +26,7 @@ export const Overlay = (props) => (_jsx(Box, Object.assign({}, props, { sx: {
         zIndex: Z_INDEX.ELEVATED,
     } })));
 export const Dropdown = (_a) => {
-    var { renderAnchor, renderDropdown, matchWidth, shouldRenderDropdownContainer = true } = _a, rest = __rest(_a, ["renderAnchor", "renderDropdown", "matchWidth", "shouldRenderDropdownContainer"]);
+    var { renderAnchor, renderDropdown, matchWidth, shouldRenderDropdownContainer = true, allowedPlacements = ['top-start', 'bottom-start', 'top-end', 'bottom-end'] } = _a, rest = __rest(_a, ["renderAnchor", "renderDropdown", "matchWidth", "shouldRenderDropdownContainer", "allowedPlacements"]);
     const [isOpen, setIsOpen] = useState(false);
     const [dropdownMinWidth, setDropdownMinWidth] = useState('0px');
     const [dropdownMaxWidth, setDropdownMaxWidth] = useState();
@@ -46,12 +46,7 @@ export const Dropdown = (_a) => {
                 },
             }),
             autoPlacement({
-                allowedPlacements: [
-                    'top-start',
-                    'bottom-start',
-                    'top-end',
-                    'bottom-end',
-                ],
+                allowedPlacements,
             }),
         ],
     });

package/package.json

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