@carbon/react
Version:
React components for the Carbon Design System
99 lines (97 loc) • 4.4 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_deprecate = require("../../prop-types/deprecate.js");
let _carbon_feature_flags = require("@carbon/feature-flags");
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let react_jsx_runtime = require("react/jsx-runtime");
//#region src/components/FeatureFlags/index.tsx
/**
* Copyright IBM Corp. 2015, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* Our FeatureFlagContext is used alongside the FeatureFlags component to enable
* or disable feature flags in a given React tree
*/
const FeatureFlagContext = (0, react.createContext)(_carbon_feature_flags.FeatureFlags);
/**
* Supports an object of feature flag values with the `flags` prop, merging them
* along with the current `FeatureFlagContext` to provide consumers to check if
* a feature flag is enabled or disabled in a given React tree
*/
const FeatureFlags = ({ children, flags = {}, enableV12TileDefaultIcons = false, enableV12TileRadioIcons = false, enableV12Overflowmenu = false, enableTreeviewControllable = false, enableExperimentalFocusWrapWithoutSentinels = false, enableFocusWrapWithoutSentinels = false, enableDialogElement = false, enableV12DynamicFloatingStyles = false, enableEnhancedFileUploader = false, enablePresence = false }) => {
const parentScope = (0, react.useContext)(FeatureFlagContext);
const scope = (0, react.useMemo)(() => {
const scope = (0, _carbon_feature_flags.createScope)({
"enable-v12-tile-default-icons": enableV12TileDefaultIcons,
"enable-v12-tile-radio-icons": enableV12TileRadioIcons,
"enable-v12-overflowmenu": enableV12Overflowmenu,
"enable-treeview-controllable": enableTreeviewControllable,
"enable-experimental-focus-wrap-without-sentinels": enableExperimentalFocusWrapWithoutSentinels,
"enable-focus-wrap-without-sentinels": enableFocusWrapWithoutSentinels,
"enable-dialog-element": enableDialogElement,
"enable-v12-dynamic-floating-styles": enableV12DynamicFloatingStyles,
"enable-enhanced-file-uploader": enableEnhancedFileUploader,
"enable-presence": enablePresence,
...flags
});
scope.mergeWithScope(parentScope);
return scope;
}, [
enableV12TileDefaultIcons,
enableV12TileRadioIcons,
enableV12Overflowmenu,
enableTreeviewControllable,
enableExperimentalFocusWrapWithoutSentinels,
enableFocusWrapWithoutSentinels,
enableDialogElement,
enableV12DynamicFloatingStyles,
enableEnhancedFileUploader,
enablePresence,
flags,
parentScope
]);
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FeatureFlagContext.Provider, {
value: scope,
children
});
};
FeatureFlags.propTypes = {
children: prop_types.default.node,
flags: require_deprecate.deprecate(prop_types.default.objectOf(prop_types.default.bool), "The `flags` prop for `FeatureFlag` has been deprecated. Please run the `featureflag-deprecate-flags-prop` codemod to migrate to individual boolean props.npx @carbon/upgrade migrate featureflag-deprecate-flags-prop --write"),
enableV12TileDefaultIcons: prop_types.default.bool,
enableV12TileRadioIcons: prop_types.default.bool,
enableV12Overflowmenu: prop_types.default.bool,
enableTreeviewControllable: prop_types.default.bool,
enableExperimentalFocusWrapWithoutSentinels: prop_types.default.bool,
enableFocusWrapWithoutSentinels: prop_types.default.bool,
enableDialogElement: prop_types.default.bool,
enableV12DynamicFloatingStyles: prop_types.default.bool,
enableEnhancedFileUploader: prop_types.default.bool,
enablePresence: prop_types.default.bool
};
/**
* Access whether a given flag is enabled or disabled in a given
* FeatureFlagContext
*/
const useFeatureFlag = (flag) => {
return (0, react.useContext)(FeatureFlagContext).enabled(flag);
};
/**
* Access all feature flag information for the given FeatureFlagContext
*/
const useFeatureFlags = () => (0, react.useContext)(FeatureFlagContext);
//#endregion
exports.FeatureFlags = FeatureFlags;
exports.useFeatureFlag = useFeatureFlag;
exports.useFeatureFlags = useFeatureFlags;