@dnb/eufemia/cjs/components/list/ListDocs.js

DNB Eufemia Design System UI Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ScrollViewProperties = exports.ItemTitleProperties = exports.ItemSublineProperties = exports.ItemStartProperties = exports.ItemOverlineProperties = exports.ItemFooterProperties = exports.ItemEndProperties = exports.ItemContentProperties = exports.ItemCenterProperties = exports.ItemActionProperties = exports.ItemActionEvents = exports.ItemAccordionProperties = exports.ItemAccordionHeaderProperties = exports.ItemAccordionEvents = exports.ItemAccordionContentProperties = exports.ContainerProperties = exports.CardProperties = void 0;
const ContainerProperties = exports.ContainerProperties = {
  separated: {
    doc: 'When `true`, adds row gap between items so each row keeps its own outline and border radius instead of running edge-to-edge.',
    type: 'boolean',
    status: 'optional'
  },
  skeleton: {
    doc: 'When `true`, applies skeleton font styling to all child items. Individual items can override this with their own `skeleton` prop.',
    type: 'boolean',
    status: 'optional'
  },
  disabled: {
    doc: 'When `true`, all child items are visually dimmed and interaction is prevented. Individual items can override this with their own `disabled` prop.',
    type: 'boolean',
    status: 'optional'
  },
  children: {
    doc: 'List items. Use `List.Item.Basic`, `List.Item.Action`, or `List.Item.Accordion` as direct children.',
    type: 'React.ReactNode',
    status: 'required'
  },
  '[Space](/uilib/layout/space/properties)': {
    doc: 'Spacing properties like `top` or `bottom` are supported.',
    type: ['string', 'object'],
    status: 'optional'
  }
};
const ItemContentProperties = exports.ItemContentProperties = {
  selected: {
    doc: 'When provided, the row is treated as a selectable item for nested checkbox/radio controls. When `true`, it also applies the selected state styling (e.g. background).',
    type: 'boolean',
    status: 'optional'
  },
  pending: {
    doc: 'If set to `true`, an overlaying skeleton with animation will be shown (loading state). Disables pointer events on the item.',
    type: 'boolean',
    status: 'optional'
  },
  disabled: {
    doc: 'If set to `true`, the item is visually dimmed and interaction is prevented. Sets `aria-disabled`, removes tabbing, and disables click/keyboard handlers.',
    type: 'boolean',
    status: 'optional'
  },
  skeleton: {
    doc: 'If set to `true`, applies skeleton font styling to the item (text placeholder animation). Use for loading state without the full overlay from `pending`.',
    type: 'boolean',
    status: 'optional'
  },
  icon: {
    doc: 'Optional icon (e.g. `fish_medium` or an icon element). Rendered at the start of the row.',
    type: 'IconIcon',
    status: 'optional'
  },
  title: {
    doc: 'Optional title. Rendered after the icon when provided.',
    type: 'React.ReactNode',
    status: 'optional'
  },
  children: {
    doc: 'Item content. Typically `List.Cell.Start`, `List.Cell.Center`, `List.Cell.End`, `List.Cell.Title` (use `List.Cell.Title.Overline`/`List.Cell.Title.Subline` for overline/subline text), or the drop-in `List.Cell.Title.Overline`/`List.Cell.Title.Subline` components, or `List.Cell.Footer`.',
    type: 'React.ReactNode',
    status: 'required'
  },
  '[Space](/uilib/layout/space/properties)': {
    doc: 'Spacing properties like `top` or `bottom` are supported.',
    type: ['string', 'object'],
    status: 'optional'
  }
};
const ItemCenterProperties = exports.ItemCenterProperties = {
  fontSize: {
    doc: 'Font size of the center content. Defaults to `basis`. Use `small` for smaller text.',
    type: ["'small'", "'basis'"],
    defaultValue: "'basis'",
    status: 'optional'
  },
  fontWeight: {
    doc: 'Font weight of the center content. Defaults to `regular`.',
    type: ["'regular'", "'medium'"],
    defaultValue: "'regular'",
    status: 'optional'
  },
  children: {
    doc: 'Center content of the list item. Grows to fill available space.',
    type: 'React.ReactNode',
    status: 'required'
  },
  '[Space](/uilib/layout/space/properties)': {
    doc: 'Spacing properties like `top` or `bottom` are supported.',
    type: ['string', 'object'],
    status: 'optional'
  }
};
const ItemTitleProperties = exports.ItemTitleProperties = {
  fontSize: {
    doc: 'Font size of the title content. Defaults to `basis`. Use `small` for smaller text.',
    type: ["'small'", "'basis'"],
    defaultValue: "'basis'",
    status: 'optional'
  },
  children: {
    doc: 'Title content of the list item. Equivalent to using the `title` prop on `List.Item.Basic` or `List.Item.Action`. You can nest `List.Cell.Title.Overline`/`List.Cell.Title.Subline` inside the component for the overline/subline text.',
    type: 'React.ReactNode',
    status: 'required'
  },
  '[Space](/uilib/layout/space/properties)': {
    doc: 'Spacing properties like `top` or `bottom` are supported.',
    type: ['string', 'object'],
    status: 'optional'
  }
};
const ItemOverlineProperties = exports.ItemOverlineProperties = {
  fontSize: {
    doc: 'Font size of the overline content. Defaults to `x-small`.',
    type: ["'basis'", "'small'", "'x-small'"],
    defaultValue: "'x-small'",
    status: 'optional'
  },
  fontWeight: {
    doc: 'Font weight of the overline content. Defaults to `medium`.',
    type: ["'regular'", "'medium'"],
    defaultValue: "'medium'",
    status: 'optional'
  },
  children: {
    doc: 'Overline content of the list item, shown above the main title row. Use via `List.Cell.Title.Overline` when nesting inside the title block (or drop-in as `List.Cell.Title.Overline`). Pairs with `List.Cell.Title.Subline` inside the block.',
    type: 'React.ReactNode',
    status: 'required'
  },
  '[Space](/uilib/layout/space/properties)': {
    doc: 'Spacing properties like `top` or `bottom` are supported.',
    type: ['string', 'object'],
    status: 'optional'
  }
};
const ItemSublineProperties = exports.ItemSublineProperties = {
  variant: {
    doc: 'Visual variant. Use `description` for smaller, muted text style.',
    type: ["'description'"],
    status: 'optional'
  },
  fontSize: {
    doc: 'Font size of the subline content. Defaults to `small`. When `variant="description"`, defaults to `x-small`.',
    type: ["'basis'", "'small'", "'x-small'"],
    defaultValue: "'small'",
    status: 'optional'
  },
  fontWeight: {
    doc: 'Font weight of the subline content. Defaults to `regular`.',
    type: ["'regular'", "'medium'"],
    defaultValue: "'regular'",
    status: 'optional'
  },
  children: {
    doc: 'Subline content of the list item, shown below the title. Use via `List.Cell.Title.Subline` when nesting inside the title block (or as standalone `List.Cell.Title.Subline`). Pairs with List.Cell.Title.Overline or `List.Cell.Title.Overline`.',
    type: 'React.ReactNode',
    status: 'required'
  },
  '[Space](/uilib/layout/space/properties)': {
    doc: 'Spacing properties like `top` or `bottom` are supported.',
    type: ['string', 'object'],
    status: 'optional'
  }
};
const ItemFooterProperties = exports.ItemFooterProperties = {
  children: {
    doc: 'Footer content of the list item. Grows to fill available space.',
    type: 'React.ReactNode',
    status: 'required'
  },
  '[Space](/uilib/layout/space/properties)': {
    doc: 'Spacing properties like `top` or `bottom` are supported.',
    type: ['string', 'object'],
    status: 'optional'
  }
};
const ItemEndProperties = exports.ItemEndProperties = {
  fontWeight: {
    doc: 'Font weight of the end content. Defaults to `medium`.',
    type: ["'regular'", "'medium'"],
    defaultValue: "'medium'",
    status: 'optional'
  },
  fontSize: {
    doc: 'Font size of the end content. Defaults to `basis`. Use `small` for smaller text.',
    type: ["'small'", "'basis'"],
    defaultValue: "'basis'",
    status: 'optional'
  },
  children: {
    doc: 'End content of the list item (e.g. value, action).',
    type: 'React.ReactNode',
    status: 'required'
  },
  '[Space](/uilib/layout/space/properties)': {
    doc: 'Spacing properties like `top` or `bottom` are supported.',
    type: ['string', 'object'],
    status: 'optional'
  }
};
const ItemStartProperties = exports.ItemStartProperties = {
  fontSize: {
    doc: 'Font size of the start content. Defaults to `basis`. Use `small` for smaller text.',
    type: ["'small'", "'basis'"],
    defaultValue: "'basis'",
    status: 'optional'
  },
  fontWeight: {
    doc: 'Font weight of the start content. Defaults to `regular`.',
    type: ["'regular'", "'medium'"],
    defaultValue: "'regular'",
    status: 'optional'
  },
  children: {
    doc: 'Start content of the list item (e.g. icon, label).',
    type: 'React.ReactNode',
    status: 'required'
  },
  '[Space](/uilib/layout/space/properties)': {
    doc: 'Spacing properties like `top` or `bottom` are supported.',
    type: ['string', 'object'],
    status: 'optional'
  }
};
const ItemAccordionProperties = exports.ItemAccordionProperties = {
  icon: {
    doc: 'Optional icon for the accordion header (e.g. `fish_medium`).',
    type: 'IconIcon',
    status: 'optional'
  },
  title: {
    doc: 'Optional title for the accordion header.',
    type: 'React.ReactNode',
    status: 'optional'
  },
  chevronPosition: {
    doc: 'Placement of the chevron icon. Defaults to `right`. Use `left` to show the chevron on the left side.',
    type: ["'left'", "'right'"],
    defaultValue: "'right'",
    status: 'optional'
  },
  open: {
    doc: 'Initial open state. Defaults to `false`. The accordion can be toggled by the user via the header.',
    type: 'boolean',
    defaultValue: 'false',
    status: 'optional'
  },
  keepInDOM: {
    doc: 'When `true`, keeps the accordion content in the DOM when closed. Defaults to `false`.',
    type: 'boolean',
    defaultValue: 'false',
    status: 'optional'
  },
  disabled: {
    doc: 'If set to `true`, the accordion is visually dimmed and interaction is prevented. Sets `aria-disabled`, removes tabbing, and disables click/keyboard handlers.',
    type: 'boolean',
    defaultValue: 'false',
    status: 'optional'
  },
  onChange: {
    doc: 'Called when the accordion open state changes. Receives an object with the `expanded` state.',
    type: '({ expanded }) => void',
    status: 'optional'
  },
  children: {
    doc: 'Header cells (e.g. `List.Cell.Start`, `List.Cell.Title`/`List.Cell.Title.Overline`, `List.Cell.End`) and optionally `List.Item.Accordion.Content` for the expandable section.',
    type: 'React.ReactNode',
    status: 'required'
  },
  '[List.Item.Basic](/uilib/components/list/properties/#listitembasic)': {
    doc: 'Inherits List.Item.Basic properties (variant, pending, spacing, etc.).',
    type: 'Various',
    status: 'optional'
  }
};
const ItemAccordionHeaderProperties = exports.ItemAccordionHeaderProperties = {
  children: {
    doc: 'Header cells (e.g. `List.Cell.Start`, `List.Cell.Title.Overline`, `List.Cell.End`). The chevron, icon, and title from the parent accordion are rendered automatically.',
    type: 'React.ReactNode',
    status: 'optional'
  },
  '[Flex.Item](/uilib/layout/flex/item/properties)': {
    doc: 'Renders as a `Flex.Item`. Supports all `Flex.Item` properties.',
    type: 'Various',
    status: 'optional'
  },
  '[Space](/uilib/layout/space/properties)': {
    doc: 'Spacing properties like `top` or `bottom` are supported.',
    type: ['string', 'object'],
    status: 'optional'
  }
};
const ItemAccordionContentProperties = exports.ItemAccordionContentProperties = {
  children: {
    doc: 'Content displayed inside the expandable accordion body.',
    type: 'React.ReactNode',
    status: 'required'
  },
  '[Space](/uilib/layout/space/properties)': {
    doc: 'Spacing properties like `top` or `bottom` are supported.',
    type: ['string', 'object'],
    status: 'optional'
  }
};
const ItemActionProperties = exports.ItemActionProperties = {
  title: {
    doc: 'Optional title for the action item.',
    type: 'React.ReactNode',
    status: 'optional'
  },
  icon: {
    doc: 'Optional icon for the action item (e.g. `fish_medium`).',
    type: 'IconIcon',
    status: 'optional'
  },
  href: {
    doc: 'When set, renders as a native link (`<a>`) so the item navigates to the URL. Use for external or internal navigation. When not set, the item behaves as a button (use `onClick` for custom handling).',
    type: 'string',
    status: 'optional'
  },
  to: {
    doc: 'Use this prop only if you are using a router Link component as the `element` that uses the `to` property to declare the navigation url.',
    type: 'string',
    status: 'optional'
  },
  element: {
    doc: 'Define what HTML or React element should be used for the link (e.g. `element={Link}` for React Router). Only applicable when `href` or `to` is set.',
    type: 'React.Element',
    status: 'optional'
  },
  elementProps: {
    doc: 'Additional props forwarded to the `element` component (e.g. `{ replace: true, state: { from: "list" } }` for React Router Link).',
    type: 'object',
    status: 'optional'
  },
  target: {
    doc: 'Link target (e.g. `_blank` for new tab). Only applicable when `href` is set.',
    type: 'string',
    status: 'optional'
  },
  rel: {
    doc: 'Link rel (e.g. `noopener noreferrer` for external links). Only applicable when `href` is set.',
    type: 'string',
    status: 'optional'
  },
  onClick: {
    doc: 'Called when the user clicks or activates the item (Enter/Space key). Receives the native mouse event.',
    type: '(event) => void',
    status: 'optional'
  },
  chevronPosition: {
    doc: 'Placement of the chevron icon. Defaults to `right`. Use `left` to show the chevron on the left side.',
    type: ["'left'", "'right'"],
    defaultValue: "'right'",
    status: 'optional'
  },
  pending: {
    doc: 'If set to `true`, an overlaying skeleton with animation will be shown (loading state). Disables click and keyboard while active.',
    type: 'boolean',
    status: 'optional'
  },
  disabled: {
    doc: 'If set to `true`, the item is visually dimmed and interaction is prevented. Sets `aria-disabled`, removes tabbing, and disables click/keyboard handlers.',
    type: 'boolean',
    status: 'optional'
  },
  skeleton: {
    doc: 'If set to `true`, applies skeleton font styling to the item (text placeholder).',
    type: 'boolean',
    status: 'optional'
  },
  children: {
    doc: 'Additional cells (e.g. `List.Cell.End` for value). A chevron icon is rendered at the end automatically.',
    type: 'React.ReactNode',
    status: 'optional'
  },
  '[List.Item.Basic](/uilib/components/list/properties/#listitembasic)': {
    doc: 'Inherits List.Item.Basic properties (variant, selected, spacing, etc.).',
    type: 'Various',
    status: 'optional'
  },
  '[Space](/uilib/layout/space/properties)': {
    doc: 'Spacing properties like `top` or `bottom` are supported.',
    type: ['string', 'object'],
    status: 'optional'
  }
};
const ItemActionEvents = exports.ItemActionEvents = {
  onClick: {
    doc: 'Fired when the user clicks or activates `List.Item.Action` (click or Enter/Space key). Receives the native event. Only applicable to `List.Item.Action`.',
    type: '(event) => void',
    status: 'optional'
  }
};
const ItemAccordionEvents = exports.ItemAccordionEvents = {
  onClick: {
    doc: 'Fired when the user clicks or activates the accordion header (click or Enter/Space key). In controlled mode (when `open` is provided), use this to update the `open` prop. Receives the native event.',
    type: '(event) => void',
    status: 'optional'
  }
};
const CardProperties = exports.CardProperties = {
  children: {
    doc: 'Card content. Typically a `List.Container` (optionally wrapped in `List.ScrollView`). The card provides a visual container with border-radius resets and scrollbar integration for the list inside it.',
    type: 'React.ReactNode',
    status: 'required'
  },
  responsive: {
    doc: 'When `true`, the card adjusts its layout for smaller screens. Defaults to `true`.',
    type: 'boolean',
    defaultValue: 'true',
    status: 'optional'
  },
  '[Card](/uilib/components/card/properties)': {
    doc: 'All [Card](/uilib/components/card) properties are supported. The card renders with `stack` layout by default.',
    type: 'Various',
    status: 'optional'
  },
  '[Space](/uilib/layout/space/properties)': {
    doc: 'Spacing properties like `top` or `bottom` are supported.',
    type: ['string', 'object'],
    status: 'optional'
  }
};
const ScrollViewProperties = exports.ScrollViewProperties = {
  children: {
    doc: 'Scrollable content. Typically a `List.Container` with list items.',
    type: 'React.ReactNode',
    status: 'required'
  },
  maxVisibleListItems: {
    doc: 'Sets the maximum visible list items before the content scrolls. The component measures the rendered height of the first visible items. An explicit `style.maxHeight` overrides this.',
    type: 'number',
    status: 'optional'
  },
  skeleton: {
    doc: 'When `true`, applies skeleton font styling to all child items inside the scroll view. Propagated via context so nested `List.Container` and items inherit it.',
    type: 'boolean',
    status: 'optional'
  },
  disabled: {
    doc: 'When `true`, dims all child items and prevents interaction. Propagated via context so nested `List.Container` and items inherit it.',
    type: 'boolean',
    status: 'optional'
  },
  '[Space](/uilib/layout/space/properties)': {
    doc: 'Spacing properties like `top` or `bottom` are supported.',
    type: ['string', 'object'],
    status: 'optional'
  }
};
//# sourceMappingURL=ListDocs.js.map