@opentrons/components 0.1.6-alpha.7 → 0.1.6-alpha.9

package/lib/tooltips/{Tooltip.d.ts → LegacyTooltip.d.ts}

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { CSSProperties } from 'react';
 import type { Placement } from './types';
 import type { StyleProps } from '../primitives';
-export interface TooltipProps extends StyleProps {
+export interface LegacyTooltipProps extends StyleProps {
     /** Whether or not the tooltip should be rendered */
     visible: boolean;
     /** Contents of the tooltip */
@@ -25,7 +25,7 @@ export interface TooltipProps extends StyleProps {
  * Tooltip component that renders based on its `visible` prop. For use with the
  * `useTooltip` and `useHoverTooltip` hooks. See examples in `Tooltip.md`.
  */
-export declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>;
+export declare const LegacyTooltip: React.ForwardRefExoticComponent<LegacyTooltipProps & React.RefAttributes<HTMLDivElement>>;
 export interface ArrowProps {
     placement: Placement | null;
     arrowRef: React.RefCallback<HTMLElement>;

package/lib/tooltips/index.d.ts

@@ -1,6 +1,6 @@
 export * from './DeprecatedTooltip';
 export * from './HoverTooltip';
-export * from './Tooltip';
+export * from './LegacyTooltip';
 export * from './useTooltip';
 export * from './useHoverTooltip';
 export * from './usePopper';

package/lib/ui-style-constants/responsiveness.d.ts

@@ -1,2 +1,3 @@
 export declare const touchscreenMediaQuerySpecs = "(height: 600px) and (width: 1024px)";
+export declare const isTouchscreenDynamic: () => boolean;
 export declare const isTouchscreen: boolean;

package/lib/ui-style-constants/typography.d.ts

@@ -26,6 +26,7 @@ export declare const lineHeight20 = "1.25rem";
 export declare const lineHeight18 = "1.125rem";
 export declare const lineHeight16 = "1rem";
 export declare const lineHeight12 = "0.75rem";
+export declare const lineHeightNormal = "normal";
 export declare const fontStyleNormal = "normal";
 export declare const fontStyleItalic = "italic";
 export declare const textTransformNone = "none";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentrons/components",
-  "version": "0.1.6-alpha.7",
+  "version": "0.1.6-alpha.9",
   "description": "React components library for Opentrons' projects",
   "source": "src/index.ts",
   "types": "lib/index.d.ts",
@@ -19,12 +19,10 @@
   "homepage": "https://github.com/Opentrons/opentrons#readme",
   "peerDependencies": {
     "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-router-dom": "5.3.4",
-    "@types/react-router-dom": "5.3.3"
+    "react-dom": "18.2.0"
   },
   "dependencies": {
-    "@opentrons/shared-data": "0.1.6-alpha.7",
+    "@opentrons/shared-data": "0.1.6-alpha.9",
     "@popperjs/core": "2.1.1",
     "@react-spring/types": "9.6.1",
     "@react-spring/web": "9.6.1",
@@ -33,12 +31,11 @@
     "@types/styled-components": "^5.1.26",
     "@types/webpack-env": "^1.16.0",
     "classnames": "2.2.5",
-    "interactjs": "^1.10.17",
+    "interactjs": "^1.10.27",
     "lodash": "4.17.21",
-    "react-i18next": "13.5.0",
+    "react-i18next": "14.0.0",
     "react-popper": "1.0.0",
     "react-remove-scroll": "2.4.3",
-    "react-router-dom": "5.3.4",
     "react-select": "5.4.0",
     "redux": "4.0.5",
     "styled-components": "5.3.6"

package/{vite.config.ts → vite.config.mts}

@@ -10,14 +10,18 @@ import lostCss from 'lost'
 export default defineConfig({
   build: {
     // Relative to the root
-    ssr: 'src/index.ts',
     outDir: 'lib',
     // do not delete the outdir, typescript types might live there and we dont want to delete them
     emptyOutDir: false,
-    commonjsOptions: {
-      transformMixedEsModules: true,
-      esmExternals: true,
+    lib: {
+      entry: 'src/index.ts',
+      formats: ['es', 'cjs'], // Generate both ES Module and CommonJS outputs
+      fileName: (format) => (format === 'es' ? 'index.mjs' : 'index.cjs'),
     },
+    rollupOptions: {
+      external: ['react', 'react-dom', 'styled-components'], // Ensure peer dependencies are not bundled
+    },
+    target: 'es2017', // Transpile down to a compatible version for Next.js (for Protocol Library)
   },
   plugins: [
     react({
@@ -32,6 +36,7 @@ export default defineConfig({
     esbuildOptions: {
       target: 'es2020',
     },
+    exclude: ['styled-components'], // Avoid pre-bundling styled-components
   },
   css: {
     postcss: {
@@ -55,5 +60,6 @@ export default defineConfig({
         '../components/src/index.module.css'
       ),
     },
+    dedupe: ['styled-components'], // Prevent duplicate styled-components instances
   },
 })

package/lib/lists/ListItem.d.ts

@@ -1,37 +0,0 @@
-import * as React from 'react';
-import type { IconName } from '../icons';
-interface ListItemProps {
-    /** click handler */
-    onClick?: (event: React.SyntheticEvent) => unknown;
-    /** mouse enter handler */
-    onMouseEnter?: (event: React.MouseEvent) => unknown;
-    /** mouse leave handler */
-    onMouseLeave?: (event: React.MouseEvent) => unknown;
-    /** mouse enter handler */
-    onPointerEnter?: (event: React.PointerEvent) => unknown;
-    /** mouse leave handler */
-    onPointerLeave?: (event: React.PointerEvent) => unknown;
-    /** if URL is specified, ListItem is wrapped in a React Router NavLink */
-    url?: string | null;
-    /** if URL is specified NavLink can receive an active class name */
-    activeClassName?: string;
-    /** if URL is specified NavLink can receive an exact property for matching routes */
-    exact?: boolean;
-    /** Additional class name */
-    className?: string;
-    /** if disabled, the onClick handler will be disabled */
-    isDisabled?: boolean;
-    /** name constant of the icon to display */
-    iconName?: IconName;
-    'aria-describedby'?: string;
-    ref?: {
-        current: Element | null;
-    } | ((current: Element | null) => unknown);
-    children?: React.ReactNode;
-}
-/**
- * A styled `<li>` with an optional icon, and an optional url for a React Router `NavLink`
- *
- */
-export declare const ListItem: React.ForwardRefExoticComponent<Omit<ListItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
-export {};

package/lib/modals/BaseModal.d.ts

@@ -1,26 +0,0 @@
-import * as React from 'react';
-import type { StyleProps } from '../primitives';
-export interface BaseModalProps extends StyleProps {
-    /** Overlay color, defaults to `OVERLAY_GRAY_90` */
-    overlayColor?: string;
-    /** Optional close on outside click **/
-    onOutsideClick?: React.MouseEventHandler;
-    /** Optional sticky header */
-    header?: React.ReactNode;
-    /** Option to turn off headerStyles */
-    noHeaderStyles?: boolean;
-    /** Optional sticky footer */
-    footer?: React.ReactNode;
-    /** Modal content */
-    children?: React.ReactNode;
-}
-/**
- * A BaseModal is a layout component for building more specific modals.
- *
- * It includes:
- * - An overlay, customizable with the `overlayColor` prop
- * - A content area, with `overflow-y: auto` and customizable with style props
- * - An optional sticky header
- * - An optional sticky footer
- */
-export declare function BaseModal(props: BaseModalProps): JSX.Element;

package/lib/modals/ModalPage.d.ts

@@ -1,16 +0,0 @@
-import * as React from 'react';
-import { Box } from '../primitives';
-import type { TitleBarProps } from '../structure';
-export interface ModalPageProps {
-    /** Props for title bar at top of modal page */
-    titleBar: TitleBarProps;
-    contentsClassName?: string;
-    heading?: React.ReactNode;
-    children?: React.ReactNode;
-    innerProps?: React.ComponentProps<typeof Box>;
-    outerProps?: React.ComponentProps<typeof Box>;
-}
-/**
- * @deprecated Use `Interstitial` instead
- */
-export declare function ModalPage(props: ModalPageProps): JSX.Element;

package/lib/molecules/LocationIcon/index.d.ts

@@ -1,15 +0,0 @@
-import type { IconName } from '../../icons';
-import type { StyleProps } from '../../primitives';
-interface SlotLocationProps extends StyleProps {
-    /** name constant of the slot to display */
-    slotName: string;
-    iconName?: undefined;
-}
-interface HardwareIconProps extends StyleProps {
-    /** hardware icon name */
-    iconName: IconName;
-    slotName?: undefined;
-}
-type LocationIconProps = SlotLocationProps | HardwareIconProps;
-export declare function LocationIcon({ slotName, iconName, color, ...styleProps }: LocationIconProps): JSX.Element;
-export {};

package/lib/molecules/ParametersTable/InfoScreen.d.ts

@@ -1,6 +0,0 @@
-interface InfoScreenProps {
-    contentType: 'parameters' | 'moduleControls' | 'runNotStarted' | 'labware';
-    t?: any;
-}
-export declare function InfoScreen({ contentType, t }: InfoScreenProps): JSX.Element;
-export {};

package/lib/molecules/RoundTab.d.ts

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import { Btn } from '../primitives';
-interface RoundTabProps extends React.ComponentProps<typeof Btn> {
-    isCurrent: boolean;
-    disabled?: boolean;
-}
-export declare function RoundTab({ isCurrent, children, disabled, ...restProps }: RoundTabProps): JSX.Element;
-export {};

package/lib/structure/PageTabs.d.ts

@@ -1,11 +0,0 @@
-interface TabProps {
-    title: string;
-    href: string;
-    isActive: boolean;
-    isDisabled: boolean;
-}
-export interface PageTabProps {
-    pages: TabProps[];
-}
-export declare function PageTabs(props: PageTabProps): JSX.Element;
-export {};

package/lib/tabbedNav/NavTab.d.ts

@@ -1,25 +0,0 @@
-import * as React from 'react';
-import type { IconName } from '../icons';
-export interface NavTabProps {
-    /** optional click event for nav button */
-    onClick?: React.MouseEventHandler;
-    /** optional url for nav button route */
-    url?: string;
-    /** position a single button on the bottom of the page */
-    isBottom?: boolean;
-    /** classes to apply */
-    className?: string;
-    /** id */
-    id?: string;
-    /** disabled attribute (setting disabled removes onClick) */
-    disabled?: boolean;
-    /** optional title to display below the icon */
-    title?: string;
-    /** Icon name for button's icon */
-    iconName: IconName;
-    /** Display a notification dot */
-    notification?: boolean;
-    /** selected styling (can also use react-router & `activeClassName`) */
-    selected?: boolean;
-}
-export declare function NavTab(props: NavTabProps): JSX.Element;

package/lib/tabbedNav/OutsideLinkTab.d.ts

@@ -1,24 +0,0 @@
-import * as React from 'react';
-import type { IconName } from '../icons';
-export interface OutsideLinkTabProps {
-    /** optional click event for nav button */
-    onClick?: React.MouseEventHandler;
-    /** link to outside URL */
-    to: string;
-    /** position a single button on the bottom of the page */
-    isBottom?: boolean;
-    /** classes to apply */
-    className?: string;
-    /** disabled attribute (setting disabled removes onClick) */
-    disabled?: boolean;
-    /** optional title to display below the icon */
-    title?: string;
-    /** Icon name for button's icon */
-    iconName: IconName;
-    /** Display a notification dot */
-    notification?: boolean;
-    /** selected styling (can also use react-router & `activeClassName`) */
-    selected?: boolean;
-}
-/** Very much like NavTab, but used for opening external links in a new tab/window */
-export declare function OutsideLinkTab(props: OutsideLinkTabProps): JSX.Element;

package/lib/tabbedNav/TabbedNavBar.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-export interface TabbedNavBarProps {
-    className?: string;
-    topChildren?: React.ReactNode;
-    bottomChildren?: React.ReactNode;
-}
-export declare function TabbedNavBar(props: TabbedNavBarProps): JSX.Element;

package/lib/tabbedNav/index.d.ts

@@ -1,3 +0,0 @@
-export * from './TabbedNavBar';
-export * from './NavTab';
-export * from './OutsideLinkTab';