chore(dialog): moved styles to non-client component and removed unuse…

…d const
mlaursen · Sep 7, 2024 · e27a8de · e27a8de
1 parent 340e3d2
commit e27a8de
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 48 deletions.
diff --git a/packages/codemod/transforms/v5-to-v6/coreExportMap.ts b/packages/codemod/transforms/v5-to-v6/coreExportMap.ts
@@ -23,6 +23,7 @@ export const TYPES: ReadonlySet<string> = new Set([
   "AutocompleteCircularProgressProps",
   "AutocompleteClassNameOptions",
   "AutocompleteClearButtonClassNameOptions",
+  "AutocompleteClearButtonProps",
   "AutocompleteDropdownButtonProps",
   "AutocompleteFilterOptions",
   "AutocompleteGetOptionPropsOptions",
@@ -140,6 +141,7 @@ export const TYPES: ReadonlySet<string> = new Set([
   "ComboboxWidgetPopupProps",
   "ComboboxWidgetProps",
   "CompletedFileUploadStats",
+  "ConfigurableAutocompleteClearButtonProps",
   "ConfigurableAutocompleteDropdownButtonProps",
   "ConfigurableComboboxMenuProps",
   "ConfigurableIconName",
@@ -185,6 +187,7 @@ export const TYPES: ReadonlySet<string> = new Set([
   "CustomizableSliderMarkLabelProps",
   "CustomLinkComponent",
   "CustomMainElement",
+  "CustomNavigationLinkComponent",
   "CustomTypographyComponent",
   "DebouncedFunction",
   "DefaultDir",
@@ -940,6 +943,7 @@ export const VARIABLES: ReadonlySet<string> = new Set([
   "Autocomplete",
   "autocomplete",
   "AutocompleteCircularProgress",
+  "AutocompleteClearButton",
   "autocompleteClearButton",
   "AutocompleteDropdownButton",
   "autocompleteRightAddon",
@@ -1109,7 +1113,6 @@ export const VARIABLES: ReadonlySet<string> = new Set([
   "DEFAULT_DESKTOP_MIN_WIDTH",
   "DEFAULT_DIALOG_CLASSNAMES",
   "DEFAULT_DIALOG_TIMEOUT",
-  "DEFAULT_FIXED_DIALOG_CLASSNAMES",
   "DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES",
   "DEFAULT_KEYBOARD_MOVEMENT",
   "DEFAULT_LIGHT_THEME",
@@ -1232,6 +1235,7 @@ export const VARIABLES: ReadonlySet<string> = new Set([
   "getListItemHeight",
   "getLuminance",
   "getMiddleOfRange",
+  "getNavigationGroupId",
   "getNextFocusableIndex",
   "getNonDisabledOptions",
   "getOrientationType",
@@ -1881,9 +1885,13 @@ export const EXPORT_MAP: Record<string, string> = {
     "@react-md/core/autocomplete/AutocompleteCircularProgress",
   AutocompleteClassNameOptions:
     "@react-md/core/autocomplete/autocompleteStyles",
+  AutocompleteClearButton:
+    "@react-md/core/autocomplete/AutocompleteClearButton",
   autocompleteClearButton: "@react-md/core/autocomplete/autocompleteStyles",
   AutocompleteClearButtonClassNameOptions:
     "@react-md/core/autocomplete/autocompleteStyles",
+  AutocompleteClearButtonProps:
+    "@react-md/core/autocomplete/AutocompleteClearButton",
   AutocompleteDropdownButton:
     "@react-md/core/autocomplete/AutocompleteDropdownButton",
   AutocompleteDropdownButtonProps:
@@ -2099,6 +2107,8 @@ export const EXPORT_MAP: Record<string, string> = {
   ComboboxWidgetPopupProps: "@react-md/core/form/useCombobox",
   ComboboxWidgetProps: "@react-md/core/form/useCombobox",
   CompletedFileUploadStats: "@react-md/core/files/utils",
+  ConfigurableAutocompleteClearButtonProps:
+    "@react-md/core/autocomplete/AutocompleteClearButton",
   ConfigurableAutocompleteDropdownButtonProps:
     "@react-md/core/autocomplete/AutocompleteDropdownButton",
   ConfigurableComboboxMenuProps: "@react-md/core/form/useCombobox",
@@ -2175,6 +2185,7 @@ export const EXPORT_MAP: Record<string, string> = {
   CustomizableSliderMarkLabelProps: "@react-md/core/form/SliderMarkLabel",
   CustomLinkComponent: "@react-md/core/link/Link",
   CustomMainElement: "@react-md/core/layout/Main",
+  CustomNavigationLinkComponent: "@react-md/core/navigation/types",
   CustomTypographyComponent: "@react-md/core/typography/Typography",
   cyan50: "@react-md/core/theme/colors",
   cyan100: "@react-md/core/theme/colors",
@@ -2230,9 +2241,8 @@ export const EXPORT_MAP: Record<string, string> = {
   DEFAULT_DARK_THEME: "@react-md/core/theme/ThemeProvider",
   DEFAULT_DESKTOP_LARGE_MIN_WIDTH: "@react-md/core/media-queries/appSize",
   DEFAULT_DESKTOP_MIN_WIDTH: "@react-md/core/media-queries/appSize",
-  DEFAULT_DIALOG_CLASSNAMES: "@react-md/core/dialog/Dialog",
-  DEFAULT_DIALOG_TIMEOUT: "@react-md/core/dialog/Dialog",
-  DEFAULT_FIXED_DIALOG_CLASSNAMES: "@react-md/core/dialog/FixedDialog",
+  DEFAULT_DIALOG_CLASSNAMES: "@react-md/core/dialog/styles",
+  DEFAULT_DIALOG_TIMEOUT: "@react-md/core/dialog/styles",
   DEFAULT_HORIZONTAL_LAYOUT_TRANSITION_CLASSNAMES:
     "@react-md/core/layout/useHorizontalLayoutTransition",
   DEFAULT_KEYBOARD_MOVEMENT: "@react-md/core/movement/constants",
@@ -2525,6 +2535,7 @@ export const EXPORT_MAP: Record<string, string> = {
   GetMenuItemRadioGroupProps: "@react-md/core/form/useRadioGroup",
   getMiddleOfRange: "@react-md/core/utils/getMiddleOfRange",
   GetMiddleOfRangeOptions: "@react-md/core/utils/getMiddleOfRange",
+  getNavigationGroupId: "@react-md/core/navigation/utils",
   getNextFocusableIndex: "@react-md/core/movement/utils",
   getNonDisabledOptions: "@react-md/core/form/useCombobox",
   getOrientationType: "@react-md/core/useOrientation",

diff --git a/packages/core/src/dialog/Dialog.tsx b/packages/core/src/dialog/Dialog.tsx
@@ -10,10 +10,8 @@ import { Overlay } from "../overlay/Overlay.js";
 import { Portal } from "../portal/Portal.js";
 import { useScrollLock } from "../scroll/useScrollLock.js";
 import {
-  type CSSTransitionClassNames,
   type CSSTransitionComponentProps,
   type TransitionActions,
-  type TransitionTimeout,
 } from "../transition/types.js";
 import { useCSSTransition } from "../transition/useCSSTransition.js";
 import { type LabelRequiredForA11y } from "../types.js";
@@ -24,38 +22,12 @@ import {
   NestedDialogProvider,
   useNestedDialogContext,
 } from "./NestedDialogProvider.js";
-import { dialog, type DialogType } from "./styles.js";
-
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-dialog-background-color"?: string;
-    "--rmd-dialog-color"?: string;
-    "--rmd-dialog-min-width"?: string | number;
-    "--rmd-dialog-horizontal-margin"?: string | number;
-    "--rmd-dialog-vertical-margin"?: string | number;
-    "--rmd-dialog-z-index"?: string | number;
-    "--rmd-dialog-header-padding"?: string | number;
-    "--rmd-dialog-header-padding-bottom"?: string | number;
-    "--rmd-dialog-content-padding"?: string | number;
-    "--rmd-dialog-footer-padding"?: string | number;
-  }
-}
-
-/** @since 4.0.0 */
-export const DEFAULT_DIALOG_CLASSNAMES: Readonly<CSSTransitionClassNames> = {
-  appear: "rmd-dialog--enter",
-  appearActive: "rmd-dialog--enter-active",
-  enter: "rmd-dialog--enter",
-  enterActive: "rmd-dialog--enter-active",
-  exit: "rmd-dialog--exit",
-  exitActive: "rmd-dialog--exit-active",
-};
-
-/** @since 4.0.0 */
-export const DEFAULT_DIALOG_TIMEOUT: Readonly<TransitionTimeout> = {
-  enter: 200,
-  exit: 150,
-};
+import {
+  DEFAULT_DIALOG_CLASSNAMES,
+  DEFAULT_DIALOG_TIMEOUT,
+  dialog,
+  type DialogType,
+} from "./styles.js";
 
 const noop = (): void => {
   // do nothing

diff --git a/packages/core/src/dialog/FixedDialog.tsx b/packages/core/src/dialog/FixedDialog.tsx
@@ -6,7 +6,6 @@ import {
   type PositionAnchor,
 } from "../positioning/types.js";
 import { useFixedPositioning } from "../positioning/useFixedPositioning.js";
-import { type CSSTransitionClassNamesObject } from "../transition/types.js";
 import { SCALE_CLASSNAMES } from "../transition/useScaleTransition.js";
 import { type LabelRequiredForA11y } from "../types.js";
 import { Dialog, type BaseDialogProps } from "./Dialog.js";
@@ -33,15 +32,6 @@ export type FixedDialogProps = LabelRequiredForA11y<BaseFixedDialogProps>;
 const noop = (): void => {
   // do nothing
 };
-export const DEFAULT_FIXED_DIALOG_CLASSNAMES: Readonly<CSSTransitionClassNamesObject> =
-  {
-    appear: "rmd-dialog--fixed-enter",
-    appearActive: "rmd-dialog--fixed-enter-active",
-    enter: "rmd-dialog--fixed-enter",
-    enterActive: "rmd-dialog--fixed-enter-active",
-    exit: "rmd-dialog--fixed-exit",
-    exitActive: "rmd-dialog--fixed-exit-active",
-  };
 
 /**
  * **Client Component**

diff --git a/packages/core/src/dialog/styles.ts b/packages/core/src/dialog/styles.ts
@@ -1,8 +1,27 @@
 import { cnb } from "cnbuilder";
+import {
+  type CSSTransitionClassNames,
+  type TransitionTimeout,
+} from "../transition/types.js";
 import { bem } from "../utils/bem.js";
 
 const styles = bem("rmd-dialog");
 
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-dialog-background-color"?: string;
+    "--rmd-dialog-color"?: string;
+    "--rmd-dialog-min-width"?: string | number;
+    "--rmd-dialog-horizontal-margin"?: string | number;
+    "--rmd-dialog-vertical-margin"?: string | number;
+    "--rmd-dialog-z-index"?: string | number;
+    "--rmd-dialog-header-padding"?: string | number;
+    "--rmd-dialog-header-padding-bottom"?: string | number;
+    "--rmd-dialog-content-padding"?: string | number;
+    "--rmd-dialog-footer-padding"?: string | number;
+  }
+}
+
 export type DialogType = "full-page" | "centered" | "custom";
 
 /** @since 6.0.0 */
@@ -116,3 +135,19 @@ export function dialogFooter(
     className
   );
 }
+
+/** @since 4.0.0 */
+export const DEFAULT_DIALOG_CLASSNAMES: Readonly<CSSTransitionClassNames> = {
+  appear: "rmd-dialog--enter",
+  appearActive: "rmd-dialog--enter-active",
+  enter: "rmd-dialog--enter",
+  enterActive: "rmd-dialog--enter-active",
+  exit: "rmd-dialog--exit",
+  exitActive: "rmd-dialog--exit-active",
+};
+
+/** @since 4.0.0 */
+export const DEFAULT_DIALOG_TIMEOUT: Readonly<TransitionTimeout> = {
+  enter: 200,
+  exit: 150,
+};