@highlight-ui/dropdown-menu - npm Package Compare versions

Comparing version 3.1.49 to 3.1.50

package.json

 {
   "name": "@highlight-ui/dropdown-menu",
-  "version": "3.1.49",
+  "version": "3.1.50",
   "author": "Personio GmbH & Co. KG",
@@ -29,3 +29,3 @@ "main": "dist/cjs/index.js",
   "devDependencies": {
-    "@highlight-ui/button": "^12.0.3",
+    "@highlight-ui/button": "^12.0.4",
     "@highlight-ui/configs-base-jest": "^3.1.2",
@@ -49,3 +49,3 @@ "@highlight-ui/configs-base-tsconfig": "^3.2.1",
   "dependencies": {
-    "@highlight-ui/typography": "^6.0.0",
+    "@highlight-ui/typography": "^6.0.1",
     "@highlight-ui/utils-commons": "^2.3.8",
@@ -58,3 +58,3 @@ "lodash": "~4.17.21"
   },
-  "gitHead": "b0972f9137921b9b1788b2204a0158afe0555bbd"
+  "gitHead": "e350b6a3203165c887f553b3f2bb0b286f392dbf"
 }

README.md

@@ -1,18 +0,25 @@
-# `@highlight-ui/dropdown-menu`
+[![npm](https://img.shields.io/npm/v/@highlight-ui/dropdown-menu)](https://www.npmjs.com/package/@highlight-ui/dropdown-menu)
+[![personio.design](https://img.shields.io/static/v1?label=Personio&message=zeroheight&color=yellow)](https://www.personio.design/40d648a47/v/0/p/84a8e8-dropdown-menu/b/118c63)
+[![storybook.personio.design](https://img.shields.io/static/v1?label=Personio&message=storybook&color=red)](https://storybook.personio.design/?path=/story/feedback-circularprogress--default)
 
+# @highlight-ui/dropdown-menu
+
 ## Installation
 
+Using npm:
+
+```bash
+npm install @highlight-ui/dropdown-menu
 ```
+
+Using yarn:
+
+```bash
 yarn add @highlight-ui/dropdown-menu
 ```
 
-## Usage
+Using pnpm:
 
-In your TypeScript file:
-
-```ts
-import { DropdownMenu, DropdownMenuProps,
-  DropdownMenuItem, DropdownMenuItemProps
-  DropdownMenuList, DropdownMenuListProps
-  DropdownMenuToggle, DropdownMenuToggleProps } from '@highlight-ui/dropdown-menu';
+```bash
+pnpm install @highlight-ui/dropdown-menu
 ```
@@ -26,4 +33,99 @@
 
-## Documentation
+Once the package is installed, you can import the library:
 
-Please visit [personio.design](https://www.personio.design/40d648a47/v/0/p/84a8e8--dropdown-menu)
+```ts
+import {
+  DropdownMenu,
+  DropdownMenuItem,
+  DropdownMenuList,
+  DropdownMenuToggle,
+} from '@highlight-ui/dropdown-menu';
+```
+
+## Usage
+
+```tsx
+import React from 'react';
+import {
+  DropdownMenu,
+  DropdownMenuToggle,
+  DropdownMenuList,
+  DropdownMenuItem,
+} from '@highlight-ui/dropdown-menu';
+import { Button } from '@highlight-ui/button';
+
+export default function DropdownMenuExample() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuToggle>
+        <Button buttonState={disabled ? 'disabled' : undefined}>
+          Toggle Me!
+        </Button>
+      </DropdownMenuToggle>
+      <DropdownMenuList direction={direction} title={title}>
+        <DropdownMenuItem
+          onClick={() => {
+            console.log('clicked!');
+          }}
+        >
+          Item label (as Button)
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          href="https://personio.com"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Item label (as Link)
+        </DropdownMenuItem>
+        <DropdownMenuItem disabled>Item label (disabled)</DropdownMenuItem>
+      </DropdownMenuList>
+    </DropdownMenu>
+  );
+}
+```
+
+## Props 📜
+
+### DropdownMenu
+
+| Prop                   | Type         | Required | Default | Description                                                                                                                      |
+| :--------------------- | :----------- | :------- | :------ | :------------------------------------------------------------------------------------------------------------------------------- |
+| `open`                 | `boolean`    | No       | `false` | Whether the dropdown is open or not                                                                                              |
+| `defaultValue`         | `boolean`    | No       | `false` | Default open value                                                                                                               |
+| `className`            | `string`     | No       |         | Allows providing a custom class name to the DIV element that surrounds the text                                                  |
+| `closeOnClickAnywhere` | `boolean`    | No       | `false` | Enables closing the dropdown menu when clicking inside                                                                           |
+| `disabled`             | `boolean`    | No       | `false` | Prevents the open state of the dropdown menu from changing (Only works when the `open` prop is _not_ being used)                 |
+| `onChange`             | `() => void` | No       |         | Callback triggered whenever the open state of the dropdown menu is changed (Only works when the `open` prop is _not_ being used) |
+| `onClose`              | `() => void` | No       |         | Callback triggered whenever the dropdown menu is closed (Only works when the `open` prop is _not_ being used)                    |
+| `onOpen`               | `() => void` | No       |         | Callback triggered whenever the dropdown menu is opened (Only works when the `open` prop is _not_ being used)                    |
+| `onRequestToChange`    | `() => void` | No       |         | Callback triggered when the open state of the dropdown menu is about to change (Only works when the `open` prop is in use)       |
+
+### DropdownMenuToggle
+
+| Prop        | Type         | Required | Default | Description                                                                |
+| :---------- | :----------- | :------- | :------ | :------------------------------------------------------------------------- |
+| `className` | `string`     | No       |         | Allows providing a custom class name to the toggle                         |
+| `disabled`  | `boolean`    | No       | `false` | Prevents the open state of the dropdown menu from changing                 |
+| `onToggle`  | `() => void` | No       |         | Callback triggered whenever the open state of the dropdown menu is changed |
+
+### DropdownMenuList
+
+| Prop                    | Type                                                               | Required | Default        | Description                                                                |
+| :---------------------- | :----------------------------------------------------------------- | :------- | :------------- | :------------------------------------------------------------------------- |
+| `open`                  | `boolean`                                                          | No       | `false`        | Whether the dropdown is open or not                                        |
+| `className`             | `string`                                                           | No       |                | Allows providing a custom class name to the list                           |
+| `containerWidth`        | `number`                                                           | No       | `0`            | The max width of the container                                             |
+| `direction`             | `'bottom-left', 'bottom-right', 'center', 'top-left', 'top-right'` | No       | `bottom-right` | The direction that the menu should open from - relative to the trigger     |
+| `onToggle`              | `() => void`                                                       | No       |                | Callback triggered whenever the open state of the dropdown menu is changed |
+| `preventToCloseOnClick` | `boolean`                                                          | No       | `false`        | Prevents the close on click                                                |
+| `title`                 | `string`                                                           | No       |                | Gives this dropdown a title                                                |
+
+### DropdownMenuItem
+
+> The DropdownMenuItem gets its props from the `a` and `button` types.
+
+## Contributing 🖌️
+
+Please visit [personio.design](https://www.personio.design/40d648a47/v/0/p/84a8e8-dropdown-menu/b/118c63) for usage guidelines and visual examples.
+
+If you're interested in contributing, please visit our [contribution page](https://www.personio.design/40d648a47/v/0/p/138faf-about-the-process).

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1379323

increased by0.48%

Number of lines in readme file

131

increased by351.72%

Dependency changes

• Updated@highlight-ui/typography@^6.0.1