@atlaskit/primitives
Advanced tools
Comparing version 7.0.3 to 7.1.0
# @atlaskit/primitives | ||
## 7.1.0 | ||
### Minor Changes | ||
- [#110702](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110702) | ||
[`b8c2eefeb195b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b8c2eefeb195b) - - | ||
Anchor and Pressable primitives no longer require `children`, so labels can be supplied through | ||
aria attributes if required | ||
### Patch Changes | ||
- [#110702](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110702) | ||
[`b8c2eefeb195b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b8c2eefeb195b) - - | ||
Fixed a bug with Anchor, where the "(opens new window)" label was not being automatically appended | ||
to `aria-label` or `aria-labelledby`. | ||
## 7.0.3 | ||
@@ -4,0 +20,0 @@ |
@@ -14,2 +14,3 @@ "use strict"; | ||
var _react = _interopRequireWildcard(require("react")); | ||
var _reactUid = require("react-uid"); | ||
var _tinyInvariant = _interopRequireDefault(require("tiny-invariant")); | ||
@@ -23,3 +24,3 @@ var _analyticsNext = require("@atlaskit/analytics-next"); | ||
var _box = _interopRequireDefault(require("./box")); | ||
var _excluded = ["href", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "testId", "xcss", "target", "onClick", "interactionName", "componentName", "analyticsContext"]; | ||
var _excluded = ["href", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "testId", "xcss", "target", "onClick", "interactionName", "componentName", "analyticsContext", "aria-label", "aria-labelledby"]; | ||
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); } | ||
@@ -51,2 +52,3 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } | ||
var IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/; | ||
var OPENS_NEW_WINDOW_LABEL = '(opens new window)'; | ||
var AnchorNoRef = function AnchorNoRef(_ref, ref) { | ||
@@ -71,2 +73,4 @@ var href = _ref.href, | ||
analyticsContext = _ref.analyticsContext, | ||
ariaLabel = _ref['aria-label'], | ||
ariaLabelledBy = _ref['aria-labelledby'], | ||
htmlAttributes = (0, _objectWithoutProperties2.default)(_ref, _excluded); | ||
@@ -78,2 +82,7 @@ var interactionContext = (0, _react.useContext)(_interactionContext.default); | ||
}, [providedOnClick, interactionContext, interactionName]); | ||
// TODO: Use React 18's useId() hook when we update. | ||
// eslint-disable-next-line @repo/internal/react/disallow-unstable-values | ||
var opensNewWindowLabelId = (0, _reactUid.uid)({ | ||
ariaLabelledBy: ariaLabelledBy | ||
}); | ||
var onClick = (0, _analyticsNext.usePlatformLeafEventHandler)({ | ||
@@ -84,3 +93,3 @@ fn: handleClick, | ||
packageName: "@atlaskit/primitives", | ||
packageVersion: "7.0.3", | ||
packageVersion: "7.1.0", | ||
analyticsData: analyticsContext, | ||
@@ -126,7 +135,11 @@ actionSubject: 'link' | ||
paddingInlineEnd: paddingInlineEnd, | ||
onClick: onClick | ||
onClick: onClick, | ||
"aria-label": ariaLabel && target === '_blank' && !ariaLabelledBy ? "".concat(ariaLabel, " ").concat(OPENS_NEW_WINDOW_LABEL) : ariaLabel, | ||
"aria-labelledby": ariaLabelledBy && target === '_blank' ? "".concat(ariaLabelledBy, " ").concat(opensNewWindowLabelId) : ariaLabelledBy | ||
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage | ||
, | ||
xcss: styles | ||
}), children, target === '_blank' && /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, null, "(opens new window)")); | ||
}), children, target === '_blank' && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, { | ||
id: opensNewWindowLabelId | ||
}, OPENS_NEW_WINDOW_LABEL)); | ||
}; | ||
@@ -133,0 +146,0 @@ |
@@ -81,3 +81,3 @@ "use strict"; | ||
packageName: "@atlaskit/primitives", | ||
packageVersion: "7.0.3", | ||
packageVersion: "7.1.0", | ||
analyticsData: analyticsContext, | ||
@@ -84,0 +84,0 @@ actionSubject: 'button' |
import _extends from "@babel/runtime/helpers/extends"; | ||
import React, { forwardRef, useCallback, useContext } from 'react'; | ||
import { uid } from 'react-uid'; | ||
import invariant from 'tiny-invariant'; | ||
@@ -35,2 +36,3 @@ import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next'; | ||
const IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/; | ||
const OPENS_NEW_WINDOW_LABEL = '(opens new window)'; | ||
const AnchorNoRef = ({ | ||
@@ -54,2 +56,4 @@ href, | ||
analyticsContext, | ||
'aria-label': ariaLabel, | ||
'aria-labelledby': ariaLabelledBy, | ||
...htmlAttributes | ||
@@ -62,2 +66,7 @@ }, ref) => { | ||
}, [providedOnClick, interactionContext, interactionName]); | ||
// TODO: Use React 18's useId() hook when we update. | ||
// eslint-disable-next-line @repo/internal/react/disallow-unstable-values | ||
const opensNewWindowLabelId = uid({ | ||
ariaLabelledBy | ||
}); | ||
const onClick = usePlatformLeafEventHandler({ | ||
@@ -68,3 +77,3 @@ fn: handleClick, | ||
packageName: "@atlaskit/primitives", | ||
packageVersion: "7.0.3", | ||
packageVersion: "7.1.0", | ||
analyticsData: analyticsContext, | ||
@@ -110,7 +119,11 @@ actionSubject: 'link' | ||
paddingInlineEnd: paddingInlineEnd, | ||
onClick: onClick | ||
onClick: onClick, | ||
"aria-label": ariaLabel && target === '_blank' && !ariaLabelledBy ? `${ariaLabel} ${OPENS_NEW_WINDOW_LABEL}` : ariaLabel, | ||
"aria-labelledby": ariaLabelledBy && target === '_blank' ? `${ariaLabelledBy} ${opensNewWindowLabelId}` : ariaLabelledBy | ||
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage | ||
, | ||
xcss: styles | ||
}), children, target === '_blank' && /*#__PURE__*/React.createElement(VisuallyHidden, null, "(opens new window)")); | ||
}), children, target === '_blank' && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && /*#__PURE__*/React.createElement(VisuallyHidden, { | ||
id: opensNewWindowLabelId | ||
}, OPENS_NEW_WINDOW_LABEL)); | ||
}; | ||
@@ -117,0 +130,0 @@ |
@@ -67,3 +67,3 @@ import _extends from "@babel/runtime/helpers/extends"; | ||
packageName: "@atlaskit/primitives", | ||
packageVersion: "7.0.3", | ||
packageVersion: "7.1.0", | ||
analyticsData: analyticsContext, | ||
@@ -70,0 +70,0 @@ actionSubject: 'button' |
@@ -5,4 +5,5 @@ import _extends from "@babel/runtime/helpers/extends"; | ||
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties"; | ||
var _excluded = ["href", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "testId", "xcss", "target", "onClick", "interactionName", "componentName", "analyticsContext"]; | ||
var _excluded = ["href", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "testId", "xcss", "target", "onClick", "interactionName", "componentName", "analyticsContext", "aria-label", "aria-labelledby"]; | ||
import React, { forwardRef, useCallback, useContext } from 'react'; | ||
import { uid } from 'react-uid'; | ||
import invariant from 'tiny-invariant'; | ||
@@ -40,2 +41,3 @@ import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next'; | ||
var IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/; | ||
var OPENS_NEW_WINDOW_LABEL = '(opens new window)'; | ||
var AnchorNoRef = function AnchorNoRef(_ref, ref) { | ||
@@ -60,2 +62,4 @@ var href = _ref.href, | ||
analyticsContext = _ref.analyticsContext, | ||
ariaLabel = _ref['aria-label'], | ||
ariaLabelledBy = _ref['aria-labelledby'], | ||
htmlAttributes = _objectWithoutProperties(_ref, _excluded); | ||
@@ -67,2 +71,7 @@ var interactionContext = useContext(InteractionContext); | ||
}, [providedOnClick, interactionContext, interactionName]); | ||
// TODO: Use React 18's useId() hook when we update. | ||
// eslint-disable-next-line @repo/internal/react/disallow-unstable-values | ||
var opensNewWindowLabelId = uid({ | ||
ariaLabelledBy: ariaLabelledBy | ||
}); | ||
var onClick = usePlatformLeafEventHandler({ | ||
@@ -73,3 +82,3 @@ fn: handleClick, | ||
packageName: "@atlaskit/primitives", | ||
packageVersion: "7.0.3", | ||
packageVersion: "7.1.0", | ||
analyticsData: analyticsContext, | ||
@@ -115,7 +124,11 @@ actionSubject: 'link' | ||
paddingInlineEnd: paddingInlineEnd, | ||
onClick: onClick | ||
onClick: onClick, | ||
"aria-label": ariaLabel && target === '_blank' && !ariaLabelledBy ? "".concat(ariaLabel, " ").concat(OPENS_NEW_WINDOW_LABEL) : ariaLabel, | ||
"aria-labelledby": ariaLabelledBy && target === '_blank' ? "".concat(ariaLabelledBy, " ").concat(opensNewWindowLabelId) : ariaLabelledBy | ||
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage | ||
, | ||
xcss: styles | ||
}), children, target === '_blank' && /*#__PURE__*/React.createElement(VisuallyHidden, null, "(opens new window)")); | ||
}), children, target === '_blank' && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && /*#__PURE__*/React.createElement(VisuallyHidden, { | ||
id: opensNewWindowLabelId | ||
}, OPENS_NEW_WINDOW_LABEL)); | ||
}; | ||
@@ -122,0 +135,0 @@ |
@@ -71,3 +71,3 @@ import _extends from "@babel/runtime/helpers/extends"; | ||
packageName: "@atlaskit/primitives", | ||
packageVersion: "7.0.3", | ||
packageVersion: "7.1.0", | ||
analyticsData: analyticsContext, | ||
@@ -74,0 +74,0 @@ actionSubject: 'button' |
@@ -1,11 +0,7 @@ | ||
import React, { type ReactNode, type Ref } from 'react'; | ||
import React, { type Ref } from 'react'; | ||
import { type UIAnalyticsEvent } from '@atlaskit/analytics-next'; | ||
import { type RouterLinkComponentProps } from '@atlaskit/app-provider'; | ||
import { type BoxProps } from './box'; | ||
export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<'a'>, 'href' | 'as' | 'children' | 'style' | 'onClick'> & { | ||
export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<'a'>, 'href' | 'as' | 'style' | 'onClick'> & { | ||
/** | ||
* `children` should be defined to ensure links have text. | ||
*/ | ||
children: ReactNode; | ||
/** | ||
* Handler called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details. | ||
@@ -29,3 +25,3 @@ */ | ||
}; | ||
declare const AnchorNoRef: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, testId, xcss: xcssStyles, target, onClick: providedOnClick, interactionName, componentName, analyticsContext, ...htmlAttributes }: AnchorProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element; | ||
declare const AnchorNoRef: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, testId, xcss: xcssStyles, target, onClick: providedOnClick, interactionName, componentName, analyticsContext, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...htmlAttributes }: AnchorProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element; | ||
/** | ||
@@ -32,0 +28,0 @@ * __Anchor__ |
@@ -1,10 +0,5 @@ | ||
import React, { type ReactNode } from 'react'; | ||
import React from 'react'; | ||
import { type UIAnalyticsEvent } from '@atlaskit/analytics-next'; | ||
import { type BoxProps } from './box'; | ||
export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'children' | 'style' | 'onClick'> & { | ||
/** | ||
* `children` should be defined to ensure buttons are not empty, | ||
* because they should have labels. | ||
*/ | ||
children: ReactNode; | ||
export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'style' | 'onClick'> & { | ||
isDisabled?: boolean; | ||
@@ -37,8 +32,3 @@ /** | ||
*/ | ||
declare const Pressable: React.ForwardRefExoticComponent<Pick<Omit<BoxProps<"button">, "style" | "disabled" | "children" | "as" | "onClick"> & { | ||
/** | ||
* `children` should be defined to ensure buttons are not empty, | ||
* because they should have labels. | ||
*/ | ||
children: ReactNode; | ||
declare const Pressable: React.ForwardRefExoticComponent<Pick<Omit<BoxProps<"button">, "style" | "disabled" | "as" | "onClick"> & { | ||
isDisabled?: boolean | undefined; | ||
@@ -45,0 +35,0 @@ /** |
@@ -1,11 +0,7 @@ | ||
import React, { type ReactNode, type Ref } from 'react'; | ||
import React, { type Ref } from 'react'; | ||
import { type UIAnalyticsEvent } from '@atlaskit/analytics-next'; | ||
import { type RouterLinkComponentProps } from '@atlaskit/app-provider'; | ||
import { type BoxProps } from './box'; | ||
export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<'a'>, 'href' | 'as' | 'children' | 'style' | 'onClick'> & { | ||
export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<'a'>, 'href' | 'as' | 'style' | 'onClick'> & { | ||
/** | ||
* `children` should be defined to ensure links have text. | ||
*/ | ||
children: ReactNode; | ||
/** | ||
* Handler called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details. | ||
@@ -29,3 +25,3 @@ */ | ||
}; | ||
declare const AnchorNoRef: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, testId, xcss: xcssStyles, target, onClick: providedOnClick, interactionName, componentName, analyticsContext, ...htmlAttributes }: AnchorProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element; | ||
declare const AnchorNoRef: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, testId, xcss: xcssStyles, target, onClick: providedOnClick, interactionName, componentName, analyticsContext, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...htmlAttributes }: AnchorProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element; | ||
/** | ||
@@ -32,0 +28,0 @@ * __Anchor__ |
@@ -1,10 +0,5 @@ | ||
import React, { type ReactNode } from 'react'; | ||
import React from 'react'; | ||
import { type UIAnalyticsEvent } from '@atlaskit/analytics-next'; | ||
import { type BoxProps } from './box'; | ||
export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'children' | 'style' | 'onClick'> & { | ||
/** | ||
* `children` should be defined to ensure buttons are not empty, | ||
* because they should have labels. | ||
*/ | ||
children: ReactNode; | ||
export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'style' | 'onClick'> & { | ||
isDisabled?: boolean; | ||
@@ -37,8 +32,3 @@ /** | ||
*/ | ||
declare const Pressable: React.ForwardRefExoticComponent<Pick<Omit<BoxProps<"button">, "style" | "disabled" | "children" | "as" | "onClick"> & { | ||
/** | ||
* `children` should be defined to ensure buttons are not empty, | ||
* because they should have labels. | ||
*/ | ||
children: ReactNode; | ||
declare const Pressable: React.ForwardRefExoticComponent<Pick<Omit<BoxProps<"button">, "style" | "disabled" | "as" | "onClick"> & { | ||
isDisabled?: boolean | undefined; | ||
@@ -45,0 +35,0 @@ /** |
{ | ||
"name": "@atlaskit/primitives", | ||
"version": "7.0.3", | ||
"version": "7.1.0", | ||
"description": "Primitives are token-backed low-level building blocks.", | ||
@@ -137,2 +137,3 @@ "publishConfig": { | ||
"bind-event-listener": "^3.0.0", | ||
"react-uid": "^2.2.0", | ||
"tiny-invariant": "^1.2.0" | ||
@@ -139,0 +140,0 @@ }, |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
1860489
15079
14
+ Addedreact-uid@^2.2.0