@primer/components 0.0.0-2021104151625 → 0.0.0-2021104155729

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @primer/components
 
-## 0.0.0-2021104151625
+## 0.0.0-2021104155729
 
 ### Minor Changes
 

package/lib/ActionList2/Item.d.ts

@@ -46,9 +46,13 @@ export declare type ItemProps = {
      */
     disabled?: boolean;
     /**
-     * The ARIA role describing the function of `Item` component. `option` is a common value. |
+     * The ARIA role describing the function of `Item` component. `option` is a common value.
      */
     role?: AriaRole;
+    /**
+     * id to attach to the root element of the Item
+     */
+    id?: string;
     /**
      * Private API for use internally only. Used by LinkItem to wrap contents in an anchor
      */

package/lib/ActionList2/Item.js

@@ -70,6 +70,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
   selected = undefined,
   onSelect = () => null,
   sx = {},
+  id,
   _PrivateItemWrapper = ({
     children
   }) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children),
@@ -153,11 +154,12 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
   const clickHandler = _react.default.useCallback(event => {
     if (disabled) return;
     if (!event.defaultPrevented) onSelect(event);
-  }, [onSelect, disabled]);
+  }, [onSelect, disabled]); // use props.id if provided, otherwise generate one.
 
-  const labelId = (0, _ssr.useSSRSafeId)();
-  const inlineDescriptionId = (0, _ssr.useSSRSafeId)();
-  const blockDescriptionId = (0, _ssr.useSSRSafeId)();
+
+  const labelId = (0, _ssr.useSSRSafeId)(id);
+  const inlineDescriptionId = (0, _ssr.useSSRSafeId)(id && `${id}--inline-description`);
+  const blockDescriptionId = (0, _ssr.useSSRSafeId)(id && `${id}--block-description`);
   return /*#__PURE__*/_react.default.createElement(Slots, {
     context: {
       variant,

package/lib-esm/ActionList2/Item.d.ts

@@ -46,9 +46,13 @@ export declare type ItemProps = {
      */
     disabled?: boolean;
     /**
-     * The ARIA role describing the function of `Item` component. `option` is a common value. |
+     * The ARIA role describing the function of `Item` component. `option` is a common value.
      */
     role?: AriaRole;
+    /**
+     * id to attach to the root element of the Item
+     */
+    id?: string;
     /**
      * Private API for use internally only. Used by LinkItem to wrap contents in an anchor
      */

package/lib-esm/ActionList2/Item.js

@@ -49,6 +49,7 @@ export const Item = /*#__PURE__*/React.forwardRef(({
   selected = undefined,
   onSelect = () => null,
   sx = {},
+  id,
   _PrivateItemWrapper = ({
     children
   }) => /*#__PURE__*/React.createElement(React.Fragment, null, children),
@@ -130,10 +131,11 @@ export const Item = /*#__PURE__*/React.forwardRef(({
   const clickHandler = React.useCallback(event => {
     if (disabled) return;
     if (!event.defaultPrevented) onSelect(event);
-  }, [onSelect, disabled]);
-  const labelId = useSSRSafeId();
-  const inlineDescriptionId = useSSRSafeId();
-  const blockDescriptionId = useSSRSafeId();
+  }, [onSelect, disabled]); // use props.id if provided, otherwise generate one.
+
+  const labelId = useSSRSafeId(id);
+  const inlineDescriptionId = useSSRSafeId(id && `${id}--inline-description`);
+  const blockDescriptionId = useSSRSafeId(id && `${id}--block-description`);
   return /*#__PURE__*/React.createElement(Slots, {
     context: {
       variant,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "0.0.0-2021104151625",
+  "version": "0.0.0-2021104155729",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",