@ndlib/component-library 0.0.92 → 0.0.93

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.92",
+  "version": "0.0.93",
   "type": "module",
   "sideEffects": false,
   "files": [