diff --git a/packages/orbit-components/src/Itinerary/Itinerary.stories.tsx b/packages/orbit-components/src/Itinerary/Itinerary.stories.tsx
index aff031c312..fec205eff6 100644
--- a/packages/orbit-components/src/Itinerary/Itinerary.stories.tsx
+++ b/packages/orbit-components/src/Itinerary/Itinerary.stories.tsx
@@ -168,7 +168,11 @@ export const Segment = () => {
return (
-
+
{
export const Detail = () => {
return (
-
+
} content={content} />
);
diff --git a/packages/orbit-components/src/Itinerary/ItinerarySegment/ItinerarySegmentDetail/index.tsx b/packages/orbit-components/src/Itinerary/ItinerarySegment/ItinerarySegmentDetail/index.tsx
index ca3634400b..57be5a6674 100644
--- a/packages/orbit-components/src/Itinerary/ItinerarySegment/ItinerarySegmentDetail/index.tsx
+++ b/packages/orbit-components/src/Itinerary/ItinerarySegment/ItinerarySegmentDetail/index.tsx
@@ -87,7 +87,7 @@ const ItinerarySegmentDetail = ({
ref={slideRef}
tabIndex={-1}
role="button"
- onClick={toggleOpened}
+ onClick={ev => toggleOpened(ev)}
onKeyDown={ev => {
ev.stopPropagation();
}}
diff --git a/packages/orbit-components/src/Itinerary/ItinerarySegment/context.tsx b/packages/orbit-components/src/Itinerary/ItinerarySegment/context.tsx
index f7f9fd6dd6..9320b9c199 100644
--- a/packages/orbit-components/src/Itinerary/ItinerarySegment/context.tsx
+++ b/packages/orbit-components/src/Itinerary/ItinerarySegment/context.tsx
@@ -8,7 +8,7 @@ interface Context {
isBanner: boolean;
index: number;
opened: boolean;
- toggleOpened: () => void;
+ toggleOpened: (ev: React.SyntheticEvent) => void;
last: boolean;
count: number;
}
diff --git a/packages/orbit-components/src/Itinerary/ItinerarySegment/index.tsx b/packages/orbit-components/src/Itinerary/ItinerarySegment/index.tsx
index 8bf9b05750..c9b0fd965e 100644
--- a/packages/orbit-components/src/Itinerary/ItinerarySegment/index.tsx
+++ b/packages/orbit-components/src/Itinerary/ItinerarySegment/index.tsx
@@ -15,8 +15,10 @@ const ItinerarySegment = ({
dataTest,
noElevation,
actionable = true,
- onClick,
banner,
+ onClick,
+ onExpand,
+ onCollapse,
}: Props) => {
const content = React.Children.toArray(children) as React.ReactElement[];
@@ -25,6 +27,9 @@ const ItinerarySegment = ({
const handleClick = (ev: React.SyntheticEvent) => {
ev.stopPropagation();
if (onClick) onClick(ev);
+ if (!opened && onExpand) onExpand(ev);
+ if (opened && onCollapse) onCollapse(ev);
+
setOpened(prev => !prev);
};
@@ -43,8 +48,8 @@ const ItinerarySegment = ({
{
- if (document && document.getSelection()?.type !== "Range") setOpened(prev => !prev);
+ toggleOpened={ev => {
+ if (document && document.getSelection()?.type !== "Range") handleClick(ev);
}}
last={i === content.length - 1}
isNextHidden={Boolean(content[i + 1]?.props?.hidden)}
diff --git a/packages/orbit-components/src/Itinerary/ItinerarySegment/types.d.ts b/packages/orbit-components/src/Itinerary/ItinerarySegment/types.d.ts
index a81ecc4504..04b6853797 100644
--- a/packages/orbit-components/src/Itinerary/ItinerarySegment/types.d.ts
+++ b/packages/orbit-components/src/Itinerary/ItinerarySegment/types.d.ts
@@ -23,4 +23,8 @@ export interface Props extends Common.Globals, Common.SpaceAfter {
readonly actionable?: boolean;
/** Additional information to ItinerarySegment */
readonly banner?: React.ReactNode;
+ /** onExpand callback that is triggered when Segment is expanded */
+ readonly onExpand?: Common.Event>;
+ /** onCollapse callback that is triggered when Segment is collapsed */
+ readonly onCollapse?: Common.Event>;
}
diff --git a/packages/orbit-components/src/Itinerary/README.md b/packages/orbit-components/src/Itinerary/README.md
index 08d06881f5..562a51bb74 100644
--- a/packages/orbit-components/src/Itinerary/README.md
+++ b/packages/orbit-components/src/Itinerary/README.md
@@ -62,16 +62,19 @@ The ItinerarySegment component serves as a wrapper of atomic unit `ItinerarySegm
## Props
-| Name | Type | Required | Default | Description |
-| ----------- | ----------------- | ------------------ | ------- | ------------------------------------------------------ |
-| label | `React.ReactNode` | | | Status message of ItinerarySegment |
-| children | `React.ReactNode` | :heavy_check_mark: | | The content of ItinerarySegment |
-| dataTest | `string` | | | Optional prop for testing purposes. |
-| id | `string` | | | Set `id` for `Itinerary` |
-| noElevation | `boolean` | | | Turn off elevation (box-shadow) for a segment. |
-| spaceAfter | `enum` | | | Additional `margin-bottom` after component. |
-| actionable | `boolean` | | `true` | Applies actionable styles for ItinerarySegment wrapper |
-| banner | `React.Node` | | | Additional information for `ItinerarySegment` |
+| Name | Type | Required | Default | Description |
+| ----------- | -------------------------- | ------------------ | ------- | -------------------------------------------------------------- |
+| label | `React.ReactNode` | | | Status message of ItinerarySegment |
+| children | `React.ReactNode` | :heavy_check_mark: | | The content of ItinerarySegment |
+| dataTest | `string` | | | Optional prop for testing purposes. |
+| id | `string` | | | Set `id` for `Itinerary` |
+| noElevation | `boolean` | | | Turn off elevation (box-shadow) for a segment. |
+| spaceAfter | `enum` | | | Additional `margin-bottom` after component. |
+| actionable | `boolean` | | `true` | Applies actionable styles for ItinerarySegment wrapper |
+| banner | `React.Node` | | | Additional information for `ItinerarySegment` |
+| onClick | `event => void \| Promise` | | | Function for handling `onClick` event. |
+| onExpand | `event => void \| Promise` | | | Function to be triggered when `ItinerarySegment` is expanded. |
+| onCollapse | `event => void \| Promise` | | | Function to be triggered when `ItinerarySegment` is collapsed. |
### enum