From ee21567ba25a1c01ec75128962697678999715ad Mon Sep 17 00:00:00 2001
From: Adi Mordo <adids1221@gmail.com>
Date: Sun, 19 Jan 2025 16:54:49 +0200
Subject: [PATCH 1/6] Feat/picker custom top element (#3465)

* Picker types - customTopElement, onItemSelection

* add customTopElement support in Picker component

* PickerScreen example

* refactor: rename customTopElement, types fix

* remove onItemSelection prop

* remove unused setValue from Picker context

* use optional chaining for renderCustomTopElement

* renderCustomTopElement added to api.json
---
 .../screens/componentScreens/PickerScreen.tsx | 46 ++++++++++++++++++-
 src/components/picker/PickerItemsList.tsx     |  4 +-
 src/components/picker/api/picker.api.json     |  5 ++
 src/components/picker/index.tsx               |  2 +
 src/components/picker/types.ts                |  5 ++
 5 files changed, 60 insertions(+), 2 deletions(-)

diff --git a/demo/src/screens/componentScreens/PickerScreen.tsx b/demo/src/screens/componentScreens/PickerScreen.tsx
index 4a2c20fa0d..fa7459bffa 100644
--- a/demo/src/screens/componentScreens/PickerScreen.tsx
+++ b/demo/src/screens/componentScreens/PickerScreen.tsx
@@ -83,6 +83,15 @@ const dialogOptions = [
   {label: 'Option 8', value: 6}
 ];
 
+const statusOptions = [
+  {label: 'Overview', value: 'overview'},
+  {label: 'In Progress', value: 'inProgress'},
+  {label: 'Completed', value: 'completed'},
+  {label: 'Pending Review', value: 'pendingReview'},
+  {label: 'Approved', value: 'approved'},
+  {label: 'Rejected', value: 'rejected'}
+];
+
 export default class PickerScreen extends Component {
   picker = React.createRef<PickerMethods>();
   state = {
@@ -96,6 +105,7 @@ export default class PickerScreen extends Component {
     dialogPickerValue: 'java',
     customModalValues: [],
     filter: undefined,
+    statOption: [],
     scheme: undefined,
     contact: 0
   };
@@ -122,6 +132,15 @@ export default class PickerScreen extends Component {
     );
   };
 
+  onTopElementPress = (allOptionsSelected: boolean) => {
+    if (allOptionsSelected) {
+      this.setState({statOption: []});
+    } else {
+      const allValues = statusOptions.map(option => option.value);
+      this.setState({statOption: allValues});
+    }
+  };
+
   render() {
     return (
       <ScrollView keyboardShouldPersistTaps="always">
@@ -195,7 +214,32 @@ export default class PickerScreen extends Component {
             searchPlaceholder={'Search a language'}
             items={dialogOptions}
           />
-          
+
+          <Text text70 $textDefault>
+            Custom Top Element:
+          </Text>
+          <Picker
+            placeholder="Status"
+            floatingPlaceholder
+            value={this.state.statOption}
+            onChange={items => this.setState({statOption: items})}
+            topBarProps={{title: 'Status'}}
+            mode={Picker.modes.MULTI}
+            items={statusOptions}
+            renderCustomTopElement={value => {
+              const allOptionsSelected = Array.isArray(value) && value.length === statusOptions.length;
+              return (
+                <View margin-s3>
+                  <Button
+                    label={allOptionsSelected ? 'Unselect All' : 'Select All'}
+                    onPress={() => this.onTopElementPress(allOptionsSelected)}
+                    size="small"
+                  />
+                </View>
+              );
+            }}
+          />
+
           <Text marginB-10 text70 $textDefault>
             Custom Picker:
           </Text>
diff --git a/src/components/picker/PickerItemsList.tsx b/src/components/picker/PickerItemsList.tsx
index d798445867..6597e6a10b 100644
--- a/src/components/picker/PickerItemsList.tsx
+++ b/src/components/picker/PickerItemsList.tsx
@@ -34,7 +34,8 @@ const PickerItemsList = (props: PickerItemsListProps) => {
     mode,
     testID,
     showLoader,
-    customLoaderElement
+    customLoaderElement,
+    renderCustomTopElement
   } = props;
   const context = useContext(PickerContext);
 
@@ -167,6 +168,7 @@ const PickerItemsList = (props: PickerItemsListProps) => {
     ) : (
       <>
         {renderSearchInput()}
+        {renderCustomTopElement?.(context.value)}
         {renderList()}
       </>
     );
diff --git a/src/components/picker/api/picker.api.json b/src/components/picker/api/picker.api.json
index 0cb3846c59..60994bd1fb 100644
--- a/src/components/picker/api/picker.api.json
+++ b/src/components/picker/api/picker.api.json
@@ -47,6 +47,11 @@
       "type": "(value, {{...props, isSelected}}, itemLabel) => void",
       "description": "Render custom picker item"
     },
+    {
+      "name": "renderCustomTopElement",
+      "type": "(value?: PickerValue) => React.ReactElement",
+      "description": "Render custom top element"
+    },
     {
       "name": "renderCustomModal",
       "type": "({visible, children, toggleModal}) => void)",
diff --git a/src/components/picker/index.tsx b/src/components/picker/index.tsx
index 183af08781..cec10a0b74 100644
--- a/src/components/picker/index.tsx
+++ b/src/components/picker/index.tsx
@@ -78,6 +78,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     items: propItems,
     showLoader,
     customLoaderElement,
+    renderCustomTopElement,
     ...others
   } = themeProps;
   const {preset, placeholder, style, trailingAccessory, label: propsLabel} = others;
@@ -245,6 +246,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
         useSafeArea={useSafeArea}
         showLoader={showLoader}
         customLoaderElement={customLoaderElement}
+        renderCustomTopElement={renderCustomTopElement}
       >
         {filteredItems}
       </PickerItemsList>
diff --git a/src/components/picker/types.ts b/src/components/picker/types.ts
index d768c450a5..a941527c2d 100644
--- a/src/components/picker/types.ts
+++ b/src/components/picker/types.ts
@@ -206,6 +206,10 @@ export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> &
       itemProps: PickerItemProps & {isSelected: boolean; isItemDisabled: boolean},
       label?: string
     ) => React.ReactElement;
+    /**
+     * Render custom top element
+     */
+    renderCustomTopElement?: (value?: PickerValue) => React.ReactElement;
     /**
      * Add onPress callback for when pressing the picker
      */
@@ -315,6 +319,7 @@ export type PickerItemsListProps = Pick<
   | 'useSafeArea'
   | 'showLoader'
   | 'customLoaderElement'
+  | 'renderCustomTopElement'
   | 'showSearch'
   | 'searchStyle'
   | 'searchPlaceholder'

From cb907f96129cd82c3e413e2315f49270c3c5350c Mon Sep 17 00:00:00 2001
From: Nitzan Yizhar <nitzany@wix.com>
Date: Wed, 22 Jan 2025 11:13:00 +0200
Subject: [PATCH 2/6] Update ButtonProps to use IconProps for iconProps type
 (#3483)

---
 src/components/button/types.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/button/types.ts b/src/components/button/types.ts
index 59a4402117..f39878a787 100644
--- a/src/components/button/types.ts
+++ b/src/components/button/types.ts
@@ -10,6 +10,7 @@ import {
 import {TouchableOpacityProps} from '../touchableOpacity';
 import {TextProps} from '../text';
 import {ImageProps} from '../image';
+import type {IconProps} from '../icon';
 
 export enum ButtonSize {
   xSmall = 'xSmall',
@@ -53,7 +54,7 @@ export type ButtonProps = TouchableOpacityProps &
     /**
      * Other image props that will be passed to the image
      */
-    iconProps?: Partial<ImageProps>;
+    iconProps?: Partial<IconProps>;
     /**
      * Should the icon be right to the label
      */

From 0dbfb3a51d8d47359f8c6f1afa13d9e63ed9d6ab Mon Sep 17 00:00:00 2001
From: Miki Leib <38354019+M-i-k-e-l@users.noreply.github.com>
Date: Wed, 22 Jan 2025 12:38:47 +0200
Subject: [PATCH 3/6] uilib-native - fix react version (#3487)

---
 lib/package.json | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/lib/package.json b/lib/package.json
index 6f025585ff..fb2dc85c75 100644
--- a/lib/package.json
+++ b/lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "uilib-native",
-  "version": "4.5.0",
+  "version": "4.5.1",
   "homepage": "https://github.com/wix/react-native-ui-lib",
   "description": "uilib native components (separated from js components)",
   "main": "components/index",
@@ -10,14 +10,14 @@
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
   "license": "MIT",
   "dependencies": {
-    "lodash": "^4.0.0",
+    "lodash": "^4.17.21",
     "prop-types": "^15.5.10"
   },
   "devDependencies": {
     "shell-utils": "^1.0.10"
   },
   "peerDependencies": {
-    "react": "^16.0.0",
-    "react-native": "^0.51.0"
+    "react": ">=17.0.1",
+    "react-native": ">=0.64.1"
   }
 }

From a50b5f17f10104ba05ab60986ea91dd6b97bb459 Mon Sep 17 00:00:00 2001
From: Miki Leib <38354019+M-i-k-e-l@users.noreply.github.com>
Date: Wed, 22 Jan 2025 14:07:17 +0200
Subject: [PATCH 4/6] Update uilib-native version to 4.5.1 (#3489)

---
 package.json |  2 +-
 yarn.lock    | 18 +++++++++---------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index efab2bd396..d89331e36c 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
     "react-native-redash": "^12.0.3",
     "semver": "^5.5.0",
     "tinycolor2": "^1.4.2",
-    "uilib-native": "^4.5.0",
+    "uilib-native": "4.5.1",
     "url-parse": "^1.2.0",
     "wix-react-native-text-size": "1.0.9"
   },
diff --git a/yarn.lock b/yarn.lock
index 48f9bf7dcf..c4c638549a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8412,7 +8412,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash@npm:4.17.x, lodash@npm:4.x.x, lodash@npm:^4, lodash@npm:^4.0.0, lodash@npm:^4.17.10, lodash@npm:^4.17.21":
+"lodash@npm:4.17.x, lodash@npm:4.x.x, lodash@npm:^4, lodash@npm:^4.17.10, lodash@npm:^4.17.21":
   version: 4.17.21
   resolution: "lodash@npm:4.17.21"
   checksum: eb835a2e51d381e561e508ce932ea50a8e5a68f4ebdd771ea240d3048244a8d13658acbd502cd4829768c56f2e16bdd4340b9ea141297d472517b83868e677f7
@@ -10367,7 +10367,7 @@ __metadata:
     shell-utils: ^1.0.10
     tinycolor2: ^1.4.2
     typescript: 5.0.4
-    uilib-native: ^4.5.0
+    uilib-native: 4.5.1
     url-parse: ^1.2.0
     wix-react-native-text-size: 1.0.9
   peerDependencies:
@@ -12038,16 +12038,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"uilib-native@npm:^4.5.0":
-  version: 4.5.0
-  resolution: "uilib-native@npm:4.5.0"
+"uilib-native@npm:4.5.1":
+  version: 4.5.1
+  resolution: "uilib-native@npm:4.5.1"
   dependencies:
-    lodash: ^4.0.0
+    lodash: ^4.17.21
     prop-types: ^15.5.10
   peerDependencies:
-    react: ^16.0.0
-    react-native: ^0.51.0
-  checksum: fcd4f6e08412608ce2cd3f64c2aa3e2e8c944ddce46d06f2effca2d05461966d56362887f9c629cb19b9779710ba0d7aef48f44ccd00c428c43093c4680b269c
+    react: ">=17.0.1"
+    react-native: ">=0.64.1"
+  checksum: 2a85fe8976f50003c7eeda7c752fa12f7b9af24089b07e86b2b93505eeb0e91d1f9268b8a9166091432b39a535b676efb0eaa0a0d01e8f7f6ae33d0f06b2cf37
   languageName: node
   linkType: hard
 

From 1ffc37290bafaaa56121f1a02e862e5b9f4e87cc Mon Sep 17 00:00:00 2001
From: Nitzan Yizhar <nitzany@wix.com>
Date: Wed, 22 Jan 2025 16:52:47 +0200
Subject: [PATCH 5/6] New component - PieChart (#3470)

* Added new component - PieChart

* Add null return for PieChart component when Svg or Path is not available
---
 demo/src/index.js                             |   3 +
 demo/src/screens/MenuStructure.js             |   6 +
 .../componentScreens/PieChartScreen.tsx       | 101 +++++++++++++++++
 demo/src/screens/componentScreens/index.js    |   1 +
 src/components/pieChart/PieChart.api.json     |  15 +++
 src/components/pieChart/PieSegment.tsx        | 106 ++++++++++++++++++
 src/components/pieChart/index.tsx             |  48 ++++++++
 src/index.ts                                  |   1 +
 8 files changed, 281 insertions(+)
 create mode 100644 demo/src/screens/componentScreens/PieChartScreen.tsx
 create mode 100644 src/components/pieChart/PieChart.api.json
 create mode 100644 src/components/pieChart/PieSegment.tsx
 create mode 100644 src/components/pieChart/index.tsx

diff --git a/demo/src/index.js b/demo/src/index.js
index ed47fc9fad..a90343bdc8 100644
--- a/demo/src/index.js
+++ b/demo/src/index.js
@@ -267,6 +267,9 @@ module.exports = {
       get Pinterest() {
         return require('./screens/realExamples/Pinterest').default;
       },
+      get PieChartScreen() {
+        return require('./screens/componentScreens/PieChartScreen.tsx').default;
+      },
       get ListActionsScreen() {
         return require('./screens/realExamples/ListActions/ListActionsScreen').default;
       },
diff --git a/demo/src/screens/MenuStructure.js b/demo/src/screens/MenuStructure.js
index 3b2bfbe003..c755c44436 100644
--- a/demo/src/screens/MenuStructure.js
+++ b/demo/src/screens/MenuStructure.js
@@ -104,6 +104,12 @@ export const navigationData = {
       {title: 'SortableGridList', tags: 'sort grid list drag', screen: 'unicorn.components.SortableGridListScreen'}
     ]
   },
+  Charts: {
+    title: 'Charts',
+    screens: [
+      {title: 'PieChart', tags: 'pie chart data', screen: 'unicorn.components.PieChartScreen'}
+    ]
+  },
   LayoutsAndTemplates: {
     title: 'Layouts & Templates',
     screens: [
diff --git a/demo/src/screens/componentScreens/PieChartScreen.tsx b/demo/src/screens/componentScreens/PieChartScreen.tsx
new file mode 100644
index 0000000000..f057536432
--- /dev/null
+++ b/demo/src/screens/componentScreens/PieChartScreen.tsx
@@ -0,0 +1,101 @@
+import React from 'react';
+import {ScrollView} from 'react-native';
+import {View, PieChart, Card, Text, Badge, PieChartSegmentProps, Colors} from 'react-native-ui-lib';
+
+const SEGMENTS: PieChartSegmentProps[] = [
+  {
+    percentage: 40,
+    color: Colors.blue30
+  },
+  {
+    percentage: 30,
+    color: Colors.red30
+  },
+  {
+    percentage: 20,
+    color: Colors.green30
+  },
+  {
+    percentage: 10,
+    color: Colors.purple30
+  }
+];
+
+const MONOCHROME_SEGMENTS: PieChartSegmentProps[] = [
+  {
+    percentage: 40,
+    color: Colors.blue70
+  },
+  {
+    percentage: 30,
+    color: Colors.blue50
+  },
+  {
+    percentage: 20,
+    color: Colors.blue30
+  },
+  {
+    percentage: 10,
+    color: Colors.blue10
+  }
+];
+
+const NOT_FULL_PIECHART: PieChartSegmentProps[] = [
+  {
+    percentage: 30,
+    color: Colors.blue30
+  },
+  {
+    percentage: 40,
+    color: Colors.red30
+  }
+];
+
+const PieChartScreen = () => {
+  const renderSegmentLabel = (segment: PieChartSegmentProps, text: string) => {
+    const {percentage, color} = segment;
+    return (
+      <View row gap-s1 marginB-s1 key={text}>
+        <Badge size={10} containerStyle={{justifyContent: 'center'}} backgroundColor={color}/>
+        <View>
+          <Text>{text}</Text>
+          <Text marginL-s1>{percentage}%</Text>
+        </View>
+      </View>
+    );
+  };
+
+  const renderPieChartCard = (segments: PieChartSegmentProps[]) => {
+    return (
+      <Card row spread paddingL-s2 paddingR-s10 paddingV-s2>
+        <View centerV>
+          <PieChart segments={segments} diameter={150}/>
+        </View>
+        <View height={'100%'} gap-s1>
+          {segments.map((segment, index) => renderSegmentLabel(segment, `Value ${index + 1}`))}
+        </View>
+      </Card>
+    );
+  };
+
+  return (
+    <ScrollView>
+      <View padding-page gap-s2>
+        <Text text50L marginB-s2>
+          PieChart
+        </Text>
+        {renderPieChartCard(SEGMENTS)}
+        <Text text50L marginV-s2>
+          Monochrome colors
+        </Text>
+        {renderPieChartCard(MONOCHROME_SEGMENTS)}
+        <Text text50L marginV-s2>
+          Not Full PieChart
+        </Text>
+        {renderPieChartCard(NOT_FULL_PIECHART)}
+      </View>
+    </ScrollView>
+  );
+};
+
+export default PieChartScreen;
diff --git a/demo/src/screens/componentScreens/index.js b/demo/src/screens/componentScreens/index.js
index 4805496025..3007fb4bfd 100644
--- a/demo/src/screens/componentScreens/index.js
+++ b/demo/src/screens/componentScreens/index.js
@@ -1,5 +1,6 @@
 export function registerScreens(registrar) {
   registrar('unicorn.components.ActionSheetScreen', () => require('./ActionSheetScreen').default);
+  registrar('unicorn.components.PieChartScreen', () => require('./PieChartScreen').default);
   registrar('unicorn.components.ActionBarScreen', () => require('./ActionBarScreen').default);
   registrar('unicorn.components.AvatarsScreen', () => require('./AvatarsScreen').default);
   registrar('unicorn.components.AnimatedImageScreen', () => require('./AnimatedImageScreen').default);
diff --git a/src/components/pieChart/PieChart.api.json b/src/components/pieChart/PieChart.api.json
new file mode 100644
index 0000000000..de940a3dfb
--- /dev/null
+++ b/src/components/pieChart/PieChart.api.json
@@ -0,0 +1,15 @@
+{
+  "name": "PieChart",
+  "category": "charts",
+  "description": "Pie Chart",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/PieChartScreen.tsx",
+  "props": [
+    {"name": "segments", "type": "PieChartSegmentProps[]", "description": "Pie chart segments array"},
+    {"name": "diameter", "type": "number", "description": "Pie chart diameter"},
+    {"name": "dividerWidth", "type": "number", "description": "The width of the divider between the segments"},
+    {"name": "dividerColor", "type": "ColorValue", "description": "The color of the divider between the segments"}
+  ],
+  "snippet": [
+    "<PieChart segments={[{percentage: 50, color: Colors.blue30}, {percentage: 30, color: Colors.red30}, {percentage: 20, color: Colors.green30}]} diameter={144}/>"
+  ]
+}
diff --git a/src/components/pieChart/PieSegment.tsx b/src/components/pieChart/PieSegment.tsx
new file mode 100644
index 0000000000..b6ee707228
--- /dev/null
+++ b/src/components/pieChart/PieSegment.tsx
@@ -0,0 +1,106 @@
+import React from 'react';
+import {ColorValue, StyleSheet} from 'react-native';
+import View from '../view';
+import {SvgPackage} from '../../optionalDependencies';
+import {Colors} from '../../style';
+const {Svg, Path} = SvgPackage;
+
+export type PieSegmentProps = {
+  /**
+   * The percentage of pie the segment should cover
+   */
+  percentage: number;
+  /**
+   * The radius of the containing pie
+   */
+  radius: number;
+  /**
+   * The color of the segment
+   */
+  color: string;
+  /**
+   * The start angle of the segment
+   */
+  startAngle?: number;
+  /**
+   * The padding between the segments and the container of the pie.
+   */
+  padding?: number;
+  /**
+   * The width of the divider between the segments
+   */
+  dividerWidth?: number;
+  /**
+   * The color of the divider between the segments
+   */
+  dividerColor?: ColorValue;
+};
+
+const PieSegment = (props: PieSegmentProps) => {
+  const {
+    percentage,
+    radius,
+    color,
+    startAngle = 0,
+    padding = 0,
+    dividerWidth = 4,
+    dividerColor = Colors.$backgroundDefault
+  } = props;
+
+  const actualRadius = radius - padding;
+  const centerXAndY = radius;
+  const amountToCover = (percentage / 100) * 360;
+  const angleFromTop = startAngle - 90;
+
+  const startRad = (angleFromTop * Math.PI) / 180;
+  const endRad = startRad + (amountToCover * Math.PI) / 180;
+
+  const startX = centerXAndY + Math.cos(startRad) * actualRadius;
+  const startY = centerXAndY + Math.sin(startRad) * actualRadius;
+  const endX = centerXAndY + Math.cos(endRad) * actualRadius;
+  const endY = centerXAndY + Math.sin(endRad) * actualRadius;
+
+  const largeArcFlag = amountToCover > 180 ? 1 : 0;
+  const sweepFlag = 1;
+
+  const arcPath = `
+    M ${centerXAndY} ${centerXAndY}
+    L ${startX} ${startY}
+    A ${actualRadius} ${actualRadius} 0 ${largeArcFlag} ${sweepFlag} ${endX} ${endY}
+    Z
+  `;
+  const startBorderLine = `M ${centerXAndY} ${centerXAndY} L ${startX} ${startY}`;
+  const endBorderLine = `M ${centerXAndY} ${centerXAndY} L ${endX} ${endY}`;
+
+  const arc = <Path d={arcPath} fill={color}/>;
+  const borders = (
+    <Path
+      d={`${startBorderLine} ${endBorderLine}`}
+      fill="none"
+      stroke={dividerColor}
+      strokeWidth={dividerWidth / 2}
+      strokeLinejoin="round"
+    />
+  );
+  const totalSize = radius * 2 + padding;
+
+  return (
+    <View style={styles.container}>
+      <Svg width={totalSize} height={totalSize} viewBox={`0 0 ${totalSize} ${totalSize}`} style={styles.svg}>
+        {arc}
+        {borders}
+      </Svg>
+    </View>
+  );
+};
+
+export default PieSegment;
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute'
+  },
+  svg: {
+    position: 'absolute'
+  }
+});
diff --git a/src/components/pieChart/index.tsx b/src/components/pieChart/index.tsx
new file mode 100644
index 0000000000..adda6fae1a
--- /dev/null
+++ b/src/components/pieChart/index.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import View from '../view';
+import PieSegment, {PieSegmentProps} from './PieSegment';
+import {SvgPackage} from '../../optionalDependencies';
+const {Svg, Path} = SvgPackage;
+
+export type PieChartSegmentProps = Pick<PieSegmentProps, 'percentage' | 'color'>;
+
+export type PieChartProps = {
+  /**
+   * Pie chart segments array
+   */
+  segments: PieChartSegmentProps[];
+  /**
+   * Pie chart diameter
+   */
+  diameter?: number;
+} & Pick<PieSegmentProps, 'dividerWidth' | 'dividerColor'>;
+
+const DEFAULT_DIAMETER = 144;
+
+const PieChart = (props: PieChartProps) => {
+  const {segments, diameter = DEFAULT_DIAMETER, ...others} = props;
+
+  if (!Svg || !Path) {
+    console.error(`RNUILib PieChart requires installing "@react-native-svg" dependency`);
+    return null;
+  }
+
+  const renderPieSegments = () => {
+    let currentStartAngle = 0;
+
+    return segments.map((segment, index) => {
+      const startAngle = currentStartAngle;
+      currentStartAngle += (segment.percentage / 100) * 360;
+      return (
+        <PieSegment key={index} {...segment} {...others} startAngle={startAngle} radius={diameter / 2}/>
+      );
+    });
+  };
+  return (
+    <View width={diameter} height={diameter}>
+      {renderPieSegments()}
+    </View>
+  );
+};
+
+export default PieChart;
diff --git a/src/index.ts b/src/index.ts
index db833aea08..b2b3cc845c 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -123,6 +123,7 @@ export {
   PickerItemsListProps,
   PickerMethods
 } from './components/picker';
+export {default as PieChart, PieChartSegmentProps} from './components/pieChart';
 export {default as ProgressBar, ProgressBarProps} from './components/progressBar';
 export {default as ProgressiveImage, ProgressiveImageProps} from './components/progressiveImage';
 export {default as RadioButton, RadioButtonProps} from './components/radioButton';

From a647cbbd8c4a795ded00fd91ed209f4eab1e1972 Mon Sep 17 00:00:00 2001
From: Miki Leib <38354019+M-i-k-e-l@users.noreply.github.com>
Date: Mon, 27 Jan 2025 14:48:01 +0200
Subject: [PATCH 6/6] TextField - ClearButton - fix right margin (#3482)

* TextField - ClearButton - fix right margin

* Add ClearButtonProps and move style to preset
---
 src/components/textField/ClearButton.tsx      | 11 ++++-------
 src/components/textField/index.tsx            |  8 +++++++-
 src/components/textField/presets/outline.ts   |  2 ++
 src/components/textField/presets/underline.ts |  2 ++
 src/components/textField/types.ts             | 16 ++++++++++++----
 5 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/src/components/textField/ClearButton.tsx b/src/components/textField/ClearButton.tsx
index cff3c3fda9..3fd8f03a01 100644
--- a/src/components/textField/ClearButton.tsx
+++ b/src/components/textField/ClearButton.tsx
@@ -3,11 +3,11 @@ import {StyleSheet} from 'react-native';
 import {useAnimatedStyle, useSharedValue, withTiming, Easing} from 'react-native-reanimated';
 import {useDidUpdate} from '../../hooks';
 import Assets from '../../assets';
-import {Spacings, Colors} from '../../style';
+import {Colors} from '../../style';
 import View from '../view';
 import Button from '../button';
 import FieldContext from './FieldContext';
-import {TextFieldProps} from './types';
+import {ClearButtonProps} from './types';
 
 const hitSlop = {top: 20, bottom: 20, left: 20, right: 20};
 const NON_VISIBLE_POSITION = 18;
@@ -17,7 +17,7 @@ const TIMING_CONFIG = {
   easing: Easing.bezier(0.33, 1, 0.68, 1)
 };
 
-const ClearButton = ({testID, onClear, onChangeText}: Pick<TextFieldProps, 'onClear' | 'testID' | 'onChangeText'>) => {
+const ClearButton = ({testID, onClear, onChangeText, clearButtonStyle}: ClearButtonProps) => {
   const {hasValue} = useContext(FieldContext);
   const animatedValue = useSharedValue(hasValue ? VISIBLE_POSITION : NON_VISIBLE_POSITION);
   const animatedOpacity = useSharedValue(hasValue ? 1 : 0);
@@ -29,7 +29,7 @@ const ClearButton = ({testID, onClear, onChangeText}: Pick<TextFieldProps, 'onCl
     };
   });
 
-  const style = useMemo(() => [styles.container, animatedStyle], [animatedStyle]);
+  const style = useMemo(() => [clearButtonStyle, animatedStyle], [clearButtonStyle, animatedStyle]);
 
   const animate = useCallback(() => {
     const toValue = hasValue ? VISIBLE_POSITION : NON_VISIBLE_POSITION;
@@ -64,9 +64,6 @@ const ClearButton = ({testID, onClear, onChangeText}: Pick<TextFieldProps, 'onCl
 };
 
 const styles = StyleSheet.create({
-  container: {
-    marginHorizontal: Spacings.s3
-  },
   clearIcon: {
     tintColor: Colors.$textNeutralLight
   }
diff --git a/src/components/textField/index.tsx b/src/components/textField/index.tsx
index eb787fb79f..9ea6381d48 100644
--- a/src/components/textField/index.tsx
+++ b/src/components/textField/index.tsx
@@ -91,6 +91,7 @@ const TextField = (props: InternalTextFieldProps) => {
     centered,
     readonly = false,
     showMandatoryIndication,
+    clearButtonStyle,
     ...others
   } = usePreset(props);
 
@@ -208,7 +209,12 @@ const TextField = (props: InternalTextFieldProps) => {
             </View>
           )}
           {showClearButton && (
-            <ClearButton onClear={onClear} testID={`${props.testID}.clearButton`} onChangeText={onChangeText}/>
+            <ClearButton
+              onClear={onClear}
+              testID={`${props.testID}.clearButton`}
+              onChangeText={onChangeText}
+              clearButtonStyle={clearButtonStyle}
+            />
           )}
           {trailingAccessory}
           {/* </View> */}
diff --git a/src/components/textField/presets/outline.ts b/src/components/textField/presets/outline.ts
index 011b7ffb61..4997f75ca7 100644
--- a/src/components/textField/presets/outline.ts
+++ b/src/components/textField/presets/outline.ts
@@ -3,6 +3,7 @@ import {BorderRadiuses, Colors, Spacings} from '../../../style';
 import underline from './underline';
 
 const styles = StyleSheet.create({
+  clearButtonStyle: {marginLeft: Spacings.s3},
   field: {
     borderWidth: 1,
     borderColor: Colors.$outlineDisabled,
@@ -14,5 +15,6 @@ const styles = StyleSheet.create({
 
 export default {
   ...underline,
+  clearButtonStyle: styles.clearButtonStyle,
   fieldStyle: styles.field
 };
diff --git a/src/components/textField/presets/underline.ts b/src/components/textField/presets/underline.ts
index 8b76376185..f88869011c 100644
--- a/src/components/textField/presets/underline.ts
+++ b/src/components/textField/presets/underline.ts
@@ -26,6 +26,7 @@ const styles = StyleSheet.create({
     lineHeight: undefined,
     height: Typography?.text70?.lineHeight
   },
+  clearButtonStyle: {marginHorizontal: Spacings.s3},
   floatingPlaceholder: {...Typography.text70}
 });
 
@@ -37,5 +38,6 @@ export default {
   labelColor: colorByState,
   fieldStyle: styles.field,
   style: styles.input,
+  clearButtonStyle: styles.clearButtonStyle,
   floatingPlaceholderStyle: styles.floatingPlaceholder
 };
diff --git a/src/components/textField/types.ts b/src/components/textField/types.ts
index 7f91167685..1f98fe7874 100644
--- a/src/components/textField/types.ts
+++ b/src/components/textField/types.ts
@@ -69,6 +69,17 @@ export interface MandatoryIndication {
   showMandatoryIndication?: boolean;
 }
 
+export interface ClearButtonProps extends Pick<TextInputProps, 'testID' | 'onChangeText'> {
+  /**
+   * On clear button callback
+   */
+  onClear?: () => void;
+  /**
+   * The style of the clear button
+   */
+  clearButtonStyle?: StyleProp<ViewStyle>;
+}
+
 export interface LabelProps extends MandatoryIndication, Pick<ValidationMessageProps, 'enableErrors'> {
   /**
    * Field label
@@ -190,6 +201,7 @@ export type TextFieldProps = MarginModifiers &
   LabelProps &
   Omit<FloatingPlaceholderProps, 'testID'> &
   MandatoryIndication &
+  Omit<ClearButtonProps, 'testID' | 'onChangeText'> &
   // We're declaring these props explicitly here for react-docgen (which can't read hooks)
   // FieldStateProps &
   ValidationMessageProps &
@@ -214,10 +226,6 @@ export type TextFieldProps = MarginModifiers &
      * Should show a clear button when there is a value
      */
     showClearButton?: boolean;
-    /**
-     * On clear button callback
-     */
-    onClear?: () => void;
     /**
      * Text to display under the input
      */