@cloudscape-design/components 3.0.1074 → 3.0.1075
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/base-component/styles.scoped.css +1 -1
- package/internal/context/single-tab-stop-navigation-context.d.ts +0 -2
- package/internal/context/single-tab-stop-navigation-context.d.ts.map +1 -1
- package/internal/context/single-tab-stop-navigation-context.js +4 -35
- package/internal/context/single-tab-stop-navigation-context.js.map +1 -1
- package/internal/environment.js +2 -2
- package/internal/environment.json +2 -2
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
|
@@ -3,7 +3,6 @@ export type FocusableChangeHandler = (isFocusable: boolean) => void;
|
|
|
3
3
|
export declare const defaultValue: {
|
|
4
4
|
navigationActive: boolean;
|
|
5
5
|
registerFocusable(focusable: HTMLElement, handler: FocusableChangeHandler): () => void;
|
|
6
|
-
resetFocusTarget(): void;
|
|
7
6
|
};
|
|
8
7
|
/**
|
|
9
8
|
* Single tab stop navigation context is used together with keyboard navigation that requires a single tab stop.
|
|
@@ -12,7 +11,6 @@ export declare const defaultValue: {
|
|
|
12
11
|
export declare const SingleTabStopNavigationContext: React.Context<{
|
|
13
12
|
navigationActive: boolean;
|
|
14
13
|
registerFocusable(focusable: HTMLElement, handler: FocusableChangeHandler): () => void;
|
|
15
|
-
resetFocusTarget(): void;
|
|
16
14
|
}>;
|
|
17
15
|
export declare function useSingleTabStopNavigation(focusable: null | React.RefObject<HTMLElement>, options?: {
|
|
18
16
|
tabIndex?: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"single-tab-stop-navigation-context.d.ts","sourceRoot":"","sources":["../../../../src/internal/context/single-tab-stop-navigation-context.tsx"],"names":[],"mappings":"AAGA,OAAO,KAQN,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"single-tab-stop-navigation-context.d.ts","sourceRoot":"","sources":["../../../../src/internal/context/single-tab-stop-navigation-context.tsx"],"names":[],"mappings":"AAGA,OAAO,KAQN,MAAM,OAAO,CAAC;AAIf,MAAM,MAAM,sBAAsB,GAAG,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;AAEpE,eAAO,MAAM,YAAY,EAAE;IACzB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,sBAAsB,GAAG,MAAM,IAAI,CAAC;CAIxF,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,8BAA8B;sBAXvB,OAAO;iCACI,WAAW,WAAW,sBAAsB,GAAG,MAAM,IAAI;EAUf,CAAC;AAE1E,wBAAgB,0BAA0B,CACxC,SAAS,EAAE,IAAI,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,EAC9C,OAAO,CAAC,EAAE;IAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE;;;EAoBhC;AAED,UAAU,oCAAoC;IAC5C,gBAAgB,EAAE,OAAO,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kBAAkB,EAAE,MAAM,IAAI,GAAG,WAAW,CAAC;IAC7C,mBAAmB,CAAC,CAAC,gBAAgB,EAAE,OAAO,GAAG,OAAO,CAAC;IACzD,mBAAmB,CAAC,CAAC,gBAAgB,EAAE,OAAO,GAAG,IAAI,CAAC;IACtD,kBAAkB,CAAC,CAAC,gBAAgB,EAAE,OAAO,GAAG,IAAI,CAAC;CACtD;AAED,MAAM,WAAW,0BAA0B;IACzC,iBAAiB,IAAI,IAAI,CAAC;IAC1B,cAAc,IAAI,IAAI,GAAG,WAAW,CAAC;IACrC,YAAY,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAAC;CACzC;AAED,eAAO,MAAM,+BAA+B,yHA8E3C,CAAC"}
|
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
3
|
import React, { createContext, forwardRef, useContext, useImperativeHandle, useLayoutEffect, useRef, useState, } from 'react';
|
|
4
|
-
import { useEffectOnUpdate } from '../hooks/use-effect-on-update';
|
|
5
4
|
import { nodeBelongs } from '../utils/node-belongs';
|
|
6
5
|
export const defaultValue = {
|
|
7
6
|
navigationActive: false,
|
|
8
7
|
registerFocusable: () => () => { },
|
|
9
|
-
resetFocusTarget: () => { },
|
|
10
8
|
};
|
|
11
9
|
/**
|
|
12
10
|
* Single tab stop navigation context is used together with keyboard navigation that requires a single tab stop.
|
|
@@ -50,9 +48,6 @@ export const SingleTabStopNavigationProvider = forwardRef(({ navigationActive, c
|
|
|
50
48
|
// Register a focusable element to allow navigating into it.
|
|
51
49
|
// The focusable element tabIndex is only set to 0 if the element matches the focus target.
|
|
52
50
|
function registerFocusable(focusableElement, changeHandler) {
|
|
53
|
-
// In case the contexts are nested, we must that the components register to all of them,
|
|
54
|
-
// so that switching between contexts dynamically is possible.
|
|
55
|
-
const parentUnregister = parentContext.registerFocusable(focusableElement, changeHandler);
|
|
56
51
|
focusables.current.add(focusableElement);
|
|
57
52
|
focusHandlers.current.set(focusableElement, changeHandler);
|
|
58
53
|
const isFocusable = !!focusablesState.current.get(focusableElement);
|
|
@@ -62,10 +57,7 @@ export const SingleTabStopNavigationProvider = forwardRef(({ navigationActive, c
|
|
|
62
57
|
changeHandler(newIsFocusable);
|
|
63
58
|
}
|
|
64
59
|
onRegisterFocusable === null || onRegisterFocusable === void 0 ? void 0 : onRegisterFocusable(focusableElement);
|
|
65
|
-
return () =>
|
|
66
|
-
parentUnregister();
|
|
67
|
-
unregisterFocusable(focusableElement);
|
|
68
|
-
};
|
|
60
|
+
return () => unregisterFocusable(focusableElement);
|
|
69
61
|
}
|
|
70
62
|
function unregisterFocusable(focusableElement) {
|
|
71
63
|
focusables.current.delete(focusableElement);
|
|
@@ -73,21 +65,18 @@ export const SingleTabStopNavigationProvider = forwardRef(({ navigationActive, c
|
|
|
73
65
|
onUnregisterFocusable === null || onUnregisterFocusable === void 0 ? void 0 : onUnregisterFocusable(focusableElement);
|
|
74
66
|
}
|
|
75
67
|
// Update focus target with next single focusable element and notify all registered focusables of a change.
|
|
76
|
-
function updateFocusTarget(
|
|
68
|
+
function updateFocusTarget() {
|
|
77
69
|
var _a;
|
|
78
70
|
focusTarget.current = getNextFocusTarget();
|
|
79
71
|
for (const focusableElement of focusables.current) {
|
|
80
72
|
const isFocusable = (_a = focusablesState.current.get(focusableElement)) !== null && _a !== void 0 ? _a : false;
|
|
81
73
|
const newIsFocusable = focusTarget.current === focusableElement || !!(isElementSuppressed === null || isElementSuppressed === void 0 ? void 0 : isElementSuppressed(focusableElement));
|
|
82
|
-
if (newIsFocusable !== isFocusable
|
|
74
|
+
if (newIsFocusable !== isFocusable) {
|
|
83
75
|
focusablesState.current.set(focusableElement, newIsFocusable);
|
|
84
76
|
focusHandlers.current.get(focusableElement)(newIsFocusable);
|
|
85
77
|
}
|
|
86
78
|
}
|
|
87
79
|
}
|
|
88
|
-
function resetFocusTarget() {
|
|
89
|
-
updateFocusTarget(true);
|
|
90
|
-
}
|
|
91
80
|
function getFocusTarget() {
|
|
92
81
|
return focusTarget.current;
|
|
93
82
|
}
|
|
@@ -95,26 +84,6 @@ export const SingleTabStopNavigationProvider = forwardRef(({ navigationActive, c
|
|
|
95
84
|
return focusables.current.has(element);
|
|
96
85
|
}
|
|
97
86
|
useImperativeHandle(ref, () => ({ updateFocusTarget, getFocusTarget, isRegistered }));
|
|
98
|
-
|
|
99
|
-
// The outer context is preferred over the inners. The components using STSN
|
|
100
|
-
// must either work with either outer or inner context, or an explicit switch mechanism
|
|
101
|
-
// needs to be implemented (that turns the outer context on and off based on user interaction).
|
|
102
|
-
const parentContext = useContext(SingleTabStopNavigationContext);
|
|
103
|
-
const value = parentContext.navigationActive
|
|
104
|
-
? parentContext
|
|
105
|
-
: { navigationActive, registerFocusable, updateFocusTarget, resetFocusTarget };
|
|
106
|
-
// When contexts switching occurs, it is essential that the now-active one updates the focus target
|
|
107
|
-
// to ensure the tab indices are correctly set.
|
|
108
|
-
useEffectOnUpdate(() => {
|
|
109
|
-
if (parentContext.navigationActive) {
|
|
110
|
-
parentContext.resetFocusTarget();
|
|
111
|
-
}
|
|
112
|
-
else {
|
|
113
|
-
resetFocusTarget();
|
|
114
|
-
}
|
|
115
|
-
// The updateFocusTarget and its dependencies must be pure.
|
|
116
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
117
|
-
}, [parentContext.navigationActive]);
|
|
118
|
-
return React.createElement(SingleTabStopNavigationContext.Provider, { value: value }, children);
|
|
87
|
+
return (React.createElement(SingleTabStopNavigationContext.Provider, { value: { navigationActive, registerFocusable } }, children));
|
|
119
88
|
});
|
|
120
89
|
//# sourceMappingURL=single-tab-stop-navigation-context.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"single-tab-stop-navigation-context.js","sourceRoot":"","sources":["../../../../src/internal/context/single-tab-stop-navigation-context.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\n\nimport React, {\n createContext,\n forwardRef,\n useContext,\n useImperativeHandle,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\n\nimport { useEffectOnUpdate } from '../hooks/use-effect-on-update';\nimport { nodeBelongs } from '../utils/node-belongs';\n\nexport type FocusableChangeHandler = (isFocusable: boolean) => void;\n\nexport const defaultValue: {\n navigationActive: boolean;\n registerFocusable(focusable: HTMLElement, handler: FocusableChangeHandler): () => void;\n resetFocusTarget(): void;\n} = {\n navigationActive: false,\n registerFocusable: () => () => {},\n resetFocusTarget: () => {},\n};\n\n/**\n * Single tab stop navigation context is used together with keyboard navigation that requires a single tab stop.\n * It instructs interactive elements to override tab indices for just a single one to remain user-focusable.\n */\nexport const SingleTabStopNavigationContext = createContext(defaultValue);\n\nexport function useSingleTabStopNavigation(\n focusable: null | React.RefObject<HTMLElement>,\n options?: { tabIndex?: number }\n) {\n const { navigationActive: contextNavigationActive, registerFocusable } = useContext(SingleTabStopNavigationContext);\n const [focusTargetActive, setFocusTargetActive] = useState(false);\n const navigationDisabled = options?.tabIndex && options?.tabIndex < 0;\n const navigationActive = contextNavigationActive && !navigationDisabled;\n\n useLayoutEffect(() => {\n if (navigationActive && focusable && focusable.current) {\n const unregister = registerFocusable(focusable.current, isFocusable => setFocusTargetActive(isFocusable));\n return () => unregister();\n }\n });\n\n let tabIndex = options?.tabIndex;\n if (navigationActive) {\n tabIndex = !focusTargetActive ? -1 : (options?.tabIndex ?? 0);\n }\n\n return { navigationActive, tabIndex };\n}\n\ninterface SingleTabStopNavigationProviderProps {\n navigationActive: boolean;\n children: React.ReactNode;\n getNextFocusTarget: () => null | HTMLElement;\n isElementSuppressed?(focusableElement: Element): boolean;\n onRegisterFocusable?(focusableElement: Element): void;\n onUnregisterActive?(focusableElement: Element): void;\n}\n\nexport interface SingleTabStopNavigationAPI {\n updateFocusTarget(): void;\n getFocusTarget(): null | HTMLElement;\n isRegistered(element: Element): boolean;\n}\n\nexport const SingleTabStopNavigationProvider = forwardRef(\n (\n {\n navigationActive,\n children,\n getNextFocusTarget,\n isElementSuppressed,\n onRegisterFocusable,\n onUnregisterActive,\n }: SingleTabStopNavigationProviderProps,\n ref: React.Ref<SingleTabStopNavigationAPI>\n ) => {\n // A set of registered focusable elements that can use keyboard navigation.\n const focusables = useRef(new Set<Element>());\n // A map of registered focusable element handlers to update the respective tab indices.\n const focusHandlers = useRef(new Map<Element, FocusableChangeHandler>());\n // A map of focusable element states to avoid issuing unnecessary updates to registered elements.\n const focusablesState = useRef(new WeakMap<Element, boolean>());\n // A reference to the currently focused element.\n const focusTarget = useRef<null | HTMLElement>(null);\n\n function onUnregisterFocusable(focusableElement: Element) {\n const isUnregisteringFocusedNode = nodeBelongs(focusableElement, document.activeElement);\n if (isUnregisteringFocusedNode) {\n // Wait for unmounted node to get removed from the DOM.\n setTimeout(() => onUnregisterActive?.(focusableElement), 0);\n }\n }\n\n // Register a focusable element to allow navigating into it.\n // The focusable element tabIndex is only set to 0 if the element matches the focus target.\n function registerFocusable(focusableElement: HTMLElement, changeHandler: FocusableChangeHandler) {\n // In case the contexts are nested, we must that the components register to all of them,\n // so that switching between contexts dynamically is possible.\n const parentUnregister = parentContext.registerFocusable(focusableElement, changeHandler);\n\n focusables.current.add(focusableElement);\n focusHandlers.current.set(focusableElement, changeHandler);\n const isFocusable = !!focusablesState.current.get(focusableElement);\n const newIsFocusable = focusTarget.current === focusableElement || !!isElementSuppressed?.(focusableElement);\n if (newIsFocusable !== isFocusable) {\n focusablesState.current.set(focusableElement, newIsFocusable);\n changeHandler(newIsFocusable);\n }\n onRegisterFocusable?.(focusableElement);\n\n return () => {\n parentUnregister();\n unregisterFocusable(focusableElement);\n };\n }\n function unregisterFocusable(focusableElement: Element) {\n focusables.current.delete(focusableElement);\n focusHandlers.current.delete(focusableElement);\n onUnregisterFocusable?.(focusableElement);\n }\n\n // Update focus target with next single focusable element and notify all registered focusables of a change.\n function updateFocusTarget(forceUpdate = false) {\n focusTarget.current = getNextFocusTarget();\n for (const focusableElement of focusables.current) {\n const isFocusable = focusablesState.current.get(focusableElement) ?? false;\n const newIsFocusable = focusTarget.current === focusableElement || !!isElementSuppressed?.(focusableElement);\n if (newIsFocusable !== isFocusable || forceUpdate) {\n focusablesState.current.set(focusableElement, newIsFocusable);\n focusHandlers.current.get(focusableElement)!(newIsFocusable);\n }\n }\n }\n function resetFocusTarget() {\n updateFocusTarget(true);\n }\n function getFocusTarget() {\n return focusTarget.current;\n }\n function isRegistered(element: Element) {\n return focusables.current.has(element);\n }\n useImperativeHandle(ref, () => ({ updateFocusTarget, getFocusTarget, isRegistered }));\n\n // Only one STSN context should be active at a time.\n // The outer context is preferred over the inners. The components using STSN\n // must either work with either outer or inner context, or an explicit switch mechanism\n // needs to be implemented (that turns the outer context on and off based on user interaction).\n const parentContext = useContext(SingleTabStopNavigationContext);\n const value = parentContext.navigationActive\n ? parentContext\n : { navigationActive, registerFocusable, updateFocusTarget, resetFocusTarget };\n\n // When contexts switching occurs, it is essential that the now-active one updates the focus target\n // to ensure the tab indices are correctly set.\n useEffectOnUpdate(() => {\n if (parentContext.navigationActive) {\n parentContext.resetFocusTarget();\n } else {\n resetFocusTarget();\n }\n // The updateFocusTarget and its dependencies must be pure.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [parentContext.navigationActive]);\n\n return <SingleTabStopNavigationContext.Provider value={value}>{children}</SingleTabStopNavigationContext.Provider>;\n }\n);\n"]}
|
|
1
|
+
{"version":3,"file":"single-tab-stop-navigation-context.js","sourceRoot":"","sources":["../../../../src/internal/context/single-tab-stop-navigation-context.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\n\nimport React, {\n createContext,\n forwardRef,\n useContext,\n useImperativeHandle,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\n\nimport { nodeBelongs } from '../utils/node-belongs';\n\nexport type FocusableChangeHandler = (isFocusable: boolean) => void;\n\nexport const defaultValue: {\n navigationActive: boolean;\n registerFocusable(focusable: HTMLElement, handler: FocusableChangeHandler): () => void;\n} = {\n navigationActive: false,\n registerFocusable: () => () => {},\n};\n\n/**\n * Single tab stop navigation context is used together with keyboard navigation that requires a single tab stop.\n * It instructs interactive elements to override tab indices for just a single one to remain user-focusable.\n */\nexport const SingleTabStopNavigationContext = createContext(defaultValue);\n\nexport function useSingleTabStopNavigation(\n focusable: null | React.RefObject<HTMLElement>,\n options?: { tabIndex?: number }\n) {\n const { navigationActive: contextNavigationActive, registerFocusable } = useContext(SingleTabStopNavigationContext);\n const [focusTargetActive, setFocusTargetActive] = useState(false);\n const navigationDisabled = options?.tabIndex && options?.tabIndex < 0;\n const navigationActive = contextNavigationActive && !navigationDisabled;\n\n useLayoutEffect(() => {\n if (navigationActive && focusable && focusable.current) {\n const unregister = registerFocusable(focusable.current, isFocusable => setFocusTargetActive(isFocusable));\n return () => unregister();\n }\n });\n\n let tabIndex = options?.tabIndex;\n if (navigationActive) {\n tabIndex = !focusTargetActive ? -1 : (options?.tabIndex ?? 0);\n }\n\n return { navigationActive, tabIndex };\n}\n\ninterface SingleTabStopNavigationProviderProps {\n navigationActive: boolean;\n children: React.ReactNode;\n getNextFocusTarget: () => null | HTMLElement;\n isElementSuppressed?(focusableElement: Element): boolean;\n onRegisterFocusable?(focusableElement: Element): void;\n onUnregisterActive?(focusableElement: Element): void;\n}\n\nexport interface SingleTabStopNavigationAPI {\n updateFocusTarget(): void;\n getFocusTarget(): null | HTMLElement;\n isRegistered(element: Element): boolean;\n}\n\nexport const SingleTabStopNavigationProvider = forwardRef(\n (\n {\n navigationActive,\n children,\n getNextFocusTarget,\n isElementSuppressed,\n onRegisterFocusable,\n onUnregisterActive,\n }: SingleTabStopNavigationProviderProps,\n ref: React.Ref<SingleTabStopNavigationAPI>\n ) => {\n // A set of registered focusable elements that can use keyboard navigation.\n const focusables = useRef(new Set<Element>());\n // A map of registered focusable element handlers to update the respective tab indices.\n const focusHandlers = useRef(new Map<Element, FocusableChangeHandler>());\n // A map of focusable element states to avoid issuing unnecessary updates to registered elements.\n const focusablesState = useRef(new WeakMap<Element, boolean>());\n // A reference to the currently focused element.\n const focusTarget = useRef<null | HTMLElement>(null);\n\n function onUnregisterFocusable(focusableElement: Element) {\n const isUnregisteringFocusedNode = nodeBelongs(focusableElement, document.activeElement);\n if (isUnregisteringFocusedNode) {\n // Wait for unmounted node to get removed from the DOM.\n setTimeout(() => onUnregisterActive?.(focusableElement), 0);\n }\n }\n\n // Register a focusable element to allow navigating into it.\n // The focusable element tabIndex is only set to 0 if the element matches the focus target.\n function registerFocusable(focusableElement: Element, changeHandler: FocusableChangeHandler) {\n focusables.current.add(focusableElement);\n focusHandlers.current.set(focusableElement, changeHandler);\n const isFocusable = !!focusablesState.current.get(focusableElement);\n const newIsFocusable = focusTarget.current === focusableElement || !!isElementSuppressed?.(focusableElement);\n if (newIsFocusable !== isFocusable) {\n focusablesState.current.set(focusableElement, newIsFocusable);\n changeHandler(newIsFocusable);\n }\n onRegisterFocusable?.(focusableElement);\n return () => unregisterFocusable(focusableElement);\n }\n function unregisterFocusable(focusableElement: Element) {\n focusables.current.delete(focusableElement);\n focusHandlers.current.delete(focusableElement);\n onUnregisterFocusable?.(focusableElement);\n }\n\n // Update focus target with next single focusable element and notify all registered focusables of a change.\n function updateFocusTarget() {\n focusTarget.current = getNextFocusTarget();\n for (const focusableElement of focusables.current) {\n const isFocusable = focusablesState.current.get(focusableElement) ?? false;\n const newIsFocusable = focusTarget.current === focusableElement || !!isElementSuppressed?.(focusableElement);\n if (newIsFocusable !== isFocusable) {\n focusablesState.current.set(focusableElement, newIsFocusable);\n focusHandlers.current.get(focusableElement)!(newIsFocusable);\n }\n }\n }\n\n function getFocusTarget() {\n return focusTarget.current;\n }\n\n function isRegistered(element: Element) {\n return focusables.current.has(element);\n }\n\n useImperativeHandle(ref, () => ({ updateFocusTarget, getFocusTarget, isRegistered }));\n\n return (\n <SingleTabStopNavigationContext.Provider value={{ navigationActive, registerFocusable }}>\n {children}\n </SingleTabStopNavigationContext.Provider>\n );\n }\n);\n"]}
|
package/internal/environment.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export var PACKAGE_SOURCE = "components";
|
|
2
|
-
export var PACKAGE_VERSION = "3.0.0 (
|
|
3
|
-
export var GIT_SHA = "
|
|
2
|
+
export var PACKAGE_VERSION = "3.0.0 (5b144292)";
|
|
3
|
+
export var GIT_SHA = "5b144292";
|
|
4
4
|
export var THEME = "open-source-visual-refresh";
|
|
5
5
|
export var SYSTEM = "console";
|
|
6
6
|
export var ALWAYS_VISUAL_REFRESH = true;
|
package/internal/manifest.json
CHANGED
package/package.json
CHANGED
|
@@ -150,7 +150,7 @@
|
|
|
150
150
|
"./internal/base-component/index.js",
|
|
151
151
|
"./internal/base-component/styles.css.js"
|
|
152
152
|
],
|
|
153
|
-
"version": "3.0.
|
|
153
|
+
"version": "3.0.1075",
|
|
154
154
|
"repository": {
|
|
155
155
|
"type": "git",
|
|
156
156
|
"url": "https://github.com/cloudscape-design/components.git"
|