@atom-learning/components 2.66.6 → 2.66.7

package/dist/types/index.d.ts

@@ -1 +1,2 @@
 export * from './navigatorActions.types';
+export * from './polymorphicComponentProp.types';

package/dist/types/polymorphicComponentProp.types.d.ts

@@ -0,0 +1,60 @@
+/**
+ * The goal of these types is to make sure that our polymorphic components accept
+ * the correct attributes, and any ref passed onto the polymorphic component has
+ * the correct type.
+ *
+ * For example, when you pass `as="a"`, it should accept an `href` attribute and,
+ * the `ref` should be of type `HTMLAnchorElement`.
+ *
+ * If you pass `as="button"` instead, it should not accept `href` and the `ref`
+ * should be of type `HTMLButtonElement`.
+ *
+ *
+ * Taken from:
+ * https://blog.logrocket.com/build-strongly-typed-polymorphic-components-react-typescript/
+ */
+/// <reference types="react" />
+/**
+ * A generic that is used to capture the `as` prop value
+ */
+declare type AsProp<C extends React.ElementType> = {
+    as?: C;
+};
+/**
+ * A type of the `as` prop, plus any custom defined props.
+ */
+declare type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
+/**
+ * Adds a typed `as` prop to a list of props.
+ */
+declare type PolymorphicComponentProp<C extends React.ElementType, Props = Record<string, unknown>> = React.PropsWithChildren<Props & AsProp<C>> & Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
+/**
+ * Type to capture the `ref` prop type from the element type
+ * passed into the `as` prop.
+ */
+export declare type PolymorphicRef<C extends React.ElementType> = React.ComponentPropsWithRef<C>['ref'];
+/**
+ * Usage example:
+ *
+ * ```tsx
+ * type MyComponentProps<C extends React.ElementType> = PolymorphicComponentPropWithRef<
+ *   C,
+ *   { myProp: string }
+ * >
+ *
+ * const MyComponent: <C extends React.ElementType = 'span'>(
+ *   props: MyComponentProps<C>
+ * ) => React.ReactElement | null = React.forwardRef(
+ *   <C extends React.ElementType = 'span'>(
+ *     { children, as, myProp }: MyComponentProps<C>,
+ *     ref?: MyComponentProps<C>['ref']
+ *   ) => {
+ *     ...
+ *   }
+ * )
+ * ```
+ */
+export declare type PolymorphicComponentPropWithRef<C extends React.ElementType, Props = Record<string, unknown>> = PolymorphicComponentProp<C, Props> & {
+    ref?: PolymorphicRef<C>;
+};
+export {};

package/package.json

@@ -4,7 +4,7 @@
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",
   "module": "dist/index.js",
-  "version": "2.66.6",
+  "version": "2.66.7",
   "description": "",
   "files": [
     "dist"