Skip to content

Commit

Permalink
Merge branch 'main' into new-icons-metadata-Feb-May-2023
Browse files Browse the repository at this point in the history
  • Loading branch information
kodiakhq[bot] authored Jun 7, 2023
2 parents 323d37e + 6df7691 commit 5b76168
Show file tree
Hide file tree
Showing 4 changed files with 137 additions and 63 deletions.
21 changes: 12 additions & 9 deletions packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -3913,16 +3913,17 @@ Map {
"HeaderMenuItem" => Object {
"$$typeof": Symbol(react.forward_ref),
"propTypes": Object {
"as": Object {
"type": "elementType",
},
"children": Object {
"isRequired": true,
"type": "node",
},
"className": Object {
"type": "string",
},
"element": Object {
"type": "elementType",
},
"element": [Function],
"isActive": Object {
"type": "bool",
},
Expand All @@ -3944,16 +3945,17 @@ Map {
"prefix": "IBM",
},
"propTypes": Object {
"as": Object {
"type": "elementType",
},
"children": Object {
"isRequired": true,
"type": "node",
},
"className": Object {
"type": "string",
},
"element": Object {
"type": "elementType",
},
"element": [Function],
"href": Object {
"type": "string",
},
Expand Down Expand Up @@ -6993,16 +6995,17 @@ Map {
"SideNavLink" => Object {
"$$typeof": Symbol(react.forward_ref),
"propTypes": Object {
"as": Object {
"type": "elementType",
},
"children": Object {
"isRequired": true,
"type": "node",
},
"className": Object {
"type": "string",
},
"element": Object {
"type": "elementType",
},
"element": [Function],
"isActive": Object {
"type": "bool",
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,30 @@
*/

import PropTypes from 'prop-types';
import React from 'react';
import React, {
type ComponentProps,
type ForwardedRef,
forwardRef,
type ReactNode,
ElementType,
WeakValidationMap,
} from 'react';
import cx from 'classnames';
import Link, { LinkPropTypes } from './Link';
import Link, { LinkProps, LinkPropTypes } from './Link';
import { usePrefix } from '../../internal/usePrefix';
import deprecate from '../../prop-types/deprecate';

const HeaderMenuItem = React.forwardRef(function HeaderMenuItem(
type HeaderMenuItemProps<E extends ElementType> = LinkProps<E> & {
className?: string | undefined;
isActive?: boolean | undefined;
isCurrentPage?: boolean | undefined;
'aria-current'?: string | undefined;
children: ReactNode;
role?: ComponentProps<'li'>['role'];
tabIndex?: number | undefined;
};

function HeaderMenuItemRenderFunction<E extends ElementType = 'a'>(
{
className,
isActive,
Expand All @@ -22,8 +39,8 @@ const HeaderMenuItem = React.forwardRef(function HeaderMenuItem(
role,
tabIndex = 0,
...rest
},
ref
}: HeaderMenuItemProps<E>,
ref: ForwardedRef<ElementType>
) {
const prefix = usePrefix();
if (isCurrentPage) {
Expand All @@ -36,7 +53,6 @@ const HeaderMenuItem = React.forwardRef(function HeaderMenuItem(
[`${prefix}--header__menu-item--current`]:
isActive && ariaCurrent !== 'page',
});

return (
<li className={className} role={role}>
<Link
Expand All @@ -49,7 +65,16 @@ const HeaderMenuItem = React.forwardRef(function HeaderMenuItem(
</Link>
</li>
);
});
}

const HeaderMenuItem = forwardRef(HeaderMenuItemRenderFunction) as (<
E extends ElementType = 'a'
>(
props: HeaderMenuItemProps<E>
) => JSX.Element) & {
displayName?: string;
propTypes?: WeakValidationMap<HeaderMenuItemProps<any>>;
};

HeaderMenuItem.displayName = 'HeaderMenuItem';
HeaderMenuItem.propTypes = {
Expand Down
47 changes: 0 additions & 47 deletions packages/react/src/components/UIShell/Link.js

This file was deleted.

93 changes: 93 additions & 0 deletions packages/react/src/components/UIShell/Link.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
/**
* Copyright IBM Corp. 2016, 2023
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/

import PropTypes from 'prop-types';
import React, {
type ElementType,
type ForwardedRef,
forwardRef,
type WeakValidationMap,
type Ref,
} from 'react';
import deprecate from '../../prop-types/deprecate';
import { type PolymorphicProps } from '../../types/common';

// Note: Maybe we should use `as` instead of `element`? `as` appears to be
// standard and is used in other places in this project.

type LinkBaseProps<E extends ElementType> = {
/**
* @deprecated Use `as` instead
*/
element?: E | undefined;
ref?: Ref<E>;
};

export type LinkProps<E extends ElementType> = PolymorphicProps<
E,
LinkBaseProps<E>
>;

function LinkRenderFunction<E extends ElementType = 'a'>(
{
element,
as: BaseComponent,
// Captured here to prevent it from being passed into the created element.
// See https://github.com/carbon-design-system/carbon/issues/3970
isSideNavExpanded: _isSideNavExpanded,
...rest
}: LinkProps<E>,
ref: ForwardedRef<E>
) {
const BaseComponentAsAny = (BaseComponent ?? element ?? 'a') as any;
return <BaseComponentAsAny ref={ref} {...rest} />;
}

/**
* Link is a custom component that allows us to supporting rendering elements
* other than `a` in our markup. The goal is to allow users to support passing
* in their own components to support use-cases like `react-router` or
* `@reach/router`
*/
const Link = forwardRef(LinkRenderFunction) as (<E extends ElementType = 'a'>(
props: LinkProps<E>
) => JSX.Element) & {
displayName?: string;
propTypes?: WeakValidationMap<LinkProps<any>>;
};

const LinkPropTypes = {
/**
* Provide a custom element or component to render the top-level node for the
* component.
*/
as: PropTypes.elementType,

/**
* The base element to use to build the link. Defaults to `a`, can also accept
* alternative tag names or custom components like `Link` from `react-router`.
* @deprecated Use `as` instead
*
*/
element: deprecate(
PropTypes.elementType,
'The `element` prop for `Link` has been deprecated. Please use `as` ' +
'instead. This will be removed in the next major release.'
),

/**
* Property to indicate if the side nav container is open (or not). Use to
* keep local state and styling in step with the SideNav expansion state.
*/
isSideNavExpanded: PropTypes.bool,
};

Link.displayName = 'Link';
Link.propTypes = LinkPropTypes;

export { LinkPropTypes };
export default Link;

0 comments on commit 5b76168

Please sign in to comment.