📖 Create useIsOutOfBounds stories

packages/docs/stories/Dropdown.stories.tsx

@@ -397,29 +397,6 @@ export const OverlappingDropdown: Story = {
  },
 };
 
-export const OutOfBoundsAtBottom: Story = {
- args: {
- children: (
- <ul>
- <li>0px</li>
- <li>4px</li>
- <li>9px</li>
- <li>18px</li>
- <li>36px</li>
- <li>54px</li>
- <li>72px</li>
- <li>144px</li>
- <li>167px</li>
- <li>198px</li>
- </ul>
- ),
- className: 'out-of-bounds-example',
- isSearchable: true,
- name: 'outofboundsatbottom',
- placeholder: 'Show above',
- },
-};
-
 export const OutOfBoundsAtRight: Story = {
  args: {
  children: (

packages/docs/stories/useIsOutOfBounds.css

@@ -0,0 +1,36 @@
+.out-of-bounds-example.uktdropdown {
+ position: absolute;
+ bottom: 50px;
+}
+.out-of-bounds-example input {
+ width: 150px;
+}
+
+.out-of-bounds-example .uktdropdown-body {
+ width: 250px;
+}
+
+.position-right.uktdropdown {
+ position: absolute;
+ right: 70px;
+}
+
+.out-of-bounds-example.no-direction-change.uktdropdown {
+ position: relative;
+ margin-top: 100px;
+}
+
+.out-of-bounds-example.no-direction-change.uktdropdown .uktdropdown-body {
+ top: 100%;
+}
+
+#anchor--uikit-controls-dropdown--out-of-bounds-with-no-direction-change
+ .innerZoomElementWrapper
+ > * {
+ overflow: auto;
+ height: 200px;
+}
+
+#anchor--uikit-controls-dropdown--out-of-bounds-with-no-direction-change .sb-story {
+ height: 230px;
+}

packages/docs/stories/useIsOutOfBounds.stories.tsx

@@ -0,0 +1,157 @@
+import * as React from 'react';
+
+import Dropdown from '../../dropdown/src/Dropdown.js';
+
+import './Dropdown.css';
+import './useIsOutOfBounds.css';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Dropdown> = {
+ component: Dropdown,
+ parameters: {
+ docs: {
+ description: {
+ component:
+ `\`useIsOutOfBounds\` is a React hook that returns an object indicating if the
+current component is out of the bounds of its nearest ancestor that doesn’t have overflow: visible.
+The return value is
+\`
+type OutOfBounds = {
+ bottom: boolean;
+ hasLayout: boolean;
+ left: boolean;
+ maxHeight: null | number;
+ maxWidth: null | number;
+ right: boolean;
+ top: boolean;
+};
+\`
+It is used by in @acusti/dropdown to automatically position the dropdown in the direction
+where there is room for it to render, so this story uses \`<Dropdown>\` to illustrate that behavior.
+
+`,
+ },
+ },
+ },
+ //https://storybook.js.org/docs/react/writing-docs/autodocs#setup-automated-documentation
+ tags: ['autodocs'],
+ title: 'UIKit/Hooks/useIsOutOfBounds',
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Dropdown>;
+
+const list = (
+ <ul>
+ <li>Brunei Darussalam</li>
+ <li>Cambodia</li>
+ <li>Indonesia</li>
+ <li>Laos</li>
+ <li>Malaysia</li>
+ <li>Myanmar (Burma)</li>
+ <li>Philippines</li>
+ <li>Singapore</li>
+ <li>Thailand</li>
+ <li>Timor-Leste (East Timor)</li>
+ <li>Vietnam</li>
+ </ul>
+);
+
+export const NotOutOfBounds: Story = {
+ args: {
+ children: list,
+ className: 'not-out-of-bounds-example',
+ isSearchable: true,
+ name: 'notoutofbounds',
+ placeholder: 'Default behavior',
+ },
+};
+
+export const OutOfBoundsAtBottom: Story = {
+ args: {
+ children: list,
+ className: 'out-of-bounds-example',
+ isSearchable: true,
+ name: 'outofboundsatbottom',
+ placeholder: 'Show above',
+ },
+};
+
+export const OutOfBoundsAtRight: Story = {
+ args: {
+ children: list,
+ className: 'out-of-bounds-example position-right',
+ isSearchable: true,
+ name: 'outofboundsatright',
+ placeholder: 'Show above & to the left',
+ },
+};
+
+export const OutOfBoundsTopAndBottom: Story = {
+ args: {
+ children: (
+ <ul>
+ <li>Algeria</li>
+ <li>Angola</li>
+ <li>Benin</li>
+ <li>Botswana</li>
+ <li>Burkina Faso</li>
+ <li>Burundi</li>
+ <li>Cabo Verde</li>
+ <li>Cameroon</li>
+ <li>Central African Republic</li>
+ <li>Chad</li>
+ <li>Comoros</li>
+ <li>Congo, Democratic Republic of the</li>
+ <li>Congo, Republic of the</li>
+ <li>Cote d'Ivoire</li>
+ <li>Djibouti</li>
+ <li>Egypt</li>
+ <li>Equatorial Guinea</li>
+ <li>Eritrea</li>
+ <li>Eswatini</li>
+ <li>Ethiopia</li>
+ <li>Gabon</li>
+ <li>Gambia</li>
+ <li>Ghana</li>
+ <li>Guinea</li>
+ <li>Guinea-Bissau</li>
+ <li>Kenya</li>
+ <li>Lesotho</li>
+ <li>Liberia</li>
+ <li>Libya</li>
+ <li>Madagascar</li>
+ <li>Malawi</li>
+ <li>Mali</li>
+ <li>Mauritania</li>
+ <li>Mauritius</li>
+ <li>Morocco</li>
+ <li>Mozambique</li>
+ <li>Namibia</li>
+ <li>Niger</li>
+ <li>Nigeria</li>
+ <li>Rwanda</li>
+ <li>Sao Tome and Principe</li>
+ <li>Senegal</li>
+ <li>Seychelles</li>
+ <li>Sierra Leone</li>
+ <li>Somalia</li>
+ <li>South Africa</li>
+ <li>South Sudan</li>
+ <li>Sudan</li>
+ <li>Tanzania</li>
+ <li>Togo</li>
+ <li>Tunisia</li>
+ <li>Uganda</li>
+ <li>Zambia</li>
+ <li>Zimbabwe</li>
+ </ul>
+ ),
+ className: 'out-of-bounds-top-and-bottom-example',
+ isSearchable: true,
+ name: 'outofboundstopandbottom',
+ placeholder: 'long list',
+ },
+};