Socket
Socket
Sign inDemoInstall

@atlaskit/primitives

Package Overview
Dependencies
Maintainers
1
Versions
171
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@atlaskit/primitives - npm Package Compare versions

Comparing version 7.0.3 to 7.1.0

16

CHANGELOG.md
# @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 @@

21

dist/cjs/components/anchor.js

@@ -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 @@

2

dist/cjs/components/pressable.js

@@ -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 @@ },

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc