@ndlib/component-library 1.0.43 → 1.0.45

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

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DropdownLinksV2 } from '.';
+declare const meta: Meta<typeof DropdownLinksV2>;
+export default meta;
+type Story = StoryObj<typeof DropdownLinksV2>;
+export declare const Default: Story;
+export declare const Right: Story;
+export declare const OpenInNewTab: Story;

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import { DropdownLinksV2 } from '.';
+import { ButtonV2 } from '../../elements/ButtonV2';
+import { BoxV2 } from '../../elements/BoxV2';
+import { RowV2 } from '../../elements/RowV2';
+import { UIVersion2 } from '../../../utils/decorators/UIVersion2';
+const meta = {
+    title: 'Composites/DropdownLinksV2',
+    component: DropdownLinksV2,
+    tags: ['autodocs'],
+    decorators: [UIVersion2],
+};
+export default meta;
+const options = [
+    { value: 'https://google.com', label: 'Google' },
+    { value: 'https://facebook.com', label: 'This is intentionally long' },
+];
+export const Default = {
+    render: () => (_jsx(BoxV2, Object.assign({ sx: { width: '200px', height: '200px' } }, { children: _jsx(DropdownLinksV2, Object.assign({ options: options }, { children: ({ anchorProps }) => (_jsx(ButtonV2, Object.assign({}, anchorProps, { rightIcon: ArrowDropDownIcon }, { children: "Links" }))) })) }))),
+};
+export const Right = {
+    render: () => (_jsx(RowV2, Object.assign({ sx: { width: '90vw', height: '200px' }, justify: "flex-end" }, { children: _jsx(DropdownLinksV2, Object.assign({ options: options }, { children: ({ anchorProps }) => (_jsx(ButtonV2, Object.assign({}, anchorProps, { rightIcon: ArrowDropDownIcon }, { children: "Links" }))) })) }))),
+};
+export const OpenInNewTab = {
+    render: () => (_jsx(BoxV2, Object.assign({ sx: { width: '200px', height: '200px' } }, { children: _jsx(DropdownLinksV2, Object.assign({ options: options, openNewTab: true }, { children: ({ anchorProps }) => _jsx(ButtonV2, Object.assign({}, anchorProps, { children: "Links" })) })) }))),
+};

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { BasicOption, RenderOption } from '../../elements/option';
+import { StyledElementPropsV2 } from '../../../theme';
+type AnchorProps = Omit<React.HTMLAttributes<HTMLButtonElement>, 'color'>;
+type LinkOption = BasicOption<string>;
+type DropdownChildrenFn = (params: {
+    anchorProps: AnchorProps;
+}) => React.ReactNode;
+type DropdownLinksV2Props = StyledElementPropsV2<HTMLDivElement, {
+    options: BasicOption<string>[];
+    renderOption?: RenderOption<string, LinkOption>;
+    openNewTab?: boolean;
+}, DropdownChildrenFn>;
+export declare const DropdownLinksV2: React.FC<DropdownLinksV2Props>;
+export {};

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ListBoxV2 } from '../../elements/ListBoxV2';
+import { useComponentConfigV2 } from '../../providers/componentConfigV2';
+import { DropdownV2 } from '../../elements/DropdownV2';
+export const DropdownLinksV2 = ({ children, options: optionsParam, renderOption: renderOptionParam, openNewTab, role = 'navigation', }) => {
+    const { navigate } = useComponentConfigV2().link;
+    const renderOption = renderOptionParam
+        ? renderOptionParam
+        : (params) => (_jsx("a", Object.assign({ href: params.option.value, target: openNewTab ? '_blank' : undefined, style: { textDecoration: 'none', fontWeight: 700 }, onClick: (e) => {
+                e.preventDefault();
+            } }, { children: params.option.label })));
+    return (_jsx(DropdownV2, { shouldRenderDropdownContainer: false, renderAnchor: children, renderDropdown: ({ ref, styles, id, setIsOpen }) => {
+            const options = optionsParam.map((option) => (Object.assign(Object.assign({}, option), { onClick: () => {
+                    if (option.onClick) {
+                        option.onClick();
+                    }
+                    else if (openNewTab) {
+                        window.open(option.value, '_blank');
+                    }
+                    else {
+                        navigate(option.value);
+                    }
+                    setIsOpen(false);
+                } })));
+            return (_jsx(ListBoxV2, { role: role, id: id, options: options, ref: ref, renderOption: renderOption, style: styles }));
+        } }));
+};

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { StyledElementPropsV2 } from '../../../theme';
+type NavMenuV2Props = StyledElementPropsV2<HTMLDivElement>;
+export declare const NavMenuV2: React.FC<NavMenuV2Props>;
+export {};

package/dist/components/composites/{NavMenu2 → NavMenuV2}/index.js

@@ -46,7 +46,7 @@ export const NavMenuV2 = (props) => {
                 const leafMenuItems = submenuItem.action.submenu.items;
                 const submenuPath = [topLevelMenuId, submenuItem.id];
                 const link = '//' + document.location.host + topLevelMenuId;
-                const category = topLevelMenuId.charAt(1).toUpperCase() + topLevelMenuId.slice(2);
+                const category = topLevelMenuId.charAt(0).toUpperCase() + topLevelMenuId.slice(1);
                 return (_jsxs(ColumnV2, Object.assign({ className: typeSafeStyles.submenuCol }, { children: [_jsx("div", Object.assign({}, getPropsWithoutStyle(() => getMenuItemProps(submenuPath)), { children: _jsx(HeadingV2, Object.assign({ standalone: true, size: HEADINGV2_SIZE.SM, underline: true }, { children: submenuItem.label })) })), _jsx(ListV2, Object.assign({}, getPropsWithoutStyle(() => getMenuProps(submenuPath)), { icon: ChevronRightIcon, iconSize: FONT_SIZE.MS }, { children: leafMenuItems.map((leafMenuItem, i) => {
                                 var _a;
                                 const leafMenuPath = submenuPath.concat(leafMenuItem.id);

package/dist/index.d.ts

@@ -67,9 +67,10 @@ export { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
 export { CardV2, CARDV2_SIZE, CARDV2_LAYOUT, } from './components/composites/CardV2';
 export { SnackBar } from './components/composites/SnackBar';
 export { NavMenu } from './components/composites/NavMenu';
-export { NavMenuV2 } from './components/composites/NavMenu2';
+export { NavMenuV2 } from './components/composites/NavMenuV2';
 export { EmptyState, EMPTY_STATE_SIZE, } from './components/composites/EmptyState';
 export { DropdownLinks } from './components/composites/DropdownLinks';
+export { DropdownLinksV2 } from './components/composites/DropdownLinksV2';
 export { Modal } from './components/composites/Modal';
 export { ModalV2 } from './components/composites/ModalV2';
 export { DragDropList, DragHandle } from './components/composites/DragDropList';

package/dist/index.js

@@ -66,9 +66,10 @@ export { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
 export { CardV2, CARDV2_SIZE, CARDV2_LAYOUT, } from './components/composites/CardV2';
 export { SnackBar } from './components/composites/SnackBar';
 export { NavMenu } from './components/composites/NavMenu';
-export { NavMenuV2 } from './components/composites/NavMenu2';
+export { NavMenuV2 } from './components/composites/NavMenuV2';
 export { EmptyState, EMPTY_STATE_SIZE, } from './components/composites/EmptyState';
 export { DropdownLinks } from './components/composites/DropdownLinks';
+export { DropdownLinksV2 } from './components/composites/DropdownLinksV2';
 export { Modal } from './components/composites/Modal';
 export { ModalV2 } from './components/composites/ModalV2';
 export { DragDropList, DragHandle } from './components/composites/DragDropList';

package/package.json

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

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

@@ -1,5 +0,0 @@
-import React from 'react';
-import { StyledElementPropsV2 } from '../../../theme';
-type NavMenu2Props = StyledElementPropsV2<HTMLDivElement>;
-export declare const NavMenuV2: React.FC<NavMenu2Props>;
-export {};