@cloudscape-design/components 3.0.110 → 3.0.111
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/internal/environment.js +1 -1
- package/internal/hooks/forward-focus/radio-group.d.ts +12 -0
- package/internal/hooks/forward-focus/radio-group.d.ts.map +1 -0
- package/internal/hooks/forward-focus/radio-group.js +27 -0
- package/internal/hooks/forward-focus/radio-group.js.map +1 -0
- package/manifest.json +3 -0
- package/package.json +1 -1
- package/radio-group/index.d.ts +3 -1
- package/radio-group/index.d.ts.map +1 -1
- package/radio-group/index.js +4 -3
- package/radio-group/index.js.map +1 -1
- package/radio-group/interfaces.d.ts +6 -0
- package/radio-group/interfaces.d.ts.map +1 -1
- package/radio-group/interfaces.js.map +1 -1
- package/radio-group/internal.d.ts +3 -3
- package/radio-group/internal.d.ts.map +1 -1
- package/radio-group/internal.js +6 -3
- package/radio-group/internal.js.map +1 -1
- package/tiles/index.d.ts +3 -1
- package/tiles/index.d.ts.map +1 -1
- package/tiles/index.js +4 -3
- package/tiles/index.js.map +1 -1
- package/tiles/interfaces.d.ts +6 -0
- package/tiles/interfaces.d.ts.map +1 -1
- package/tiles/interfaces.js.map +1 -1
- package/tiles/internal.d.ts +3 -3
- package/tiles/internal.d.ts.map +1 -1
- package/tiles/internal.js +24 -21
- package/tiles/internal.js.map +1 -1
- package/tiles/tile.d.ts +2 -1
- package/tiles/tile.d.ts.map +1 -1
- package/tiles/tile.js +7 -5
- package/tiles/tile.js.map +1 -1
package/internal/environment.js
CHANGED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface ForwardFocusRef {
|
|
3
|
+
focus(): void;
|
|
4
|
+
}
|
|
5
|
+
/**
|
|
6
|
+
* Focus forwarding helper for radio groups where only the first selected
|
|
7
|
+
* child element should be focused.
|
|
8
|
+
*/
|
|
9
|
+
export default function useRadioGroupForwardFocus(forwardedRef: React.Ref<ForwardFocusRef>, items: ReadonlyArray<{
|
|
10
|
+
value: string;
|
|
11
|
+
}> | undefined, value: string | null): [React.Ref<HTMLInputElement>, number];
|
|
12
|
+
//# sourceMappingURL=radio-group.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../../../src/internal/hooks/forward-focus/radio-group.ts"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,MAAM,WAAW,eAAe;IAC9B,KAAK,IAAI,IAAI,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAC/C,YAAY,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,EACxC,KAAK,EAAE,aAAa,CAAC;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,GAAG,SAAS,EACnD,KAAK,EAAE,MAAM,GAAG,IAAI,GACnB,CAAC,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,CAUvC"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
+
import { useImperativeHandle, useRef } from 'react';
|
|
4
|
+
/**
|
|
5
|
+
* Focus forwarding helper for radio groups where only the first selected
|
|
6
|
+
* child element should be focused.
|
|
7
|
+
*/
|
|
8
|
+
export default function useRadioGroupForwardFocus(forwardedRef, items, value) {
|
|
9
|
+
var itemRef = useRef(null);
|
|
10
|
+
var itemIndex = items && findIndex(items, function (item) { return item.value === value; });
|
|
11
|
+
useImperativeHandle(forwardedRef, function () { return ({
|
|
12
|
+
focus: function () {
|
|
13
|
+
var _a;
|
|
14
|
+
(_a = itemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
15
|
+
}
|
|
16
|
+
}); });
|
|
17
|
+
return [itemRef, itemIndex !== undefined && itemIndex !== -1 ? itemIndex : 0];
|
|
18
|
+
}
|
|
19
|
+
function findIndex(items, predicate) {
|
|
20
|
+
for (var i = 0; i < items.length; i++) {
|
|
21
|
+
if (predicate(items[i])) {
|
|
22
|
+
return i;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
return -1;
|
|
26
|
+
}
|
|
27
|
+
//# sourceMappingURL=radio-group.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../../../../src/internal/hooks/forward-focus/radio-group.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAc,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAM3D;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAC/C,YAAwC,EACxC,KAAmD,EACnD,KAAoB;IAEpB,IAAM,OAAO,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IACtD,IAAM,SAAS,GAAG,KAAK,IAAI,SAAS,CAAC,KAAK,EAAE,UAAA,IAAI,IAAI,OAAA,IAAI,CAAC,KAAK,KAAK,KAAK,EAApB,CAAoB,CAAC,CAAC;IAC1E,mBAAmB,CAAC,YAAY,EAAE,cAAM,OAAA,CAAC;QACvC,KAAK;;YACH,MAAA,OAAO,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;QAC3B,CAAC;KACF,CAAC,EAJsC,CAItC,CAAC,CAAC;IAEJ,OAAO,CAAC,OAAO,EAAE,SAAS,KAAK,SAAS,IAAI,SAAS,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAChF,CAAC;AAED,SAAS,SAAS,CAAI,KAAuB,EAAE,SAAwB;IACrE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACrC,IAAI,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE;YACvB,OAAO,CAAC,CAAC;SACV;KACF;IACD,OAAO,CAAC,CAAC,CAAC;AACZ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useImperativeHandle, useRef } from 'react';\n\nexport interface ForwardFocusRef {\n focus(): void;\n}\n\n/**\n * Focus forwarding helper for radio groups where only the first selected\n * child element should be focused.\n */\nexport default function useRadioGroupForwardFocus(\n forwardedRef: React.Ref<ForwardFocusRef>,\n items: ReadonlyArray<{ value: string }> | undefined,\n value: string | null\n): [React.Ref<HTMLInputElement>, number] {\n const itemRef = useRef<HTMLInputElement | null>(null);\n const itemIndex = items && findIndex(items, item => item.value === value);\n useImperativeHandle(forwardedRef, () => ({\n focus() {\n itemRef.current?.focus();\n },\n }));\n\n return [itemRef, itemIndex !== undefined && itemIndex !== -1 ? itemIndex : 0];\n}\n\nfunction findIndex<T>(items: ReadonlyArray<T>, predicate: (t: T) => any): number {\n for (let i = 0; i < items.length; i++) {\n if (predicate(items[i])) {\n return i;\n }\n }\n return -1;\n}\n"]}
|
package/manifest.json
ADDED
package/package.json
CHANGED
package/radio-group/index.d.ts
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import { RadioGroupProps } from './interfaces';
|
|
2
3
|
export { RadioGroupProps };
|
|
3
|
-
|
|
4
|
+
declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<RadioGroupProps.Ref>>;
|
|
5
|
+
export default RadioGroup;
|
|
4
6
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/radio-group/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/radio-group/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAK/C,OAAO,EAAE,eAAe,EAAE,CAAC;AAE3B,QAAA,MAAM,UAAU,6FAGd,CAAC;AAGH,eAAe,UAAU,CAAC"}
|
package/radio-group/index.js
CHANGED
|
@@ -5,9 +5,10 @@ import React from 'react';
|
|
|
5
5
|
import { applyDisplayName } from '../internal/utils/apply-display-name';
|
|
6
6
|
import useBaseComponent from '../internal/hooks/use-base-component';
|
|
7
7
|
import InternalRadioGroup from './internal';
|
|
8
|
-
|
|
8
|
+
var RadioGroup = React.forwardRef(function (props, ref) {
|
|
9
9
|
var baseComponentProps = useBaseComponent('RadioGroup');
|
|
10
|
-
return React.createElement(InternalRadioGroup, __assign({}, props, baseComponentProps));
|
|
11
|
-
}
|
|
10
|
+
return React.createElement(InternalRadioGroup, __assign({ ref: ref }, props, baseComponentProps));
|
|
11
|
+
});
|
|
12
12
|
applyDisplayName(RadioGroup, 'RadioGroup');
|
|
13
|
+
export default RadioGroup;
|
|
13
14
|
//# sourceMappingURL=index.js.map
|
package/radio-group/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/radio-group/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,kBAAkB,MAAM,YAAY,CAAC;AAI5C,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/radio-group/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,kBAAkB,MAAM,YAAY,CAAC;AAI5C,IAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,UAAC,KAAsB,EAAE,GAAmC;IAC9F,IAAM,kBAAkB,GAAG,gBAAgB,CAAC,YAAY,CAAC,CAAC;IAC1D,OAAO,oBAAC,kBAAkB,aAAC,GAAG,EAAE,GAAG,IAAM,KAAK,EAAM,kBAAkB,EAAI,CAAC;AAC7E,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;AAC3C,eAAe,UAAU,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { RadioGroupProps } from './interfaces';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport InternalRadioGroup from './internal';\n\nexport { RadioGroupProps };\n\nconst RadioGroup = React.forwardRef((props: RadioGroupProps, ref: React.Ref<RadioGroupProps.Ref>) => {\n const baseComponentProps = useBaseComponent('RadioGroup');\n return <InternalRadioGroup ref={ref} {...props} {...baseComponentProps} />;\n});\n\napplyDisplayName(RadioGroup, 'RadioGroup');\nexport default RadioGroup;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/radio-group/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAE/E,MAAM,WAAW,eAAgB,SAAQ,kBAAkB,EAAE,qBAAqB;IAChF;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAErB;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,qBAAqB,CAAC,CAAC;IAE7D;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;IAEnE;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,yBAAiB,eAAe,CAAC;IAC/B,UAAiB,qBAAqB;QACpC,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB;IAED,UAAiB,YAAY;QAC3B,KAAK,EAAE,MAAM,CAAC;KACf;CACF"}
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/radio-group/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAE/E,MAAM,WAAW,eAAgB,SAAQ,kBAAkB,EAAE,qBAAqB;IAChF;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAErB;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,qBAAqB,CAAC,CAAC;IAE7D;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;IAEnE;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,yBAAiB,eAAe,CAAC;IAC/B,UAAiB,qBAAqB;QACpC,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB;IAED,UAAiB,YAAY;QAC3B,KAAK,EAAE,MAAM,CAAC;KACf;IAED,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,IAAI,IAAI,CAAC;KACf;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/radio-group/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { FormFieldControlProps } from '../internal/context/form-field-context';\n\nexport interface RadioGroupProps extends BaseComponentProps, FormFieldControlProps {\n /**\n * Specify a custom name for the radio buttons. If not provided, the radio group generates a random name.\n */\n name?: string;\n\n /**\n * Sets the value of the selected radio button.\n * If you want to clear the selection, use `null`.\n */\n value: string | null;\n\n /**\n * Specifies an array of radio buttons to display. Each of these objects have the following properties:\n *\n * - `value` (string) - Sets the value of the radio button. Assigned to the radio group when a user selects the radio button.\n * - `label` (ReactNode) - Specifies a label for the radio button.\n * - `description` (ReactNode) - (Optional) Specifies descriptive text that appears below the label.\n * - `disabled` (boolean) - (Optional) Determines whether the radio button is disabled, which prevents the user from selecting it.\n * - `controlId` (string) - (Optional) Sets the ID of the internal input. You can use it to relate a label element's `for` attribute to this control.\n * In general it's not recommended to set this because the ID is automatically set by the radio group component.\n */\n items?: ReadonlyArray<RadioGroupProps.RadioButtonDefinition>;\n\n /**\n * Adds `aria-label` to the group. If you are using this form element within a form field,\n * don't set this property because the form field component automatically sets the correct labels to make the component accessible.\n */\n ariaLabel?: string;\n\n /**\n * Adds `aria-required` to the group.\n */\n ariaRequired?: boolean;\n\n /**\n * Called when the user selects a different radio button. The event `detail` contains the current `value`.\n */\n onChange?: NonCancelableEventHandler<RadioGroupProps.ChangeDetail>;\n\n /**\n * Deprecated, has no effect.\n * @deprecated\n */\n controlId?: string;\n}\n\nexport namespace RadioGroupProps {\n export interface RadioButtonDefinition {\n value: string;\n label: React.ReactNode;\n description?: React.ReactNode;\n disabled?: boolean;\n controlId?: string;\n }\n\n export interface ChangeDetail {\n value: string;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/radio-group/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { FormFieldControlProps } from '../internal/context/form-field-context';\n\nexport interface RadioGroupProps extends BaseComponentProps, FormFieldControlProps {\n /**\n * Specify a custom name for the radio buttons. If not provided, the radio group generates a random name.\n */\n name?: string;\n\n /**\n * Sets the value of the selected radio button.\n * If you want to clear the selection, use `null`.\n */\n value: string | null;\n\n /**\n * Specifies an array of radio buttons to display. Each of these objects have the following properties:\n *\n * - `value` (string) - Sets the value of the radio button. Assigned to the radio group when a user selects the radio button.\n * - `label` (ReactNode) - Specifies a label for the radio button.\n * - `description` (ReactNode) - (Optional) Specifies descriptive text that appears below the label.\n * - `disabled` (boolean) - (Optional) Determines whether the radio button is disabled, which prevents the user from selecting it.\n * - `controlId` (string) - (Optional) Sets the ID of the internal input. You can use it to relate a label element's `for` attribute to this control.\n * In general it's not recommended to set this because the ID is automatically set by the radio group component.\n */\n items?: ReadonlyArray<RadioGroupProps.RadioButtonDefinition>;\n\n /**\n * Adds `aria-label` to the group. If you are using this form element within a form field,\n * don't set this property because the form field component automatically sets the correct labels to make the component accessible.\n */\n ariaLabel?: string;\n\n /**\n * Adds `aria-required` to the group.\n */\n ariaRequired?: boolean;\n\n /**\n * Called when the user selects a different radio button. The event `detail` contains the current `value`.\n */\n onChange?: NonCancelableEventHandler<RadioGroupProps.ChangeDetail>;\n\n /**\n * Deprecated, has no effect.\n * @deprecated\n */\n controlId?: string;\n}\n\nexport namespace RadioGroupProps {\n export interface RadioButtonDefinition {\n value: string;\n label: React.ReactNode;\n description?: React.ReactNode;\n disabled?: boolean;\n controlId?: string;\n }\n\n export interface ChangeDetail {\n value: string;\n }\n\n export interface Ref {\n /**\n * Sets input focus onto the UI control.\n */\n focus(): void;\n }\n}\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import { RadioGroupProps } from './interfaces';
|
|
2
3
|
import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
|
|
3
|
-
declare
|
|
4
|
-
export default
|
|
5
|
-
export {};
|
|
4
|
+
declare const InternalRadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & InternalBaseComponentProps & React.RefAttributes<RadioGroupProps.Ref>>;
|
|
5
|
+
export default InternalRadioGroup;
|
|
6
6
|
//# sourceMappingURL=internal.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/radio-group/internal.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/radio-group/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAK/C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAKlF,QAAA,MAAM,kBAAkB,0HAiDvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
|
package/radio-group/internal.js
CHANGED
|
@@ -8,12 +8,15 @@ import RadioButton from './radio-button';
|
|
|
8
8
|
import styles from './styles.css.js';
|
|
9
9
|
import { useFormFieldContext } from '../internal/context/form-field-context';
|
|
10
10
|
import { useUniqueId } from '../internal/hooks/use-unique-id';
|
|
11
|
-
|
|
11
|
+
import useRadioGroupForwardFocus from '../internal/hooks/forward-focus/radio-group';
|
|
12
|
+
var InternalRadioGroup = React.forwardRef(function (_a, ref) {
|
|
12
13
|
var name = _a.name, value = _a.value, items = _a.items, ariaLabel = _a.ariaLabel, ariaRequired = _a.ariaRequired, onChange = _a.onChange, _b = _a.__internalRootRef, __internalRootRef = _b === void 0 ? null : _b, props = __rest(_a, ["name", "value", "items", "ariaLabel", "ariaRequired", "onChange", "__internalRootRef"]);
|
|
13
14
|
var _c = useFormFieldContext(props), ariaDescribedby = _c.ariaDescribedby, ariaLabelledby = _c.ariaLabelledby;
|
|
14
15
|
var baseProps = getBaseProps(props);
|
|
15
16
|
var generatedName = useUniqueId('awsui-radio-');
|
|
17
|
+
var _d = useRadioGroupForwardFocus(ref, items, value), radioButtonRef = _d[0], radioButtonRefIndex = _d[1];
|
|
16
18
|
return (React.createElement("div", __assign({ role: "radiogroup", "aria-labelledby": ariaLabelledby, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, "aria-required": ariaRequired }, baseProps, { className: clsx(baseProps.className, styles.root), ref: __internalRootRef }), items &&
|
|
17
|
-
items.map(function (item) { return (React.createElement(RadioButton, { key: item.value, checked: item.value === value, name: name || generatedName, value: item.value, label: item.label, description: item.description, disabled: item.disabled, onChange: onChange, controlId: item.controlId })); })));
|
|
18
|
-
}
|
|
19
|
+
items.map(function (item, index) { return (React.createElement(RadioButton, { key: item.value, ref: index === radioButtonRefIndex ? radioButtonRef : undefined, checked: item.value === value, name: name || generatedName, value: item.value, label: item.label, description: item.description, disabled: item.disabled, onChange: onChange, controlId: item.controlId })); })));
|
|
20
|
+
});
|
|
21
|
+
export default InternalRadioGroup;
|
|
19
22
|
//# sourceMappingURL=internal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/radio-group/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/radio-group/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAE9D,OAAO,yBAAyB,MAAM,6CAA6C,CAAC;AAIpF,IAAM,kBAAkB,GAAG,KAAK,CAAC,UAAU,CACzC,UACE,EAS0B,EAC1B,GAAmC;IATjC,IAAA,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,KAAK,WAAA,EACL,SAAS,eAAA,EACT,YAAY,kBAAA,EACZ,QAAQ,cAAA,EACR,yBAAwB,EAAxB,iBAAiB,mBAAG,IAAI,KAAA,EACrB,KAAK,cARV,wFASC,CADS;IAIJ,IAAA,KAAsC,mBAAmB,CAAC,KAAK,CAAC,EAA9D,eAAe,qBAAA,EAAE,cAAc,oBAA+B,CAAC;IACvE,IAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACtC,IAAM,aAAa,GAAG,WAAW,CAAC,cAAc,CAAC,CAAC;IAE5C,IAAA,KAAwC,yBAAyB,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,EAAnF,cAAc,QAAA,EAAE,mBAAmB,QAAgD,CAAC;IAE3F,OAAO,CACL,sCACE,IAAI,EAAC,YAAY,qBACA,cAAc,gBACnB,SAAS,sBACH,eAAe,mBAClB,YAAY,IACvB,SAAS,IACb,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,EACjD,GAAG,EAAE,iBAAiB,KAErB,KAAK;QACJ,KAAK,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,KAAK,IAAK,OAAA,CACzB,oBAAC,WAAW,IACV,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,GAAG,EAAE,KAAK,KAAK,mBAAmB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,EAC/D,OAAO,EAAE,IAAI,CAAC,KAAK,KAAK,KAAK,EAC7B,IAAI,EAAE,IAAI,IAAI,aAAa,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,IAAI,CAAC,SAAS,GACzB,CACH,EAb0B,CAa1B,CAAC,CACA,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,kBAAkB,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 from 'react';\nimport { getBaseProps } from '../internal/base-component';\nimport { RadioGroupProps } from './interfaces';\nimport RadioButton from './radio-button';\nimport styles from './styles.css.js';\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport useRadioGroupForwardFocus from '../internal/hooks/forward-focus/radio-group';\n\ntype InternalRadioGroupProps = RadioGroupProps & InternalBaseComponentProps;\n\nconst InternalRadioGroup = React.forwardRef(\n (\n {\n name,\n value,\n items,\n ariaLabel,\n ariaRequired,\n onChange,\n __internalRootRef = null,\n ...props\n }: InternalRadioGroupProps,\n ref: React.Ref<RadioGroupProps.Ref>\n ) => {\n const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(props);\n const baseProps = getBaseProps(props);\n const generatedName = useUniqueId('awsui-radio-');\n\n const [radioButtonRef, radioButtonRefIndex] = useRadioGroupForwardFocus(ref, items, value);\n\n return (\n <div\n role=\"radiogroup\"\n aria-labelledby={ariaLabelledby}\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedby}\n aria-required={ariaRequired}\n {...baseProps}\n className={clsx(baseProps.className, styles.root)}\n ref={__internalRootRef}\n >\n {items &&\n items.map((item, index) => (\n <RadioButton\n key={item.value}\n ref={index === radioButtonRefIndex ? radioButtonRef : undefined}\n checked={item.value === value}\n name={name || generatedName}\n value={item.value}\n label={item.label}\n description={item.description}\n disabled={item.disabled}\n onChange={onChange}\n controlId={item.controlId}\n />\n ))}\n </div>\n );\n }\n);\n\nexport default InternalRadioGroup;\n"]}
|
package/tiles/index.d.ts
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import { TilesProps } from './interfaces';
|
|
2
3
|
export { TilesProps };
|
|
3
|
-
|
|
4
|
+
declare const Tiles: React.ForwardRefExoticComponent<TilesProps & React.RefAttributes<TilesProps.Ref>>;
|
|
5
|
+
export default Tiles;
|
|
4
6
|
//# sourceMappingURL=index.d.ts.map
|
package/tiles/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tiles/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tiles/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,QAAA,MAAM,KAAK,mFAGT,CAAC;AAGH,eAAe,KAAK,CAAC"}
|
package/tiles/index.js
CHANGED
|
@@ -5,9 +5,10 @@ import React from 'react';
|
|
|
5
5
|
import { applyDisplayName } from '../internal/utils/apply-display-name';
|
|
6
6
|
import useBaseComponent from '../internal/hooks/use-base-component';
|
|
7
7
|
import InternalTiles from './internal';
|
|
8
|
-
|
|
8
|
+
var Tiles = React.forwardRef(function (props, ref) {
|
|
9
9
|
var baseComponentProps = useBaseComponent('Tiles');
|
|
10
|
-
return React.createElement(InternalTiles, __assign({}, props, baseComponentProps));
|
|
11
|
-
}
|
|
10
|
+
return React.createElement(InternalTiles, __assign({ ref: ref }, props, baseComponentProps));
|
|
11
|
+
});
|
|
12
12
|
applyDisplayName(Tiles, 'Tiles');
|
|
13
|
+
export default Tiles;
|
|
13
14
|
//# sourceMappingURL=index.js.map
|
package/tiles/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tiles/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,aAAa,MAAM,YAAY,CAAC;AAIvC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tiles/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,aAAa,MAAM,YAAY,CAAC;AAIvC,IAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,UAAC,KAAiB,EAAE,GAA8B;IAC/E,IAAM,kBAAkB,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACrD,OAAO,oBAAC,aAAa,aAAC,GAAG,EAAE,GAAG,IAAM,KAAK,EAAM,kBAAkB,EAAI,CAAC;AACxE,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AACjC,eAAe,KAAK,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { TilesProps } from './interfaces';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport InternalTiles from './internal';\n\nexport { TilesProps };\n\nconst Tiles = React.forwardRef((props: TilesProps, ref: React.Ref<TilesProps.Ref>) => {\n const baseComponentProps = useBaseComponent('Tiles');\n return <InternalTiles ref={ref} {...props} {...baseComponentProps} />;\n});\n\napplyDisplayName(Tiles, 'Tiles');\nexport default Tiles;\n"]}
|
package/tiles/interfaces.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/tiles/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAC/E,OAAO,EAAE,UAAU,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEpE,MAAM,WAAW,UAAW,SAAQ,kBAAkB,EAAE,qBAAqB;IAC3E;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAErB;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;IAElD;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;CAC/D;AAED,yBAAiB,UAAU,CAAC;IAC1B,KAAY,UAAU,GAAG,WAAW,CAAC;IACrC,UAAiB,eAAe;QAC9B,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC9B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB;IAED,UAAiB,YAAY;QAC3B,KAAK,EAAE,MAAM,CAAC;KACf;CACF"}
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/tiles/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAC/E,OAAO,EAAE,UAAU,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEpE,MAAM,WAAW,UAAW,SAAQ,kBAAkB,EAAE,qBAAqB;IAC3E;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAErB;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;IAElD;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;CAC/D;AAED,yBAAiB,UAAU,CAAC;IAC1B,KAAY,UAAU,GAAG,WAAW,CAAC;IACrC,UAAiB,eAAe;QAC9B,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC9B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB;IAED,UAAiB,YAAY;QAC3B,KAAK,EAAE,MAAM,CAAC;KACf;IAED,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,IAAI,IAAI,CAAC;KACf;CACF"}
|
package/tiles/interfaces.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/tiles/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { FormFieldControlProps } from '../internal/context/form-field-context';\nimport { Breakpoint as _Breakpoint } from '../internal/breakpoints';\n\nexport interface TilesProps extends BaseComponentProps, FormFieldControlProps {\n /**\n * Specifies the value of the selected tile.\n * If you want to clear the selection, use `null`.\n */\n value: string | null;\n\n /**\n * List of tile definitions. Each tile has the following properties:\n *\n * - `value` [string] - The value that will be associated with the tile. This is the value the tiles will get when the radio button is selected.\n * - `label` [ReactNode] - A short description for the option the tile represents.\n * - `description` [ReactNode] - (Optional) Further explanatory guidance on the tile option, shown below the `label`.\n * - `image` [ReactNode] - (Optional) Visually distinctive image for the tile option, shown below the `description`.\n * - `disabled` [boolean] - (Optional) Specifies whether the tile is disabled. Users can't select disabled tiles.\n * - `controlId` [string] - (Optional) The ID of the internal input. You can use this to relate a label element's `for` attribute to this control.\n * We recommend that you don't set this property because it's automatically set by the tiles component.\n */\n items?: ReadonlyArray<TilesProps.TilesDefinition>;\n\n /**\n * Adds `aria-label` on the group. Don't set this property if you are using this form element within a form field\n * because the form field component automatically sets the correct labels to make the component accessible.\n */\n ariaLabel?: string;\n\n /**\n * Adds `aria-required` on the group.\n */\n ariaRequired?: boolean;\n\n /**\n * The number of columns for the tiles to be displayed in. Valid values are integers between 1 and 4.\n * If no value is specified, the number of columns is determined based on the number of items, with a maximum of 3.\n * It is set to 2 if 4 or 8 items are supplied in order to optimize the layout.\n */\n columns?: number;\n\n /**\n * Called when the user selects a different tile.\n */\n onChange?: NonCancelableEventHandler<TilesProps.ChangeDetail>;\n}\n\nexport namespace TilesProps {\n export type Breakpoint = _Breakpoint;\n export interface TilesDefinition {\n value: string;\n label: React.ReactNode;\n description?: React.ReactNode;\n image?: React.ReactNode;\n disabled?: boolean;\n controlId?: string;\n }\n\n export interface ChangeDetail {\n value: string;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/tiles/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { FormFieldControlProps } from '../internal/context/form-field-context';\nimport { Breakpoint as _Breakpoint } from '../internal/breakpoints';\n\nexport interface TilesProps extends BaseComponentProps, FormFieldControlProps {\n /**\n * Specifies the value of the selected tile.\n * If you want to clear the selection, use `null`.\n */\n value: string | null;\n\n /**\n * List of tile definitions. Each tile has the following properties:\n *\n * - `value` [string] - The value that will be associated with the tile. This is the value the tiles will get when the radio button is selected.\n * - `label` [ReactNode] - A short description for the option the tile represents.\n * - `description` [ReactNode] - (Optional) Further explanatory guidance on the tile option, shown below the `label`.\n * - `image` [ReactNode] - (Optional) Visually distinctive image for the tile option, shown below the `description`.\n * - `disabled` [boolean] - (Optional) Specifies whether the tile is disabled. Users can't select disabled tiles.\n * - `controlId` [string] - (Optional) The ID of the internal input. You can use this to relate a label element's `for` attribute to this control.\n * We recommend that you don't set this property because it's automatically set by the tiles component.\n */\n items?: ReadonlyArray<TilesProps.TilesDefinition>;\n\n /**\n * Adds `aria-label` on the group. Don't set this property if you are using this form element within a form field\n * because the form field component automatically sets the correct labels to make the component accessible.\n */\n ariaLabel?: string;\n\n /**\n * Adds `aria-required` on the group.\n */\n ariaRequired?: boolean;\n\n /**\n * The number of columns for the tiles to be displayed in. Valid values are integers between 1 and 4.\n * If no value is specified, the number of columns is determined based on the number of items, with a maximum of 3.\n * It is set to 2 if 4 or 8 items are supplied in order to optimize the layout.\n */\n columns?: number;\n\n /**\n * Called when the user selects a different tile.\n */\n onChange?: NonCancelableEventHandler<TilesProps.ChangeDetail>;\n}\n\nexport namespace TilesProps {\n export type Breakpoint = _Breakpoint;\n export interface TilesDefinition {\n value: string;\n label: React.ReactNode;\n description?: React.ReactNode;\n image?: React.ReactNode;\n disabled?: boolean;\n controlId?: string;\n }\n\n export interface ChangeDetail {\n value: string;\n }\n\n export interface Ref {\n /**\n * Sets input focus onto the UI control.\n */\n focus(): void;\n }\n}\n"]}
|
package/tiles/internal.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import { TilesProps } from './interfaces';
|
|
2
3
|
import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
|
|
3
|
-
declare
|
|
4
|
-
export default
|
|
5
|
-
export {};
|
|
4
|
+
declare const InternalTiles: React.ForwardRefExoticComponent<TilesProps & InternalBaseComponentProps & React.RefAttributes<TilesProps.Ref>>;
|
|
5
|
+
export default InternalTiles;
|
|
6
6
|
//# sourceMappingURL=internal.d.ts.map
|
package/tiles/internal.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/tiles/internal.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/tiles/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAM1C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AASlF,QAAA,MAAM,aAAa,gHA2ClB,CAAC;AAqBF,eAAe,aAAa,CAAC"}
|
package/tiles/internal.js
CHANGED
|
@@ -10,31 +10,34 @@ import { useUniqueId } from '../internal/hooks/use-unique-id';
|
|
|
10
10
|
import { useContainerBreakpoints } from '../internal/hooks/container-queries';
|
|
11
11
|
import { useMergeRefs } from '../internal/hooks/use-merge-refs';
|
|
12
12
|
import { Tile } from './tile';
|
|
13
|
+
import useRadioGroupForwardFocus from '../internal/hooks/forward-focus/radio-group';
|
|
13
14
|
var COLUMN_TRIGGERS = ['default', 'xxs', 'xs'];
|
|
14
|
-
|
|
15
|
+
var InternalTiles = React.forwardRef(function (_a, ref) {
|
|
15
16
|
var value = _a.value, items = _a.items, ariaLabel = _a.ariaLabel, ariaRequired = _a.ariaRequired, columns = _a.columns, onChange = _a.onChange, _b = _a.__internalRootRef, __internalRootRef = _b === void 0 ? null : _b, rest = __rest(_a, ["value", "items", "ariaLabel", "ariaRequired", "columns", "onChange", "__internalRootRef"]);
|
|
16
|
-
var getColumns = function () {
|
|
17
|
-
if (columns) {
|
|
18
|
-
return columns;
|
|
19
|
-
}
|
|
20
|
-
var nItems = items ? items.length : 0;
|
|
21
|
-
var columnsLookup = {
|
|
22
|
-
0: 1,
|
|
23
|
-
1: 1,
|
|
24
|
-
2: 2,
|
|
25
|
-
4: 2,
|
|
26
|
-
8: 2
|
|
27
|
-
};
|
|
28
|
-
return columnsLookup[nItems] || 3;
|
|
29
|
-
};
|
|
30
|
-
var _c = useFormFieldContext(rest), ariaDescribedby = _c.ariaDescribedby, ariaLabelledby = _c.ariaLabelledby;
|
|
31
17
|
var baseProps = getBaseProps(rest);
|
|
18
|
+
var _c = useFormFieldContext(rest), ariaDescribedby = _c.ariaDescribedby, ariaLabelledby = _c.ariaLabelledby;
|
|
32
19
|
var generatedName = useUniqueId('awsui-tiles-');
|
|
33
|
-
var
|
|
34
|
-
var
|
|
35
|
-
var mergedRef = useMergeRefs(
|
|
20
|
+
var _d = useRadioGroupForwardFocus(ref, items, value), tileRef = _d[0], tileRefIndex = _d[1];
|
|
21
|
+
var _e = useContainerBreakpoints(COLUMN_TRIGGERS), breakpoint = _e[0], breakpointRef = _e[1];
|
|
22
|
+
var mergedRef = useMergeRefs(breakpointRef, __internalRootRef);
|
|
23
|
+
var columnCount = getColumnCount(items, columns);
|
|
36
24
|
return (React.createElement("div", __assign({ role: "radiogroup", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-required": ariaRequired }, baseProps, { className: clsx(baseProps.className, styles.root), ref: mergedRef }),
|
|
37
|
-
React.createElement("div", { className: clsx(styles.columns, styles["column-".concat(
|
|
38
|
-
items.map(function (item) { return (React.createElement(Tile, { key: item.value, item: item, selected: item.value === value, name: generatedName, breakpoint: breakpoint, onChange: onChange })); }))));
|
|
25
|
+
React.createElement("div", { className: clsx(styles.columns, styles["column-".concat(columnCount)]) }, items &&
|
|
26
|
+
items.map(function (item, index) { return (React.createElement(Tile, { ref: index === tileRefIndex ? tileRef : undefined, key: item.value, item: item, selected: item.value === value, name: generatedName, breakpoint: breakpoint, onChange: onChange })); }))));
|
|
27
|
+
});
|
|
28
|
+
function getColumnCount(items, columns) {
|
|
29
|
+
if (columns) {
|
|
30
|
+
return columns;
|
|
31
|
+
}
|
|
32
|
+
var nItems = items ? items.length : 0;
|
|
33
|
+
var columnsLookup = {
|
|
34
|
+
0: 1,
|
|
35
|
+
1: 1,
|
|
36
|
+
2: 2,
|
|
37
|
+
4: 2,
|
|
38
|
+
8: 2
|
|
39
|
+
};
|
|
40
|
+
return columnsLookup[nItems] || 3;
|
|
39
41
|
}
|
|
42
|
+
export default InternalTiles;
|
|
40
43
|
//# sourceMappingURL=internal.js.map
|
package/tiles/internal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/tiles/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAE9E,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/tiles/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { TilesProps } from './interfaces';\nimport styles from './styles.css.js';\n\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { Tile } from './tile';\nimport useRadioGroupForwardFocus from '../internal/hooks/forward-focus/radio-group';\n\nconst COLUMN_TRIGGERS: TilesProps.Breakpoint[] = ['default', 'xxs', 'xs'];\n\ntype InternalTilesProps = TilesProps & InternalBaseComponentProps;\n\nconst InternalTiles = React.forwardRef(\n (\n { value, items, ariaLabel, ariaRequired, columns, onChange, __internalRootRef = null, ...rest }: InternalTilesProps,\n ref: React.Ref<TilesProps.Ref>\n ) => {\n const baseProps = getBaseProps(rest);\n const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);\n const generatedName = useUniqueId('awsui-tiles-');\n\n const [tileRef, tileRefIndex] = useRadioGroupForwardFocus(ref, items, value);\n const [breakpoint, breakpointRef] = useContainerBreakpoints(COLUMN_TRIGGERS);\n const mergedRef = useMergeRefs(breakpointRef, __internalRootRef);\n\n const columnCount = getColumnCount(items, columns);\n\n return (\n <div\n role=\"radiogroup\"\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-describedby={ariaDescribedby}\n aria-required={ariaRequired}\n {...baseProps}\n className={clsx(baseProps.className, styles.root)}\n ref={mergedRef}\n >\n <div className={clsx(styles.columns, styles[`column-${columnCount}`])}>\n {items &&\n items.map((item, index) => (\n <Tile\n ref={index === tileRefIndex ? tileRef : undefined}\n key={item.value}\n item={item}\n selected={item.value === value}\n name={generatedName}\n breakpoint={breakpoint}\n onChange={onChange}\n />\n ))}\n </div>\n </div>\n );\n }\n);\n\nfunction getColumnCount(\n items: ReadonlyArray<TilesProps.TilesDefinition> | undefined,\n columns: number | undefined\n): number {\n if (columns) {\n return columns;\n }\n\n const nItems = items ? items.length : 0;\n const columnsLookup: Record<number, number> = {\n 0: 1,\n 1: 1,\n 2: 2,\n 4: 2,\n 8: 2,\n };\n return columnsLookup[nItems] || 3;\n}\n\nexport default InternalTiles;\n"]}
|
package/tiles/tile.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import { TilesProps } from './interfaces';
|
|
2
3
|
import { useContainerBreakpoints } from '../internal/hooks/container-queries';
|
|
3
4
|
interface TileProps {
|
|
@@ -7,6 +8,6 @@ interface TileProps {
|
|
|
7
8
|
breakpoint: ReturnType<typeof useContainerBreakpoints>[0];
|
|
8
9
|
onChange: TilesProps['onChange'];
|
|
9
10
|
}
|
|
10
|
-
export declare
|
|
11
|
+
export declare const Tile: React.ForwardRefExoticComponent<TileProps & React.RefAttributes<HTMLInputElement>>;
|
|
11
12
|
export {};
|
|
12
13
|
//# sourceMappingURL=tile.d.ts.map
|
package/tiles/tile.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tile.d.ts","sourceRoot":"","sources":["../../../src/tiles/tile.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"tile.d.ts","sourceRoot":"","sources":["../../../src/tiles/tile.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAI9E,UAAU,SAAS;IACjB,IAAI,EAAE,UAAU,CAAC,eAAe,CAAC;IACjC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1D,QAAQ,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;CAClC;AAED,eAAO,MAAM,IAAI,oFA2ChB,CAAC"}
|
package/tiles/tile.js
CHANGED
|
@@ -5,23 +5,25 @@ import React, { useRef } from 'react';
|
|
|
5
5
|
import RadioButton from '../radio-group/radio-button';
|
|
6
6
|
import styles from './styles.css.js';
|
|
7
7
|
import { fireNonCancelableEvent } from '../internal/events';
|
|
8
|
-
|
|
8
|
+
import { useMergeRefs } from '../internal/hooks/use-merge-refs';
|
|
9
|
+
export var Tile = React.forwardRef(function (_a, forwardedRef) {
|
|
9
10
|
var _b, _c, _d, _e, _f;
|
|
10
11
|
var item = _a.item, selected = _a.selected, name = _a.name, breakpoint = _a.breakpoint, onChange = _a.onChange;
|
|
11
|
-
var
|
|
12
|
+
var internalRef = useRef(null);
|
|
12
13
|
var controlId = item.controlId || "".concat(name, "-value-").concat(item.value);
|
|
14
|
+
var mergedRef = useMergeRefs(internalRef, forwardedRef);
|
|
13
15
|
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 () {
|
|
14
16
|
var _a;
|
|
15
17
|
if (item.disabled) {
|
|
16
18
|
return;
|
|
17
19
|
}
|
|
18
|
-
(_a =
|
|
20
|
+
(_a = internalRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
19
21
|
if (!selected) {
|
|
20
22
|
fireNonCancelableEvent(onChange, { value: item.value });
|
|
21
23
|
}
|
|
22
24
|
} },
|
|
23
25
|
React.createElement("div", { className: clsx(styles.control, (_e = {}, _e[styles['no-image']] = !item.image, _e)) },
|
|
24
|
-
React.createElement(RadioButton, { checked: selected, ref:
|
|
26
|
+
React.createElement(RadioButton, { checked: selected, ref: mergedRef, name: name, value: item.value, label: item.label, description: item.description, disabled: item.disabled, controlId: controlId })),
|
|
25
27
|
item.image && React.createElement("div", { className: clsx(styles.image, (_f = {}, _f[styles.disabled] = !!item.disabled, _f)) }, item.image)));
|
|
26
|
-
}
|
|
28
|
+
});
|
|
27
29
|
//# sourceMappingURL=tile.js.map
|
package/tiles/tile.js.map
CHANGED
|
@@ -1 +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;
|
|
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;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"]}
|