@cloudscape-design/components 3.0.109 → 3.0.111

package/tiles/tile.js

@@ -5,23 +5,25 @@ import React, { useRef } from 'react';
 import RadioButton from '../radio-group/radio-button';
 import styles from './styles.css.js';
 import { fireNonCancelableEvent } from '../internal/events';
-export function Tile(_a) {
+import { useMergeRefs } from '../internal/hooks/use-merge-refs';
+export var Tile = React.forwardRef(function (_a, forwardedRef) {
     var _b, _c, _d, _e, _f;
     var item = _a.item, selected = _a.selected, name = _a.name, breakpoint = _a.breakpoint, onChange = _a.onChange;
-    var radioButtonRef = useRef(null);
+    var internalRef = useRef(null);
     var controlId = item.controlId || "".concat(name, "-value-").concat(item.value);
+    var mergedRef = useMergeRefs(internalRef, forwardedRef);
     return (React.createElement("div", { className: clsx(styles['tile-container'], (_b = {}, _b[styles['has-metadata']] = item.description || item.image, _b), (_c = {}, _c[styles.selected] = selected, _c), (_d = {}, _d[styles.disabled] = !!item.disabled, _d), styles["breakpoint-".concat(breakpoint)]), "data-value": item.value, onClick: function () {
             var _a;
             if (item.disabled) {
                 return;
             }
-            (_a = radioButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            (_a = internalRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             if (!selected) {
                 fireNonCancelableEvent(onChange, { value: item.value });
             }
         } },
         React.createElement("div", { className: clsx(styles.control, (_e = {}, _e[styles['no-image']] = !item.image, _e)) },
-            React.createElement(RadioButton, { checked: selected, ref: radioButtonRef, name: name, value: item.value, label: item.label, description: item.description, disabled: item.disabled, controlId: controlId })),
+            React.createElement(RadioButton, { checked: selected, ref: mergedRef, name: name, value: item.value, label: item.label, description: item.description, disabled: item.disabled, controlId: controlId })),
         item.image && React.createElement("div", { className: clsx(styles.image, (_f = {}, _f[styles.disabled] = !!item.disabled, _f)) }, item.image)));
-}
+});
 //# sourceMappingURL=tile.js.map

package/tiles/tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"tile.js","sourceRoot":"","sources":["../../../src/tiles/tile.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAGtC,OAAO,WAAW,MAAM,6BAA6B,CAAC;AACtD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAU5D,MAAM,UAAU,IAAI,CAAC,EAAyD;;QAAvD,IAAI,UAAA,EAAE,QAAQ,cAAA,EAAE,IAAI,UAAA,EAAE,UAAU,gBAAA,EAAE,QAAQ,cAAA;IAC/D,IAAM,cAAc,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACtD,IAAM,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,UAAG,IAAI,oBAAU,IAAI,CAAC,KAAK,CAAE,CAAC;IAElE,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,gBAAgB,CAAC,YACtB,GAAC,MAAM,CAAC,cAAc,CAAC,IAAG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,iBACxD,GAAC,MAAM,CAAC,QAAQ,IAAG,QAAQ,iBAC3B,GAAC,MAAM,CAAC,QAAQ,IAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,OACpC,MAAM,CAAC,qBAAc,UAAU,CAAE,CAAC,CACnC,gBACW,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE;;YACP,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,OAAO;aACR;YACD,MAAA,cAAc,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;YAChC,IAAI,CAAC,QAAQ,EAAE;gBACb,sBAAsB,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;aACzD;QACH,CAAC;QAED,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,YAAI,GAAC,MAAM,CAAC,UAAU,CAAC,IAAG,CAAC,IAAI,CAAC,KAAK,MAAG;YACzE,oBAAC,WAAW,IACV,OAAO,EAAE,QAAQ,EACjB,GAAG,EAAE,cAAc,EACnB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,SAAS,GACpB,CACE;QACL,IAAI,CAAC,KAAK,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,YAAI,GAAC,MAAM,CAAC,QAAQ,IAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,MAAG,IAAG,IAAI,CAAC,KAAK,CAAO,CACzG,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useRef } from 'react';\n\nimport { TilesProps } from './interfaces';\nimport RadioButton from '../radio-group/radio-button';\nimport styles from './styles.css.js';\n\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { fireNonCancelableEvent } from '../internal/events';\n\ninterface TileProps {\n  item: TilesProps.TilesDefinition;\n  selected: boolean;\n  name: string;\n  breakpoint: ReturnType<typeof useContainerBreakpoints>[0];\n  onChange: TilesProps['onChange'];\n}\n\nexport function Tile({ item, selected, name, breakpoint, onChange }: TileProps) {\n  const radioButtonRef = useRef<HTMLInputElement>(null);\n  const controlId = item.controlId || `${name}-value-${item.value}`;\n\n  return (\n    <div\n      className={clsx(\n        styles['tile-container'],\n        { [styles['has-metadata']]: item.description || item.image },\n        { [styles.selected]: selected },\n        { [styles.disabled]: !!item.disabled },\n        styles[`breakpoint-${breakpoint}`]\n      )}\n      data-value={item.value}\n      onClick={() => {\n        if (item.disabled) {\n          return;\n        }\n        radioButtonRef.current?.focus();\n        if (!selected) {\n          fireNonCancelableEvent(onChange, { value: item.value });\n        }\n      }}\n    >\n      <div className={clsx(styles.control, { [styles['no-image']]: !item.image })}>\n        <RadioButton\n          checked={selected}\n          ref={radioButtonRef}\n          name={name}\n          value={item.value}\n          label={item.label}\n          description={item.description}\n          disabled={item.disabled}\n          controlId={controlId}\n        />\n      </div>\n      {item.image && <div className={clsx(styles.image, { [styles.disabled]: !!item.disabled })}>{item.image}</div>}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"tile.js","sourceRoot":"","sources":["../../../src/tiles/tile.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAGtC,OAAO,WAAW,MAAM,6BAA6B,CAAC;AACtD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAUhE,MAAM,CAAC,IAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAClC,UAAC,EAAyD,EAAE,YAAyC;;QAAlG,IAAI,UAAA,EAAE,QAAQ,cAAA,EAAE,IAAI,UAAA,EAAE,UAAU,gBAAA,EAAE,QAAQ,cAAA;IAC3C,IAAM,WAAW,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACnD,IAAM,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,UAAG,IAAI,oBAAU,IAAI,CAAC,KAAK,CAAE,CAAC;IAElE,IAAM,SAAS,GAAG,YAAY,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;IAE1D,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,gBAAgB,CAAC,YACtB,GAAC,MAAM,CAAC,cAAc,CAAC,IAAG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,iBACxD,GAAC,MAAM,CAAC,QAAQ,IAAG,QAAQ,iBAC3B,GAAC,MAAM,CAAC,QAAQ,IAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,OACpC,MAAM,CAAC,qBAAc,UAAU,CAAE,CAAC,CACnC,gBACW,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE;;YACP,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,OAAO;aACR;YACD,MAAA,WAAW,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;YAC7B,IAAI,CAAC,QAAQ,EAAE;gBACb,sBAAsB,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;aACzD;QACH,CAAC;QAED,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,YAAI,GAAC,MAAM,CAAC,UAAU,CAAC,IAAG,CAAC,IAAI,CAAC,KAAK,MAAG;YACzE,oBAAC,WAAW,IACV,OAAO,EAAE,QAAQ,EACjB,GAAG,EAAE,SAAS,EACd,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,SAAS,GACpB,CACE;QACL,IAAI,CAAC,KAAK,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,YAAI,GAAC,MAAM,CAAC,QAAQ,IAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,MAAG,IAAG,IAAI,CAAC,KAAK,CAAO,CACzG,CACP,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useRef } from 'react';\n\nimport { TilesProps } from './interfaces';\nimport RadioButton from '../radio-group/radio-button';\nimport styles from './styles.css.js';\n\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\n\ninterface TileProps {\n  item: TilesProps.TilesDefinition;\n  selected: boolean;\n  name: string;\n  breakpoint: ReturnType<typeof useContainerBreakpoints>[0];\n  onChange: TilesProps['onChange'];\n}\n\nexport const Tile = React.forwardRef(\n  ({ item, selected, name, breakpoint, onChange }: TileProps, forwardedRef: React.Ref<HTMLInputElement>) => {\n    const internalRef = useRef<HTMLInputElement>(null);\n    const controlId = item.controlId || `${name}-value-${item.value}`;\n\n    const mergedRef = useMergeRefs(internalRef, forwardedRef);\n\n    return (\n      <div\n        className={clsx(\n          styles['tile-container'],\n          { [styles['has-metadata']]: item.description || item.image },\n          { [styles.selected]: selected },\n          { [styles.disabled]: !!item.disabled },\n          styles[`breakpoint-${breakpoint}`]\n        )}\n        data-value={item.value}\n        onClick={() => {\n          if (item.disabled) {\n            return;\n          }\n          internalRef.current?.focus();\n          if (!selected) {\n            fireNonCancelableEvent(onChange, { value: item.value });\n          }\n        }}\n      >\n        <div className={clsx(styles.control, { [styles['no-image']]: !item.image })}>\n          <RadioButton\n            checked={selected}\n            ref={mergedRef}\n            name={name}\n            value={item.value}\n            label={item.label}\n            description={item.description}\n            disabled={item.disabled}\n            controlId={controlId}\n          />\n        </div>\n        {item.image && <div className={clsx(styles.image, { [styles.disabled]: !!item.disabled })}>{item.image}</div>}\n      </div>\n    );\n  }\n);\n"]}