@synerise/ds-ordered-list 1.1.38 → 1.1.40

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.40](https://github.com/Synerise/synerise-design/compare/@synerise/ds-ordered-list@1.1.39...@synerise/ds-ordered-list@1.1.40) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-ordered-list
+
+## [1.1.39](https://github.com/Synerise/synerise-design/compare/@synerise/ds-ordered-list@1.1.38...@synerise/ds-ordered-list@1.1.39) (2026-03-20)
+
+**Note:** Version bump only for package @synerise/ds-ordered-list
+
 ## [1.1.38](https://github.com/Synerise/synerise-design/compare/@synerise/ds-ordered-list@1.1.37...@synerise/ds-ordered-list@1.1.38) (2026-03-09)
 
 **Note:** Version bump only for package @synerise/ds-ordered-list

package/CLAUDE.md

@@ -0,0 +1,94 @@
+# OrderedList (`@synerise/ds-ordered-list`)
+> Recursive ordered list component supporting arbitrary nesting, custom index formatting, and optional prefixel/suffixel slots per item.
+
+## Package structure
+```
+src/
+  Ordered-list.tsx       — root component; renders <ol> with optional header label, maps data to Item
+  Ordered-list.types.ts  — OrderedListItem, OrderedListProps, ListProps (deprecated alias)
+  Ordered-list.styles.ts — styled <ol> (OrderedList) and header wrapper (ContentAbove)
+  index.ts               — public exports
+  Elements/
+    Item/
+      Item.tsx           — memoized list item; renders index, prefixel, label, suffixel, and recursive NestedList
+      Item.styles.ts     — ItemWrapper (<li>), IndexFormatterWrapper (<span>)
+  __specs__/
+    Ordered-list.spec.tsx — Jest tests (nested items, indexFormatter, prefix/suffix)
+```
+
+## Public exports
+```ts
+export { default } from './Ordered-list';          // default export: OrderedList component
+export type { OrderedListItem, OrderedListProps };  // named type exports
+```
+
+`ListProps` is exported from the types file but **not** re-exported from `index.ts`. It is marked `@deprecated` — use `OrderedListProps` instead.
+
+### `OrderedList` (default export)
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `data` | `OrderedListItem[]` | — (required) | Array of items to render |
+| `indexFormatter` | `(index: number) => ReactNode` | `undefined` | Custom renderer for the item index; falls back to the raw zero-based number |
+| `listStyle` | `string` | `undefined` | CSS `list-style-type` value applied to `<ol>` and all nested `<ol>` elements; defaults to `'none'` when omitted |
+| `text` | `ReactNode` | `undefined` | Optional label rendered above the list via `FormFieldLabel` |
+
+### `OrderedListItem`
+| Field | Type | Required | Description |
+|-------|------|----------|-------------|
+| `id` | `string` | yes | Used as React `key` |
+| `label` | `ReactNode` | yes | Item content |
+| `index` | `number` | yes | Passed to `indexFormatter`; **ignored** in the root component — the map index `i` is used instead |
+| `prefixel` | `ReactNode` | no | Rendered before the label |
+| `suffixel` | `ReactNode` | no | Rendered after the label |
+| `subMenu` | `OrderedListItem[]` | no | Child items; triggers a recursive `OrderedList` |
+| `subMenuProps` | `Omit<OrderedListProps, 'data'>` | no | Props forwarded to the nested `OrderedList` (overrides inherited `text`, `indexFormatter`, `listStyle`) |
+| `listStyle` | `string` | no | Per-item list style (forwarded to the nested list) |
+| `text` | `ReactNode` | no | Header label for the nested list |
+
+## Usage patterns
+```tsx
+import OrderedList from '@synerise/ds-ordered-list';
+import type { OrderedListItem } from '@synerise/ds-ordered-list';
+
+const items: OrderedListItem[] = [
+  { id: '1', index: 0, label: 'First item' },
+  { id: '2', index: 1, label: 'Second item' },
+  {
+    id: '3',
+    index: 2,
+    label: 'Parent item',
+    subMenu: [
+      { id: '4', index: 0, label: 'Child item' },
+    ],
+  },
+];
+
+// Basic usage with a decimal formatter
+<OrderedList
+  data={items}
+  text="List Header"
+  indexFormatter={(i) => `${i + 1}. `}
+/>
+
+// Without index display
+<OrderedList data={items} indexFormatter={() => ''} />
+
+// Native browser list counters via listStyle
+<OrderedList data={items} listStyle="decimal" />
+```
+
+## Styling
+- Styled-components only; no Less/CSS files at runtime.
+- `listStyle` maps directly to the CSS `list-style-type` property. When omitted, `list-style-type: none` is set at every level; custom index rendering via `indexFormatter` is then the only numbering mechanism.
+- Nested `<ol>` elements receive `margin-left: 10px` and `padding: 5px 0 5px 12px`.
+- `ContentAbove` wrapper has `margin-bottom: 8px; min-height: 18px`.
+
+## Key dependencies
+- `@synerise/ds-form-field` — `FormFieldLabel` used for the optional `text` header
+- `@synerise/ds-icon` — listed as a dependency in `package.json` but not imported in any source file (likely a transitive or leftover dependency)
+
+## Implementation notes
+- **Recursive rendering without circular imports:** `OrderedList` passes itself as a `NestedList` prop to `Item`, avoiding a direct circular import between the two files.
+- **`index` field on `OrderedListItem` is effectively unused at the root level** — the component uses the map iteration index `i` instead of `item.index`. The field is still passed through to nested levels via `subMenu` items.
+- `Item` is wrapped in `React.memo`.
+- Tests use Jest (not Vitest) — `jest.config.js` is present and the `test` script calls `jest` directly.

package/README.md

@@ -11,6 +11,8 @@ OrderedList UI Component
 npm i @synerise/ds-ordered-list
 or
 yarn add @synerise/ds-ordered-list
+or
+pnpm add @synerise/ds-ordered-list
 ```
 
 ## Usage
@@ -28,12 +30,25 @@ import OrderedList from '@synerise/ds-ordered-list'
 
 ## API
 
-| Property  | Description                  | Type              | Default |
-| --------- | ---------------------------- | ----------------- | ------- |
-| listStyle | style to pick unordered list | string            | -       |
-| index     | set number of ordered list   | number            | -       |
-| id        | name of the item             | string            | -       |
-| subMenu   | items list                   | OrderedListItem[] | -       |
-| label     | label contains text          | string            | -       |
-| suffixel  | place to set item            | React.ReactNode   | -       |
-| prefixel  | place to set item            | React.ReactNode   | -       |
+### OrderedList
+
+| Property       | Description                                                      | Type                            | Default |
+| -------------- | ---------------------------------------------------------------- | ------------------------------- | ------- |
+| data           | Array of items to render                                         | OrderedListItem[]               | -       |
+| indexFormatter | Custom renderer for the item index; falls back to the raw index  | (index: number) => ReactNode    | -       |
+| listStyle      | CSS list-style-type value; defaults to `none` when not provided  | string                          | -       |
+| text           | Optional label rendered above the list                           | React.ReactNode                 | -       |
+
+### OrderedListItem
+
+| Property     | Description                                              | Type                                | Default |
+| ------------ | -------------------------------------------------------- | ----------------------------------- | ------- |
+| id           | Unique item identifier (used as React key)               | string                              | -       |
+| index        | Index value passed to indexFormatter                     | number                              | -       |
+| label        | Item content                                             | React.ReactNode                     | -       |
+| prefixel     | Content rendered before the label                        | React.ReactNode                     | -       |
+| suffixel     | Content rendered after the label                         | React.ReactNode                     | -       |
+| subMenu      | Nested child items                                       | OrderedListItem[]                   | -       |
+| subMenuProps | Props forwarded to the nested OrderedList (except data)  | Omit\<OrderedListProps, 'data'\>    | -       |
+| listStyle    | CSS list-style-type for the nested list                  | string                              | -       |
+| text         | Header label for the nested list                         | React.ReactNode                     | -       |

package/dist/Elements/Item/Item.d.ts

@@ -1,5 +1,5 @@
-import React, { type ReactElement } from 'react';
-import { type OrderedListItem, type OrderedListProps } from '../../Ordered-list.types';
+import { default as React, ReactElement } from 'react';
+import { OrderedListItem, OrderedListProps } from '../../Ordered-list.types';
 declare const _default: React.MemoExoticComponent<({ label, suffixel, prefixel, subMenu, indexFormatter, index, listStyle, subMenuProps, text, NestedList, }: OrderedListItem & Pick<OrderedListProps, "indexFormatter"> & {
     NestedList?: (props: OrderedListProps) => ReactElement;
 }) => React.JSX.Element>;

package/dist/Elements/Item/Item.js

@@ -1,22 +1,29 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React from 'react';
-import * as S from './Item.styles';
-var Item = function Item(_ref) {
-  var label = _ref.label,
-    suffixel = _ref.suffixel,
-    prefixel = _ref.prefixel,
-    subMenu = _ref.subMenu,
-    indexFormatter = _ref.indexFormatter,
-    index = _ref.index,
-    listStyle = _ref.listStyle,
-    subMenuProps = _ref.subMenuProps,
-    text = _ref.text,
-    NestedList = _ref.NestedList;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.ItemWrapper, null, /*#__PURE__*/React.createElement(S.IndexFormatterWrapper, null, indexFormatter ? indexFormatter(index) : index), prefixel, label, suffixel), !!subMenu && (subMenu == null ? void 0 : subMenu.length) > 0 && NestedList && /*#__PURE__*/React.createElement(NestedList, _extends({
-    text: text,
-    indexFormatter: indexFormatter,
-    data: subMenu,
-    listStyle: listStyle
-  }, subMenuProps)));
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import React from "react";
+import { ItemWrapper, IndexFormatterWrapper } from "./Item.styles.js";
+const Item = ({
+  label,
+  suffixel,
+  prefixel,
+  subMenu,
+  indexFormatter,
+  index,
+  listStyle,
+  subMenuProps,
+  text,
+  NestedList
+}) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(ItemWrapper, { children: [
+      /* @__PURE__ */ jsx(IndexFormatterWrapper, { children: indexFormatter ? indexFormatter(index) : index }),
+      prefixel,
+      label,
+      suffixel
+    ] }),
+    !!subMenu && subMenu?.length > 0 && NestedList && /* @__PURE__ */ jsx(NestedList, { text, indexFormatter, data: subMenu, listStyle, ...subMenuProps })
+  ] });
+};
+const Item$1 = React.memo(Item);
+export {
+  Item$1 as default
 };
-export default /*#__PURE__*/React.memo(Item);

package/dist/Elements/Item/Item.styles.d.ts

@@ -1,2 +1,2 @@
-export declare const ItemWrapper: import("styled-components").StyledComponent<"li", any, {}, never>;
-export declare const IndexFormatterWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const ItemWrapper: import('styled-components').StyledComponent<"li", any, {}, never>;
+export declare const IndexFormatterWrapper: import('styled-components').StyledComponent<"span", any, {}, never>;

package/dist/Elements/Item/Item.styles.js

@@ -1,9 +1,13 @@
-import styled from 'styled-components';
-export var ItemWrapper = styled.li.withConfig({
+import styled from "styled-components";
+const ItemWrapper = /* @__PURE__ */ styled.li.withConfig({
   displayName: "Itemstyles__ItemWrapper",
   componentId: "sc-11469x5-0"
 })(["margin:5px 0 5px 0;display:list-item;justify-content:flex-start;align-items:center;"]);
-export var IndexFormatterWrapper = styled.span.withConfig({
+const IndexFormatterWrapper = /* @__PURE__ */ styled.span.withConfig({
   displayName: "Itemstyles__IndexFormatterWrapper",
   componentId: "sc-11469x5-1"
-})([""]);
+})([""]);
+export {
+  IndexFormatterWrapper,
+  ItemWrapper
+};

package/dist/Ordered-list.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type OrderedListProps } from './Ordered-list.types';
+import { default as React } from 'react';
+import { OrderedListProps } from './Ordered-list.types';
 declare const OrderedList: ({ data, indexFormatter, listStyle, text, }: OrderedListProps) => React.JSX.Element;
 export default OrderedList;

package/dist/Ordered-list.js

@@ -1,31 +1,31 @@
-var _excluded = ["index"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React from 'react';
-import { FormFieldLabel } from '@synerise/ds-form-field';
-import Item from './Elements/Item/Item';
-import * as S from './Ordered-list.styles';
-var _OrderedList = function OrderedList(_ref) {
-  var data = _ref.data,
-    indexFormatter = _ref.indexFormatter,
-    listStyle = _ref.listStyle,
-    text = _ref.text;
-  return /*#__PURE__*/React.createElement("div", null, text && /*#__PURE__*/React.createElement(S.ContentAbove, null, /*#__PURE__*/React.createElement(FormFieldLabel, {
-    label: text
-  })), /*#__PURE__*/React.createElement(S.OrderedList, {
-    listStyle: listStyle
-  }, data.map(function (_ref2, i) {
-    var index = _ref2.index,
-      item = _objectWithoutPropertiesLoose(_ref2, _excluded);
-    return /*#__PURE__*/React.createElement(Item, _extends({
-      listStyle: listStyle,
-      index: i,
-      key: String(item == null ? void 0 : item.id),
-      indexFormatter: indexFormatter
-    }, item, {
-      // pass the component to avoid circular dependencies
-      NestedList: _OrderedList
-    }));
-  })));
+import { jsxs, jsx } from "react/jsx-runtime";
+import { FormFieldLabel } from "@synerise/ds-form-field";
+import Item from "./Elements/Item/Item.js";
+import { ContentAbove, OrderedList as OrderedList$1 } from "./Ordered-list.styles.js";
+const OrderedList = ({
+  data,
+  indexFormatter,
+  listStyle,
+  text
+}) => {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    text && /* @__PURE__ */ jsx(ContentAbove, { children: /* @__PURE__ */ jsx(FormFieldLabel, { label: text }) }),
+    /* @__PURE__ */ jsx(OrderedList$1, { listStyle, children: data.map(({
+      index,
+      ...item
+    }, i) => /* @__PURE__ */ jsx(
+      Item,
+      {
+        listStyle,
+        index: i,
+        indexFormatter,
+        ...item,
+        NestedList: OrderedList
+      },
+      String(item?.id)
+    )) })
+  ] });
+};
+export {
+  OrderedList as default
 };
-export default _OrderedList;

package/dist/Ordered-list.styles.d.ts

@@ -1,4 +1,4 @@
-export declare const OrderedList: import("styled-components").StyledComponent<"ol", any, {
+export declare const OrderedList: import('styled-components').StyledComponent<"ol", any, {
     listStyle?: string;
 }, never>;
-export declare const ContentAbove: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ContentAbove: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/Ordered-list.styles.js

@@ -1,15 +1,13 @@
-import styled from 'styled-components';
-export var OrderedList = styled.ol.withConfig({
+import styled from "styled-components";
+const OrderedList = /* @__PURE__ */ styled.ol.withConfig({
   displayName: "Ordered-liststyles__OrderedList",
   componentId: "sc-smxtrj-0"
-})(["display:flex;flex-direction:column;padding:0;list-style-type:", ";list-style-position:inside;ol{margin-left:10px;padding:5px 0 5px 12px;list-style-type:", ";}li{margin-right:4px;list-style-type:", ";}"], function (props) {
-  return props.listStyle ? props.listStyle : 'none';
-}, function (props) {
-  return props.listStyle ? props.listStyle : 'none';
-}, function (props) {
-  return props.listStyle ? props.listStyle : 'none';
-});
-export var ContentAbove = styled.div.withConfig({
+})(["display:flex;flex-direction:column;padding:0;list-style-type:", ";list-style-position:inside;ol{margin-left:10px;padding:5px 0 5px 12px;list-style-type:", ";}li{margin-right:4px;list-style-type:", ";}"], (props) => props.listStyle ? props.listStyle : "none", (props) => props.listStyle ? props.listStyle : "none", (props) => props.listStyle ? props.listStyle : "none");
+const ContentAbove = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Ordered-liststyles__ContentAbove",
   componentId: "sc-smxtrj-1"
-})(["margin-bottom:8px;min-height:18px;"]);
+})(["margin-bottom:8px;min-height:18px;"]);
+export {
+  ContentAbove,
+  OrderedList
+};

package/dist/Ordered-list.types.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { ReactNode } from 'react';
 export type OrderedListItem = {
     id: string;
     label: ReactNode;

package/dist/Ordered-list.types.js

@@ -1 +1 @@
-export {};
+

package/dist/index.js

@@ -1 +1,4 @@
-export { default } from './Ordered-list';
+import { default as default2 } from "./Ordered-list.js";
+export {
+  default2 as default
+};

package/dist/modules.d.js

@@ -1 +1 @@
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-ordered-list",
-  "version": "1.1.38",
+  "version": "1.1.40",
   "description": "OrderedList UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -9,10 +9,10 @@
     "access": "public"
   },
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:css && pnpm run defs",
+    "build": "vite build",
     "build:css": "node ../../../scripts/style/less.js",
     "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
-    "build:watch": "pnpm run build:js -- --watch",
+    "build:watch": "vite build --watch",
     "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
     "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
     "prepublish": "pnpm run build",
@@ -28,13 +28,13 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-form-field": "^1.3.8",
-    "@synerise/ds-icon": "^1.14.1"
+    "@synerise/ds-form-field": "^1.3.10",
+    "@synerise/ds-icon": "^1.15.1"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "8dfafc5d7278f09d430f1e7499782d05c76b47c0"
+  "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
 }

package/vite.config.ts

@@ -0,0 +1,6 @@
+import { lessCompilePlugin } from '../../../scripts/vite/less-plugin';
+import { createViteConfig } from '../../../vite.config.base';
+
+export default createViteConfig('@synerise/ds-ordered-list', {
+  plugins: [lessCompilePlugin()],
+});