fix(various): update various files based on feedback

commercetools · Jan 13, 2025 · 479b49c · 479b49c
1 parent 94e53b0
commit 479b49c
Show file tree

Hide file tree

Showing 105 changed files with 116 additions and 298 deletions.
diff --git a/design-system/package.json b/design-system/package.json
@@ -28,7 +28,6 @@
     "@commercetools-uikit/hooks": "19.20.1",
     "@emotion/react": "^11.10.5",
     "lodash": "4.17.21",
-    "prop-types": "15.8.1",
     "react": "19.0.0"
   },
   "devDependencies": {

diff --git a/design-system/src/theme-provider.tsx b/design-system/src/theme-provider.tsx
@@ -76,8 +76,8 @@ const ThemeProvider = ({
   ...props
 }: ThemeProviderProps) => {
   const parentSelectorRef = useRef(parentSelector);
-  const themeNameRef = useRef<string>(null);
-  const themeOverridesRef = useRef<Record<string, string>>(null);
+  const themeNameRef = useRef<string>(undefined);
+  const themeOverridesRef = useRef<Record<string, string>>(undefined);
 
   useLayoutEffect(() => {
     // We want to make sure we don't really apply the change when the props
@@ -88,7 +88,7 @@ const ThemeProvider = ({
       !isEqual(themeOverridesRef.current, props.themeOverrides)
     ) {
       themeNameRef.current = theme;
-      themeOverridesRef.current = props.themeOverrides ?? null;
+      themeOverridesRef.current = props.themeOverrides;
 
       applyTheme({
         newTheme: theme,

diff --git a/packages/calendar-utils/package.json b/packages/calendar-utils/package.json
@@ -34,7 +34,6 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "lodash": "4.17.21",
-    "prop-types": "15.8.1",
     "react-select": "5.9.0"
   },
   "devDependencies": {

diff --git a/packages/components/accessible-hidden/package.json b/packages/components/accessible-hidden/package.json
@@ -21,8 +21,7 @@
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@babel/runtime-corejs3": "^7.20.13",
-    "@emotion/react": "^11.10.5",
-    "prop-types": "15.8.1"
+    "@emotion/react": "^11.10.5"
   },
   "devDependencies": {
     "react": "19.0.0"

diff --git a/packages/components/avatar/package.json b/packages/components/avatar/package.json
@@ -25,8 +25,7 @@
     "@commercetools-uikit/utils": "19.20.1",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "lodash": "4.17.21",
-    "prop-types": "15.8.1"
+    "lodash": "4.17.21"
   },
   "devDependencies": {
     "react": "19.0.0"

diff --git a/packages/components/buttons/accessible-button/package.json b/packages/components/buttons/accessible-button/package.json
@@ -27,7 +27,6 @@
     "@emotion/styled": "^11.10.5",
     "@types/react-is": "^19.0.0",
     "lodash": "4.17.21",
-    "prop-types": "15.8.1",
     "react-is": "19.0.0"
   },
   "devDependencies": {

diff --git a/packages/components/buttons/flat-button/package.json b/packages/components/buttons/flat-button/package.json
@@ -29,7 +29,6 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "lodash": "4.17.21",
-    "prop-types": "15.8.1",
     "react-intl": "6.3.2"
   },
   "devDependencies": {

diff --git a/packages/components/buttons/icon-button/package.json b/packages/components/buttons/icon-button/package.json
@@ -29,7 +29,6 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "lodash": "4.17.21",
-    "prop-types": "15.8.1",
     "react-intl": "6.3.2"
   },
   "devDependencies": {

diff --git a/packages/components/buttons/link-button/package.json b/packages/components/buttons/link-button/package.json
@@ -28,8 +28,7 @@
     "@commercetools-uikit/utils": "19.20.1",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "lodash": "4.17.21",
-    "prop-types": "15.8.1"
+    "lodash": "4.17.21"
   },
   "devDependencies": {
     "react": "19.0.0",

diff --git a/packages/components/buttons/primary-button/package.json b/packages/components/buttons/primary-button/package.json
@@ -29,7 +29,6 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "lodash": "4.17.21",
-    "prop-types": "15.8.1",
     "react-intl": "6.3.2"
   },
   "devDependencies": {

diff --git a/packages/components/buttons/secondary-button/package.json b/packages/components/buttons/secondary-button/package.json
@@ -28,8 +28,7 @@
     "@commercetools-uikit/utils": "19.20.1",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "lodash": "4.17.21",
-    "prop-types": "15.8.1"
+    "lodash": "4.17.21"
   },
   "devDependencies": {
     "react": "19.0.0",

diff --git a/packages/components/buttons/secondary-icon-button/package.json b/packages/components/buttons/secondary-icon-button/package.json
@@ -29,7 +29,6 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "lodash": "4.17.21",
-    "prop-types": "15.8.1",
     "react-intl": "6.3.2"
   },
   "devDependencies": {

diff --git a/packages/components/card/package.json b/packages/components/card/package.json
@@ -26,8 +26,7 @@
     "@commercetools-uikit/utils": "19.20.1",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "@types/react-router-dom": "^5.3.3",
-    "prop-types": "15.8.1"
+    "@types/react-router-dom": "^5.3.3"
   },
   "devDependencies": {
     "react": "19.0.0",

diff --git a/packages/components/collapsible-motion/package.json b/packages/components/collapsible-motion/package.json
@@ -25,8 +25,7 @@
     "@commercetools-uikit/utils": "19.20.1",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "lodash": "4.17.21",
-    "prop-types": "15.8.1"
+    "lodash": "4.17.21"
   },
   "devDependencies": {
     "react": "19.0.0"

diff --git a/packages/components/collapsible-motion/src/collapsible-motion.tsx b/packages/components/collapsible-motion/src/collapsible-motion.tsx
@@ -85,7 +85,7 @@ const useToggleAnimation = (
   minHeight = 0
 ) => {
   const nodeRef = useRef<TNodeRefObject>(null);
-  const animationRef = useRef<ReturnType<typeof keyframes> | null>(null);
+  const animationRef = useRef<ReturnType<typeof keyframes>>(null);
   const prevIsOpen = usePrevious(isOpen);
 
   useEffect(

diff --git a/packages/components/collapsible-panel/package.json b/packages/components/collapsible-panel/package.json
@@ -33,7 +33,6 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "lodash": "4.17.21",
-    "prop-types": "15.8.1",
     "react-intl": "6.3.2"
   },
   "devDependencies": {

diff --git a/packages/components/collapsible-panel/src/collapsible-panel.tsx b/packages/components/collapsible-panel/src/collapsible-panel.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, cloneElement } from 'react';
+import { ReactNode, ReactElement, cloneElement, isValidElement } from 'react';
 import isNil from 'lodash/isNil';
 import styled from '@emotion/styled';
 import {
@@ -41,7 +41,7 @@ export type TCollapsiblePanel = {
   /**
    * The title being rendered at top left of the panel
    */
-  header: ReactNode;
+  header: ReactElement<{ isCondensed?: boolean }> | ReactNode;
   /**
    * A secondary header for the panel (only pass if needed)
    */
@@ -139,15 +139,11 @@ const HeadLineText = (
 
   return (
     <Text.Subheadline as="h4" truncate>
-      {/* TODO: this is a temporary fix, which will be refactored after we align with the desing team on how to proceed */}
-      {typeof props.header === 'string'
-        ? props.header
-        : cloneElement(
-            props.header as React.ReactElement<{ isCondensed?: boolean }>,
-            {
-              isCondensed: props.condensed,
-            }
-          )}
+      {isValidElement<{ isCondensed?: boolean }>(props.header)
+        ? cloneElement(props.header, {
+            isCondensed: props.condensed,
+          })
+        : props.header}
     </Text.Subheadline>
   );
 };

diff --git a/packages/components/collapsible/package.json b/packages/components/collapsible/package.json
@@ -25,8 +25,7 @@
     "@commercetools-uikit/utils": "19.20.1",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "lodash": "4.17.21",
-    "prop-types": "15.8.1"
+    "lodash": "4.17.21"
   },
   "devDependencies": {
     "react": "19.0.0"

diff --git a/packages/components/constraints/package.json b/packages/components/constraints/package.json
@@ -24,8 +24,7 @@
     "@commercetools-uikit/design-system": "19.20.1",
     "@commercetools-uikit/utils": "19.20.1",
     "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
-    "prop-types": "15.8.1"
+    "@emotion/styled": "^11.10.5"
   },
   "devDependencies": {
     "react": "19.0.0"

diff --git a/packages/components/data-table-manager/package.json b/packages/components/data-table-manager/package.json
@@ -56,7 +56,6 @@
     "@types/react-beautiful-dnd": "^13.1.3",
     "debounce-promise": "^3.1.2",
     "lodash": "4.17.21",
-    "prop-types": "15.8.1",
     "react-beautiful-dnd": "13.1.1"
   },
   "devDependencies": {

diff --git a/packages/components/data-table-manager/src/data-table-manager.tsx b/packages/components/data-table-manager/src/data-table-manager.tsx
@@ -90,8 +90,7 @@ const DataTableManager = <Row extends TRow = TRow>(
         selectedColumns={selectedColumns ?? []}
         customColumnManager={customColumnManager ?? undefined}
       />
-      {(props.children as TDataTableManagerProps<Row>['children']) &&
-      isValidElement(props.children)
+      {props.children && isValidElement(props.children)
         ? cloneElement(props.children, {
             columns,
             customColumns,

diff --git a/packages/components/data-table-manager/src/draggable-tag/draggable-tag.spec.js b/packages/components/data-table-manager/src/draggable-tag/draggable-tag.spec.js
@@ -24,9 +24,9 @@ it('should render the column tag when rendering a column', () => {
     <DragDropContext>
       <Droppable
         droppableId="droppableId"
-        isDropDisabled={false}
-        isCombineEnabled={false}
-        ignoreContainerClipping={false}
+        // isDropDisabled={false}
+        // isCombineEnabled={false}
+        // ignoreContainerClipping={false}
       >
         {(provided) => (
           <div ref={provided.innerRef}>

diff --git a/packages/components/data-table/package.json b/packages/components/data-table/package.json
@@ -31,7 +31,6 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "lodash": "4.17.21",
-    "prop-types": "15.8.1",
     "react-intl": "6.3.2"
   },
   "devDependencies": {

diff --git a/packages/components/data-table/src/header-cell.tsx b/packages/components/data-table/src/header-cell.tsx
@@ -121,7 +121,7 @@ export type THeaderCell = {
   onColumnResized?: (args: TColumn[]) => void;
   disableHeaderStickiness: boolean;
   horizontalCellAlignment: 'left' | 'center' | 'right';
-  iconComponent?: ReactNode | Function;
+  iconComponent?: ReactNode | (() => ReactNode);
 };
 
 const HeaderCell = ({

diff --git a/packages/components/dropdowns/dropdown-menu/package.json b/packages/components/dropdowns/dropdown-menu/package.json
@@ -31,7 +31,6 @@
     "@commercetools-uikit/utils": "19.20.1",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "prop-types": "15.8.1",
     "react-intl": "6.3.2"
   },
   "devDependencies": {

diff --git a/packages/components/dropdowns/dropdown-menu/src/dropdown-menu.tsx b/packages/components/dropdowns/dropdown-menu/src/dropdown-menu.tsx
@@ -105,7 +105,7 @@ function DropdownMenu({
   ...props
 }: TDropdownMenuProps) {
   const [isOpen, toggle] = useToggleState(false);
-  const triggerRef = useRef<HTMLDivElement>(null as unknown as HTMLDivElement);
+  const triggerRef = useRef<HTMLDivElement>(null);
 
   // We use the context so children can toggle the dropdown
   const context = useMemo(
@@ -119,7 +119,7 @@ function DropdownMenu({
 
   // Close the dropdown when clicking outside of it
   const handleGlobalClick: EventListener = useCallback(
-    (event: Event) => {
+    (event) => {
       const triggerElement = triggerRef.current;
       if (
         isOpen &&

diff --git a/packages/components/dropdowns/dropdown-menu/src/menu/dropdown-menu-menu.tsx b/packages/components/dropdowns/dropdown-menu/src/menu/dropdown-menu-menu.tsx
@@ -43,7 +43,7 @@ type TDropdownBaseMenuProps = {
   isOpen: boolean;
   menuPosition: 'left' | 'right';
   menuMaxHeight?: number;
-  triggerElementRef: RefObject<HTMLElement>;
+  triggerElementRef: RefObject<HTMLElement | null>;
 };
 function DropdownBaseMenu(props: TDropdownBaseMenuProps) {
   const menuRef = useRef<HTMLDivElement>(null);
@@ -198,7 +198,7 @@ export type TDropdownContentMenuProps = {
   menuPosition: 'left' | 'right';
   menuMaxHeight?: number;
   isOpen: boolean;
-  triggerElementRef: RefObject<HTMLElement>;
+  triggerElementRef: RefObject<HTMLElement | null>;
 };
 export const DropdownContentMenu = (props: TDropdownContentMenuProps) => {
   return (
@@ -224,7 +224,7 @@ export type TDropdownListMenuProps = {
   menuPosition: 'left' | 'right';
   menuMaxHeight?: number;
   isOpen: boolean;
-  triggerElementRef: RefObject<HTMLElement>;
+  triggerElementRef: RefObject<HTMLElement | null>;
 };
 export const DropdownListMenu = (props: TDropdownListMenuProps) => {
   return (

diff --git a/packages/components/field-errors/package.json b/packages/components/field-errors/package.json
@@ -23,8 +23,7 @@
     "@babel/runtime-corejs3": "^7.20.13",
     "@commercetools-uikit/messages": "19.20.1",
     "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
-    "prop-types": "15.8.1"
+    "@emotion/styled": "^11.10.5"
   },
   "devDependencies": {
     "react": "19.0.0",

diff --git a/packages/components/field-label/package.json b/packages/components/field-label/package.json
@@ -33,7 +33,6 @@
     "@commercetools-uikit/utils": "19.20.1",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "prop-types": "15.8.1",
     "react-intl": "6.3.2"
   },
   "devDependencies": {

diff --git a/packages/components/field-warnings/package.json b/packages/components/field-warnings/package.json
@@ -23,8 +23,7 @@
     "@babel/runtime-corejs3": "^7.20.13",
     "@commercetools-uikit/messages": "19.20.1",
     "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
-    "prop-types": "15.8.1"
+    "@emotion/styled": "^11.10.5"
   },
   "devDependencies": {
     "react": "19.0.0",

diff --git a/packages/components/fields/async-creatable-select-field/package.json b/packages/components/fields/async-creatable-select-field/package.json
@@ -31,7 +31,6 @@
     "@commercetools-uikit/utils": "19.20.1",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "prop-types": "15.8.1",
     "react-intl": "6.3.2"
   },
   "devDependencies": {

diff --git a/packages/components/fields/async-select-field/package.json b/packages/components/fields/async-select-field/package.json
@@ -31,7 +31,6 @@
     "@commercetools-uikit/utils": "19.20.1",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "prop-types": "15.8.1",
     "react-intl": "6.3.2"
   },
   "devDependencies": {

diff --git a/packages/components/fields/creatable-select-field/package.json b/packages/components/fields/creatable-select-field/package.json
@@ -31,7 +31,6 @@
     "@commercetools-uikit/utils": "19.20.1",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "prop-types": "15.8.1",
     "react-intl": "6.3.2"
   },
   "devDependencies": {

diff --git a/packages/components/fields/date-field/package.json b/packages/components/fields/date-field/package.json
@@ -31,7 +31,6 @@
     "@commercetools-uikit/utils": "19.20.1",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "prop-types": "15.8.1",
     "react-intl": "6.3.2"
   },
   "devDependencies": {

diff --git a/packages/components/fields/date-range-field/package.json b/packages/components/fields/date-range-field/package.json
@@ -31,7 +31,6 @@
     "@commercetools-uikit/utils": "19.20.1",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "prop-types": "15.8.1",
     "react-intl": "6.3.2"
   },
   "devDependencies": {

diff --git a/packages/components/fields/date-time-field/package.json b/packages/components/fields/date-time-field/package.json
@@ -31,7 +31,6 @@
     "@commercetools-uikit/utils": "19.20.1",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "prop-types": "15.8.1",
     "react-intl": "6.3.2"
   },
   "devDependencies": {

diff --git a/packages/components/fields/localized-multiline-text-field/package.json b/packages/components/fields/localized-multiline-text-field/package.json
@@ -31,7 +31,6 @@
     "@commercetools-uikit/utils": "19.20.1",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "prop-types": "15.8.1",
     "react-intl": "6.3.2"
   },
   "devDependencies": {