@box/blueprint-web 14.41.1 → 15.1.0
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/dist/lib-esm/actionable-inline-notice/actionable-inline-notice.figma.d.ts +1 -0
- package/dist/lib-esm/blueprint-configuration-context/blueprint-configuration-context.d.ts +19 -23
- package/dist/lib-esm/blueprint-configuration-context/blueprint-configuration-context.js +35 -21
- package/dist/lib-esm/blueprint-configuration-context/configuration-hooks/index.d.ts +9 -0
- package/dist/lib-esm/blueprint-configuration-context/configuration-hooks/useAnimationsConfiguration.d.ts +36 -0
- package/dist/lib-esm/blueprint-configuration-context/configuration-hooks/useAnimationsConfiguration.js +32 -0
- package/dist/lib-esm/blueprint-configuration-context/configuration-hooks/useTypographyConfiguration.d.ts +31 -0
- package/dist/lib-esm/blueprint-configuration-context/configuration-hooks/useTypographyConfiguration.js +25 -0
- package/dist/lib-esm/blueprint-configuration-context/consts.d.ts +40 -0
- package/dist/lib-esm/blueprint-configuration-context/consts.js +45 -3
- package/dist/lib-esm/blueprint-configuration-context/deep-freeze.d.ts +13 -0
- package/dist/lib-esm/blueprint-configuration-context/deep-freeze.js +21 -0
- package/dist/lib-esm/blueprint-configuration-context/index.d.ts +4 -1
- package/dist/lib-esm/blueprint-configuration-context/types.d.ts +41 -0
- package/dist/lib-esm/blueprint-configuration-context/types.js +7 -0
- package/dist/lib-esm/blueprint-configuration-context/useBlueprintConfiguration.d.ts +5 -1
- package/dist/lib-esm/blueprint-configuration-context/useBlueprintConfiguration.js +4 -0
- package/dist/lib-esm/blueprint-configuration-context/utils.d.ts +14 -0
- package/dist/lib-esm/blueprint-configuration-context/utils.js +16 -0
- package/dist/lib-esm/card-tooltip/card-tooltip.js +1 -0
- package/dist/lib-esm/combobox-group/combobox-group-combobox.js +1 -0
- package/dist/lib-esm/ghost/ghost.figma.d.ts +1 -0
- package/dist/lib-esm/icon-dual-state-button/icon-dual-state-button.figma.d.ts +1 -0
- package/dist/lib-esm/icon-toggle-button/icon-toggle-button.figma.d.ts +1 -0
- package/dist/lib-esm/index.js +3 -1
- package/dist/lib-esm/modal/modal-content.js +1 -0
- package/dist/lib-esm/primitives/base-button/base-button.js +1 -0
- package/dist/lib-esm/primitives/context-menu/context-menu-menu-content.js +1 -0
- package/dist/lib-esm/primitives/context-menu/context-menu-sub-menu-content.js +1 -0
- package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-content.js +1 -0
- package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-sub-menu-content.js +1 -0
- package/dist/lib-esm/split-button/SplitTriggerButton.js +1 -0
- package/dist/lib-esm/tooltip/tooltip.js +1 -0
- package/package.json +3 -3
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,26 +1,22 @@
|
|
|
1
|
-
import { type
|
|
2
|
-
declare enum TypographyOption {
|
|
3
|
-
lato = "lato",
|
|
4
|
-
inter = "inter"
|
|
5
|
-
}
|
|
1
|
+
import { type BlueprintConfiguration, type BlueprintProviderProps } from './types';
|
|
6
2
|
/**
|
|
7
|
-
*
|
|
8
|
-
*
|
|
3
|
+
* Underlying React context. Prefer `BlueprintProvider` + `useBlueprintConfiguration`
|
|
4
|
+
* for production code. Exposed for test scenarios that need to inject a fully
|
|
5
|
+
* resolved `BlueprintConfiguration` (e.g. forcing `componentsWithAnimationEnabled`
|
|
6
|
+
* to a specific subset that isn't expressible through `configurationOverrides`).
|
|
9
7
|
*/
|
|
10
|
-
export declare const BlueprintConfigurationOptions: {
|
|
11
|
-
readonly typography: typeof TypographyOption;
|
|
12
|
-
};
|
|
13
|
-
export interface BlueprintConfiguration {
|
|
14
|
-
typography: TypographyOption;
|
|
15
|
-
componentsWithAnimationEnabled: string[];
|
|
16
|
-
}
|
|
17
8
|
export declare const BlueprintConfigurationContext: import("react").Context<BlueprintConfiguration>;
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
9
|
+
/**
|
|
10
|
+
* Provides Blueprint runtime configuration to descendants via React context.
|
|
11
|
+
* Values supplied in `configurationOverrides` are forced; missing values fall
|
|
12
|
+
* through to Split.io treatments resolved by the required `useTreatment` hook.
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* <BlueprintProvider
|
|
16
|
+
* useTreatment={useTreatment}
|
|
17
|
+
* configurationOverrides={{ typography: BlueprintConfigurationOptions.typography.inter }}
|
|
18
|
+
* >
|
|
19
|
+
* <App />
|
|
20
|
+
* </BlueprintProvider>
|
|
21
|
+
*/
|
|
22
|
+
export declare const BlueprintProvider: ({ children, useTreatment, configurationOverrides }: BlueprintProviderProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,38 +1,52 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { createContext, useMemo } from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { useAnimationsConfiguration } from './configuration-hooks/useAnimationsConfiguration.js';
|
|
4
|
+
import { useTypographyConfiguration } from './configuration-hooks/useTypographyConfiguration.js';
|
|
5
|
+
import { BLUEPRINT_CONFIGURATION_DEFAULTS } from './consts.js';
|
|
4
6
|
|
|
5
|
-
var TypographyOption;
|
|
6
|
-
(function (TypographyOption) {
|
|
7
|
-
TypographyOption["lato"] = "lato";
|
|
8
|
-
TypographyOption["inter"] = "inter";
|
|
9
|
-
})(TypographyOption || (TypographyOption = {}));
|
|
10
7
|
/**
|
|
11
|
-
*
|
|
12
|
-
*
|
|
8
|
+
* Underlying React context. Prefer `BlueprintProvider` + `useBlueprintConfiguration`
|
|
9
|
+
* for production code. Exposed for test scenarios that need to inject a fully
|
|
10
|
+
* resolved `BlueprintConfiguration` (e.g. forcing `componentsWithAnimationEnabled`
|
|
11
|
+
* to a specific subset that isn't expressible through `configurationOverrides`).
|
|
13
12
|
*/
|
|
14
|
-
const BlueprintConfigurationOptions = {
|
|
15
|
-
typography: TypographyOption
|
|
16
|
-
};
|
|
17
13
|
const BlueprintConfigurationContext = /*#__PURE__*/createContext({
|
|
18
|
-
typography:
|
|
14
|
+
typography: BLUEPRINT_CONFIGURATION_DEFAULTS.typography,
|
|
19
15
|
componentsWithAnimationEnabled: []
|
|
20
16
|
});
|
|
21
|
-
|
|
17
|
+
/**
|
|
18
|
+
* Provides Blueprint runtime configuration to descendants via React context.
|
|
19
|
+
* Values supplied in `configurationOverrides` are forced; missing values fall
|
|
20
|
+
* through to Split.io treatments resolved by the required `useTreatment` hook.
|
|
21
|
+
*
|
|
22
|
+
* @example
|
|
23
|
+
* <BlueprintProvider
|
|
24
|
+
* useTreatment={useTreatment}
|
|
25
|
+
* configurationOverrides={{ typography: BlueprintConfigurationOptions.typography.inter }}
|
|
26
|
+
* >
|
|
27
|
+
* <App />
|
|
28
|
+
* </BlueprintProvider>
|
|
29
|
+
*/
|
|
30
|
+
const BlueprintProvider = ({
|
|
22
31
|
children,
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
animationsPhase2Enabled = false,
|
|
26
|
-
animationsPhase3Enabled = false
|
|
32
|
+
useTreatment,
|
|
33
|
+
configurationOverrides = {}
|
|
27
34
|
}) => {
|
|
35
|
+
const typographyConfig = useTypographyConfiguration({
|
|
36
|
+
overrides: configurationOverrides
|
|
37
|
+
});
|
|
38
|
+
const animationsConfig = useAnimationsConfiguration({
|
|
39
|
+
useTreatment,
|
|
40
|
+
overrides: configurationOverrides
|
|
41
|
+
});
|
|
28
42
|
const value = useMemo(() => ({
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
}), [
|
|
43
|
+
...typographyConfig,
|
|
44
|
+
...animationsConfig
|
|
45
|
+
}), [animationsConfig, typographyConfig]);
|
|
32
46
|
return jsx(BlueprintConfigurationContext.Provider, {
|
|
33
47
|
value: value,
|
|
34
48
|
children: children
|
|
35
49
|
});
|
|
36
50
|
};
|
|
37
51
|
|
|
38
|
-
export { BlueprintConfigurationContext,
|
|
52
|
+
export { BlueprintConfigurationContext, BlueprintProvider };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Per-concern configuration hooks composed by `BlueprintProvider`.
|
|
3
|
+
*
|
|
4
|
+
* Contract: every hook in this folder MUST return a referentially stable value
|
|
5
|
+
* via `useMemo`. Otherwise, `BlueprintProvider`'s context value churns on
|
|
6
|
+
* every render and forces every Blueprint consumer to re-render.
|
|
7
|
+
*/
|
|
8
|
+
export { useAnimationsConfiguration } from './useAnimationsConfiguration';
|
|
9
|
+
export { useTypographyConfiguration } from './useTypographyConfiguration';
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { type BlueprintProviderProps } from '../types';
|
|
2
|
+
/**
|
|
3
|
+
* Resolved animations slice of `BlueprintConfiguration`.
|
|
4
|
+
* Owned by this hook so the animations concern is self-describing — the
|
|
5
|
+
* aggregate `BlueprintConfiguration` is composed from this slice in
|
|
6
|
+
* `../types.ts` rather than the other way around.
|
|
7
|
+
*/
|
|
8
|
+
export interface BlueprintConfigurationAnimations {
|
|
9
|
+
componentsWithAnimationEnabled: string[];
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* Caller-supplied overrides for the animations slice. Every field is optional;
|
|
13
|
+
* missing fields fall through to the `useTreatment`-driven Split.io resolution.
|
|
14
|
+
* The aggregate `BlueprintConfigurationOverrides` is composed from this slice.
|
|
15
|
+
*/
|
|
16
|
+
export interface AnimationsOverrides {
|
|
17
|
+
animationsPhase1Enabled?: boolean;
|
|
18
|
+
animationsPhase2Enabled?: boolean;
|
|
19
|
+
animationsPhase3Enabled?: boolean;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Resolves the animations slice of the Blueprint configuration by combining
|
|
23
|
+
* per-phase override booleans with the `useTreatment`-driven Split.io
|
|
24
|
+
* treatments.
|
|
25
|
+
*
|
|
26
|
+
* Each phase is resolved independently: if the matching override is defined
|
|
27
|
+
* it forces the value, otherwise the value comes from the corresponding
|
|
28
|
+
* Split treatment (only `TREATMENT_STATES.ON` enables a phase).
|
|
29
|
+
*
|
|
30
|
+
* The return value is referentially stable across renders when the resolved
|
|
31
|
+
* per-phase enablement flags are unchanged.
|
|
32
|
+
*/
|
|
33
|
+
export declare const useAnimationsConfiguration: ({ useTreatment, overrides, }: {
|
|
34
|
+
useTreatment: BlueprintProviderProps["useTreatment"];
|
|
35
|
+
overrides: AnimationsOverrides;
|
|
36
|
+
}) => BlueprintConfigurationAnimations;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { useMemo } from 'react';
|
|
2
|
+
import { BLUEPRINT_CONFIGURATION_SPLITS, ANIMATED_COMPONENTS_BY_PHASE } from '../consts.js';
|
|
3
|
+
import { isTreatmentEnabled } from '../utils.js';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Resolves the animations slice of the Blueprint configuration by combining
|
|
7
|
+
* per-phase override booleans with the `useTreatment`-driven Split.io
|
|
8
|
+
* treatments.
|
|
9
|
+
*
|
|
10
|
+
* Each phase is resolved independently: if the matching override is defined
|
|
11
|
+
* it forces the value, otherwise the value comes from the corresponding
|
|
12
|
+
* Split treatment (only `TREATMENT_STATES.ON` enables a phase).
|
|
13
|
+
*
|
|
14
|
+
* The return value is referentially stable across renders when the resolved
|
|
15
|
+
* per-phase enablement flags are unchanged.
|
|
16
|
+
*/
|
|
17
|
+
const useAnimationsConfiguration = ({
|
|
18
|
+
useTreatment,
|
|
19
|
+
overrides
|
|
20
|
+
}) => {
|
|
21
|
+
const phase1Treatment = useTreatment(BLUEPRINT_CONFIGURATION_SPLITS.animationsPhase1);
|
|
22
|
+
const phase2Treatment = useTreatment(BLUEPRINT_CONFIGURATION_SPLITS.animationsPhase2);
|
|
23
|
+
const phase3Treatment = useTreatment(BLUEPRINT_CONFIGURATION_SPLITS.animationsPhase3);
|
|
24
|
+
const phase1Enabled = overrides.animationsPhase1Enabled ?? isTreatmentEnabled(phase1Treatment);
|
|
25
|
+
const phase2Enabled = overrides.animationsPhase2Enabled ?? isTreatmentEnabled(phase2Treatment);
|
|
26
|
+
const phase3Enabled = overrides.animationsPhase3Enabled ?? isTreatmentEnabled(phase3Treatment);
|
|
27
|
+
return useMemo(() => ({
|
|
28
|
+
componentsWithAnimationEnabled: [...(phase1Enabled ? ANIMATED_COMPONENTS_BY_PHASE.phase1 : []), ...(phase2Enabled ? ANIMATED_COMPONENTS_BY_PHASE.phase2 : []), ...(phase3Enabled ? ANIMATED_COMPONENTS_BY_PHASE.phase3 : [])]
|
|
29
|
+
}), [phase1Enabled, phase2Enabled, phase3Enabled]);
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
export { useAnimationsConfiguration };
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { type TypographyOption } from '../types';
|
|
2
|
+
/**
|
|
3
|
+
* Resolved typography slice of `BlueprintConfiguration`.
|
|
4
|
+
* Owned by this hook so the typography concern is self-describing — the
|
|
5
|
+
* aggregate `BlueprintConfiguration` is composed from this slice in
|
|
6
|
+
* `../types.ts` rather than the other way around.
|
|
7
|
+
*/
|
|
8
|
+
export interface BlueprintConfigurationTypography {
|
|
9
|
+
typography: TypographyOption;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* Caller-supplied overrides for the typography slice. Every field is optional;
|
|
13
|
+
* missing fields fall through to `BLUEPRINT_CONFIGURATION_DEFAULTS.typography`.
|
|
14
|
+
* The aggregate `BlueprintConfigurationOverrides` is composed from this slice.
|
|
15
|
+
*/
|
|
16
|
+
export interface TypographyOverrides {
|
|
17
|
+
typography?: TypographyOption;
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* Resolves the typography slice of the Blueprint configuration.
|
|
21
|
+
*
|
|
22
|
+
* If `overrides.typography` is provided it is used verbatim; otherwise the
|
|
23
|
+
* value falls back to `BLUEPRINT_CONFIGURATION_DEFAULTS.typography`.
|
|
24
|
+
*
|
|
25
|
+
* The return value is referentially stable across renders when the resolved
|
|
26
|
+
* typography value is unchanged so that consumers can safely use it as a
|
|
27
|
+
* `useMemo` dependency.
|
|
28
|
+
*/
|
|
29
|
+
export declare const useTypographyConfiguration: ({ overrides, }: {
|
|
30
|
+
overrides: TypographyOverrides;
|
|
31
|
+
}) => BlueprintConfigurationTypography;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { useMemo } from 'react';
|
|
2
|
+
import { BLUEPRINT_CONFIGURATION_DEFAULTS } from '../consts.js';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Resolves the typography slice of the Blueprint configuration.
|
|
6
|
+
*
|
|
7
|
+
* If `overrides.typography` is provided it is used verbatim; otherwise the
|
|
8
|
+
* value falls back to `BLUEPRINT_CONFIGURATION_DEFAULTS.typography`.
|
|
9
|
+
*
|
|
10
|
+
* The return value is referentially stable across renders when the resolved
|
|
11
|
+
* typography value is unchanged so that consumers can safely use it as a
|
|
12
|
+
* `useMemo` dependency.
|
|
13
|
+
*/
|
|
14
|
+
const useTypographyConfiguration = ({
|
|
15
|
+
overrides
|
|
16
|
+
}) => {
|
|
17
|
+
const {
|
|
18
|
+
typography
|
|
19
|
+
} = overrides;
|
|
20
|
+
return useMemo(() => ({
|
|
21
|
+
typography: typography ?? BLUEPRINT_CONFIGURATION_DEFAULTS.typography
|
|
22
|
+
}), [typography]);
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
export { useTypographyConfiguration };
|
|
@@ -1,3 +1,35 @@
|
|
|
1
|
+
import { TypographyOption } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* Blueprint configuration options dictionary.
|
|
4
|
+
* Import this to access all available configuration values.
|
|
5
|
+
*/
|
|
6
|
+
export declare const BlueprintConfigurationOptions: {
|
|
7
|
+
readonly typography: typeof TypographyOption;
|
|
8
|
+
};
|
|
9
|
+
/**
|
|
10
|
+
* Mirror of `@box/split-io`'s `TREATMENT_STATES` constant. Inlined rather than
|
|
11
|
+
* imported because `@box/split-io` is an internal, unpublished workspace
|
|
12
|
+
* package — depending on it would break `npm install @box/blueprint-web` for
|
|
13
|
+
* any external consumer (e.g. BUIE, 3rd-party apps).
|
|
14
|
+
*
|
|
15
|
+
* The values are Split.io's own wire protocol (the strings their SDK returns
|
|
16
|
+
* from `getTreatment`), not a Box abstraction, so they are safe to duplicate.
|
|
17
|
+
* If Split.io ever changes these values, update both this constant and
|
|
18
|
+
* `packages/split-io/src/constants.ts`.
|
|
19
|
+
*/
|
|
20
|
+
export declare const TREATMENT_STATES: {
|
|
21
|
+
readonly CONTROL: "control";
|
|
22
|
+
readonly ON: "on";
|
|
23
|
+
readonly OFF: "off";
|
|
24
|
+
};
|
|
25
|
+
/**
|
|
26
|
+
* List of Split.io flags used for Blueprint features release process
|
|
27
|
+
*/
|
|
28
|
+
export declare const BLUEPRINT_CONFIGURATION_SPLITS: {
|
|
29
|
+
readonly animationsPhase1: "launchpad_blueprint_animations_phase_1";
|
|
30
|
+
readonly animationsPhase2: "launchpad_blueprint_animations_phase_2";
|
|
31
|
+
readonly animationsPhase3: "launchpad_blueprint_animations_phase_3";
|
|
32
|
+
};
|
|
1
33
|
/**
|
|
2
34
|
* List of components by animations phase:
|
|
3
35
|
* phase1: defined in LXP-104
|
|
@@ -9,3 +41,11 @@ export declare const ANIMATED_COMPONENTS_BY_PHASE: {
|
|
|
9
41
|
readonly phase2: readonly ["DropdownTrigger", "Switch", "Checkbox", "TextInput", "Select", "Datepicker", "TextArea", "Combobox", "PasswordInput", "ComboboxGroup"];
|
|
10
42
|
readonly phase3: readonly [];
|
|
11
43
|
};
|
|
44
|
+
/**
|
|
45
|
+
* Default values for Blueprint configuration properties that are not driven by
|
|
46
|
+
* a Split.io treatment. Read by the per-concern configuration hooks when no
|
|
47
|
+
* `configurationOverrides` value is supplied.
|
|
48
|
+
*/
|
|
49
|
+
export declare const BLUEPRINT_CONFIGURATION_DEFAULTS: {
|
|
50
|
+
readonly typography: TypographyOption.lato;
|
|
51
|
+
};
|
|
@@ -1,13 +1,55 @@
|
|
|
1
|
+
import { deepFreeze } from './deep-freeze.js';
|
|
2
|
+
import { TypographyOption } from './types.js';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Blueprint configuration options dictionary.
|
|
6
|
+
* Import this to access all available configuration values.
|
|
7
|
+
*/
|
|
8
|
+
const BlueprintConfigurationOptions = deepFreeze({
|
|
9
|
+
typography: TypographyOption
|
|
10
|
+
});
|
|
11
|
+
/**
|
|
12
|
+
* Mirror of `@box/split-io`'s `TREATMENT_STATES` constant. Inlined rather than
|
|
13
|
+
* imported because `@box/split-io` is an internal, unpublished workspace
|
|
14
|
+
* package — depending on it would break `npm install @box/blueprint-web` for
|
|
15
|
+
* any external consumer (e.g. BUIE, 3rd-party apps).
|
|
16
|
+
*
|
|
17
|
+
* The values are Split.io's own wire protocol (the strings their SDK returns
|
|
18
|
+
* from `getTreatment`), not a Box abstraction, so they are safe to duplicate.
|
|
19
|
+
* If Split.io ever changes these values, update both this constant and
|
|
20
|
+
* `packages/split-io/src/constants.ts`.
|
|
21
|
+
*/
|
|
22
|
+
const TREATMENT_STATES = deepFreeze({
|
|
23
|
+
CONTROL: 'control',
|
|
24
|
+
ON: 'on',
|
|
25
|
+
OFF: 'off'
|
|
26
|
+
});
|
|
27
|
+
/**
|
|
28
|
+
* List of Split.io flags used for Blueprint features release process
|
|
29
|
+
*/
|
|
30
|
+
const BLUEPRINT_CONFIGURATION_SPLITS = deepFreeze({
|
|
31
|
+
animationsPhase1: 'launchpad_blueprint_animations_phase_1',
|
|
32
|
+
animationsPhase2: 'launchpad_blueprint_animations_phase_2',
|
|
33
|
+
animationsPhase3: 'launchpad_blueprint_animations_phase_3'
|
|
34
|
+
});
|
|
1
35
|
/**
|
|
2
36
|
* List of components by animations phase:
|
|
3
37
|
* phase1: defined in LXP-104
|
|
4
38
|
* phase2: defined in LXP-1118
|
|
5
39
|
* phase3: defined in LXP-1196 (pending)
|
|
6
40
|
*/
|
|
7
|
-
const ANIMATED_COMPONENTS_BY_PHASE = {
|
|
41
|
+
const ANIMATED_COMPONENTS_BY_PHASE = deepFreeze({
|
|
8
42
|
phase1: ['Button', 'IconButton', 'DropdownMenu', 'Tooltip', 'Popover', 'SplitButton', 'CardTooltip', 'NavigationMenu', 'Modal', 'TextButton', 'ContextMenu'],
|
|
9
43
|
phase2: ['DropdownTrigger', 'Switch', 'Checkbox', 'TextInput', 'Select', 'Datepicker', 'TextArea', 'Combobox', 'PasswordInput', 'ComboboxGroup'],
|
|
10
44
|
phase3: []
|
|
11
|
-
};
|
|
45
|
+
});
|
|
46
|
+
/**
|
|
47
|
+
* Default values for Blueprint configuration properties that are not driven by
|
|
48
|
+
* a Split.io treatment. Read by the per-concern configuration hooks when no
|
|
49
|
+
* `configurationOverrides` value is supplied.
|
|
50
|
+
*/
|
|
51
|
+
const BLUEPRINT_CONFIGURATION_DEFAULTS = deepFreeze({
|
|
52
|
+
typography: BlueprintConfigurationOptions.typography.lato
|
|
53
|
+
});
|
|
12
54
|
|
|
13
|
-
export { ANIMATED_COMPONENTS_BY_PHASE };
|
|
55
|
+
export { ANIMATED_COMPONENTS_BY_PHASE, BLUEPRINT_CONFIGURATION_DEFAULTS, BLUEPRINT_CONFIGURATION_SPLITS, BlueprintConfigurationOptions, TREATMENT_STATES };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Recursively freezes `value` and all of its nested object/array members.
|
|
3
|
+
* Used to back the runtime immutability of the module-level configuration
|
|
4
|
+
* constants on top of the compile-time `readonly` guarantees that `as const`
|
|
5
|
+
* already provides — guarding against mutation via `as any` casts, pure-JS
|
|
6
|
+
* consumers, and accidental shared-reference writes (e.g. tests monkey-patching
|
|
7
|
+
* a default).
|
|
8
|
+
*
|
|
9
|
+
* Lives in its own file (rather than `utils.ts`) so that `consts.ts` can
|
|
10
|
+
* depend on it without forming a cycle with `utils.ts`, which itself needs
|
|
11
|
+
* to import constants from `consts.ts`.
|
|
12
|
+
*/
|
|
13
|
+
export declare const deepFreeze: <T>(value: T) => T;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Recursively freezes `value` and all of its nested object/array members.
|
|
3
|
+
* Used to back the runtime immutability of the module-level configuration
|
|
4
|
+
* constants on top of the compile-time `readonly` guarantees that `as const`
|
|
5
|
+
* already provides — guarding against mutation via `as any` casts, pure-JS
|
|
6
|
+
* consumers, and accidental shared-reference writes (e.g. tests monkey-patching
|
|
7
|
+
* a default).
|
|
8
|
+
*
|
|
9
|
+
* Lives in its own file (rather than `utils.ts`) so that `consts.ts` can
|
|
10
|
+
* depend on it without forming a cycle with `utils.ts`, which itself needs
|
|
11
|
+
* to import constants from `consts.ts`.
|
|
12
|
+
*/
|
|
13
|
+
const deepFreeze = value => {
|
|
14
|
+
if (value && typeof value === 'object' && !Object.isFrozen(value)) {
|
|
15
|
+
Object.values(value).forEach(deepFreeze);
|
|
16
|
+
Object.freeze(value);
|
|
17
|
+
}
|
|
18
|
+
return value;
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
export { deepFreeze };
|
|
@@ -1,2 +1,5 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { BlueprintConfigurationContext, BlueprintProvider } from './blueprint-configuration-context';
|
|
2
|
+
export { BlueprintConfigurationOptions } from './consts';
|
|
2
3
|
export { useBlueprintConfiguration } from './useBlueprintConfiguration';
|
|
4
|
+
export { useNoopTreatment } from './utils';
|
|
5
|
+
export type { BlueprintConfigurationOverrides, BlueprintProviderProps } from './types';
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
|
+
import { type AnimationsOverrides, type BlueprintConfigurationAnimations } from './configuration-hooks/useAnimationsConfiguration';
|
|
3
|
+
import { type BlueprintConfigurationTypography, type TypographyOverrides } from './configuration-hooks/useTypographyConfiguration';
|
|
4
|
+
export type SplitAttributes = Record<string, string | number | boolean | string[] | number[]>;
|
|
5
|
+
export declare enum TypographyOption {
|
|
6
|
+
lato = "lato",
|
|
7
|
+
inter = "inter"
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* Aggregate Blueprint configuration exposed via React context. Composed from
|
|
11
|
+
* the per-concern slices owned by each configuration hook so this module stays
|
|
12
|
+
* decoupled from the internals of any single slice.
|
|
13
|
+
*/
|
|
14
|
+
export type BlueprintConfiguration = BlueprintConfigurationTypography & BlueprintConfigurationAnimations;
|
|
15
|
+
/**
|
|
16
|
+
* Aggregate overrides accepted by `BlueprintProvider`'s `configurationOverrides`
|
|
17
|
+
* prop. Composed from the per-concern override slices owned by each
|
|
18
|
+
* configuration hook; adding a new concern means adding its slice to this
|
|
19
|
+
* intersection (no per-key knowledge lives here).
|
|
20
|
+
*/
|
|
21
|
+
export type BlueprintConfigurationOverrides = TypographyOverrides & AnimationsOverrides;
|
|
22
|
+
export interface BlueprintProviderProps {
|
|
23
|
+
children: ReactNode;
|
|
24
|
+
/**
|
|
25
|
+
* React hook used to read Split.io treatments.
|
|
26
|
+
* Must be a stable function reference and follow the Rules of Hooks (called
|
|
27
|
+
* unconditionally on every render).
|
|
28
|
+
*
|
|
29
|
+
* Consumers that don't want Split.io-driven behavior (tests, Storybook
|
|
30
|
+
* stories, or apps that force all values via `configurationOverrides`)
|
|
31
|
+
* should pass the exported `useNoopTreatment`, which always resolves to
|
|
32
|
+
* `TREATMENT_STATES.CONTROL`.
|
|
33
|
+
*/
|
|
34
|
+
useTreatment: (splitName: string, attributes?: SplitAttributes) => string;
|
|
35
|
+
/**
|
|
36
|
+
* Optional overrides for the resolved Blueprint configuration. Any property
|
|
37
|
+
* supplied here forces that value and bypasses the corresponding
|
|
38
|
+
* `useTreatment`-driven resolution.
|
|
39
|
+
*/
|
|
40
|
+
configurationOverrides?: BlueprintConfigurationOverrides;
|
|
41
|
+
}
|
|
@@ -1 +1,5 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Reads the Blueprint configuration from the nearest `BlueprintProvider`.
|
|
3
|
+
* Returns the default configuration when used outside of any provider.
|
|
4
|
+
*/
|
|
5
|
+
export declare const useBlueprintConfiguration: () => import("./types").BlueprintConfiguration;
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import { useContext } from 'react';
|
|
2
2
|
import { BlueprintConfigurationContext } from './blueprint-configuration-context.js';
|
|
3
3
|
|
|
4
|
+
/**
|
|
5
|
+
* Reads the Blueprint configuration from the nearest `BlueprintProvider`.
|
|
6
|
+
* Returns the default configuration when used outside of any provider.
|
|
7
|
+
*/
|
|
4
8
|
const useBlueprintConfiguration = () => {
|
|
5
9
|
return useContext(BlueprintConfigurationContext);
|
|
6
10
|
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export declare const isValidTreatment: (treatment: string) => boolean;
|
|
2
|
+
export declare const isTreatmentEnabled: (treatment: string) => treatment is "on";
|
|
3
|
+
export declare const getTreatmentValue: (treatment: string, defaultValue: string) => string;
|
|
4
|
+
/**
|
|
5
|
+
* No-op `useTreatment` implementation that always resolves to
|
|
6
|
+
* `TREATMENT_STATES.CONTROL`. Because `isTreatmentEnabled` maps CONTROL to
|
|
7
|
+
* `false`, passing this as `BlueprintProvider`'s `useTreatment` prop disables
|
|
8
|
+
* every treatment-driven phase by default.
|
|
9
|
+
*
|
|
10
|
+
* Use this in tests, Storybook stories, and any consumer that intentionally
|
|
11
|
+
* drives `BlueprintProvider` via explicit `configurationOverrides` values
|
|
12
|
+
* rather than Split.io.
|
|
13
|
+
*/
|
|
14
|
+
export declare const useNoopTreatment: () => "control";
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { TREATMENT_STATES } from './consts.js';
|
|
2
|
+
|
|
3
|
+
const isTreatmentEnabled = treatment => treatment === TREATMENT_STATES.ON;
|
|
4
|
+
/**
|
|
5
|
+
* No-op `useTreatment` implementation that always resolves to
|
|
6
|
+
* `TREATMENT_STATES.CONTROL`. Because `isTreatmentEnabled` maps CONTROL to
|
|
7
|
+
* `false`, passing this as `BlueprintProvider`'s `useTreatment` prop disables
|
|
8
|
+
* every treatment-driven phase by default.
|
|
9
|
+
*
|
|
10
|
+
* Use this in tests, Storybook stories, and any consumer that intentionally
|
|
11
|
+
* drives `BlueprintProvider` via explicit `configurationOverrides` values
|
|
12
|
+
* rather than Split.io.
|
|
13
|
+
*/
|
|
14
|
+
const useNoopTreatment = () => TREATMENT_STATES.CONTROL;
|
|
15
|
+
|
|
16
|
+
export { isTreatmentEnabled, useNoopTreatment };
|
|
@@ -3,6 +3,7 @@ import * as Ariakit from '@ariakit/react';
|
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { forwardRef, useRef, useLayoutEffect, useCallback } from 'react';
|
|
5
5
|
import '../blueprint-configuration-context/blueprint-configuration-context.js';
|
|
6
|
+
import '../blueprint-configuration-context/consts.js';
|
|
6
7
|
import { useBlueprintConfiguration } from '../blueprint-configuration-context/useBlueprintConfiguration.js';
|
|
7
8
|
import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
|
|
8
9
|
import { Card } from '../card/card.js';
|
|
@@ -4,6 +4,7 @@ import { forwardRef, useCallback, useEffect } from 'react';
|
|
|
4
4
|
import '@box/blueprint-web-assets/tokens/px-tokens';
|
|
5
5
|
import '@radix-ui/react-tooltip';
|
|
6
6
|
import '../blueprint-configuration-context/blueprint-configuration-context.js';
|
|
7
|
+
import '../blueprint-configuration-context/consts.js';
|
|
7
8
|
import { Combobox } from '../combobox/combobox.js';
|
|
8
9
|
import { useComboboxGroupContext } from './combobox-group-context.js';
|
|
9
10
|
import styles from './combobox-group.module.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/lib-esm/index.js
CHANGED
|
@@ -4,8 +4,10 @@ export { Avatar } from './avatar/avatar.js';
|
|
|
4
4
|
export { IconBadge } from './badge/icon-badge.js';
|
|
5
5
|
export { NumericBadge } from './badge/numeric-badge.js';
|
|
6
6
|
export { StatusBadge } from './badge/status-badge.js';
|
|
7
|
-
export {
|
|
7
|
+
export { BlueprintConfigurationContext, BlueprintProvider } from './blueprint-configuration-context/blueprint-configuration-context.js';
|
|
8
|
+
export { BlueprintConfigurationOptions } from './blueprint-configuration-context/consts.js';
|
|
8
9
|
export { useBlueprintConfiguration } from './blueprint-configuration-context/useBlueprintConfiguration.js';
|
|
10
|
+
export { useNoopTreatment } from './blueprint-configuration-context/utils.js';
|
|
9
11
|
export { BlueprintModernizationContext, BlueprintModernizationProvider } from './blueprint-modernization-context/blueprint-modernization-context.js';
|
|
10
12
|
export { BLUEPRINT_UPLIFT_FEATURE_FLAG } from './blueprint-modernization-context/consts.js';
|
|
11
13
|
export { useBlueprintModernization } from './blueprint-modernization-context/useBlueprintModernization.js';
|
|
@@ -3,6 +3,7 @@ import * as RadixDialog from '@radix-ui/react-dialog';
|
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { forwardRef } from 'react';
|
|
5
5
|
import '../blueprint-configuration-context/blueprint-configuration-context.js';
|
|
6
|
+
import '../blueprint-configuration-context/consts.js';
|
|
6
7
|
import { useBlueprintConfiguration } from '../blueprint-configuration-context/useBlueprintConfiguration.js';
|
|
7
8
|
import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
|
|
8
9
|
import styles from './modal.module.js';
|
|
@@ -3,6 +3,7 @@ import { Button } from '@ariakit/react';
|
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { forwardRef, useRef, useMemo } from 'react';
|
|
5
5
|
import '../../blueprint-configuration-context/blueprint-configuration-context.js';
|
|
6
|
+
import '../../blueprint-configuration-context/consts.js';
|
|
6
7
|
import { useBlueprintConfiguration } from '../../blueprint-configuration-context/useBlueprintConfiguration.js';
|
|
7
8
|
import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
|
|
8
9
|
import { LoadingIndicator } from '../../loading-indicator/loading-indicator.js';
|
|
@@ -3,6 +3,7 @@ import * as ContextMenuPrimitve from '@radix-ui/react-context-menu';
|
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { forwardRef, Children, isValidElement } from 'react';
|
|
5
5
|
import '../../blueprint-configuration-context/blueprint-configuration-context.js';
|
|
6
|
+
import '../../blueprint-configuration-context/consts.js';
|
|
6
7
|
import { useBlueprintConfiguration } from '../../blueprint-configuration-context/useBlueprintConfiguration.js';
|
|
7
8
|
import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
|
|
8
9
|
import { useContentSizeObserver } from '../../utils/useContentSizeObserver.js';
|
|
@@ -3,6 +3,7 @@ import * as ContextMenuPrimitve from '@radix-ui/react-context-menu';
|
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { forwardRef, useCallback } from 'react';
|
|
5
5
|
import '../../blueprint-configuration-context/blueprint-configuration-context.js';
|
|
6
|
+
import '../../blueprint-configuration-context/consts.js';
|
|
6
7
|
import { useBlueprintConfiguration } from '../../blueprint-configuration-context/useBlueprintConfiguration.js';
|
|
7
8
|
import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
|
|
8
9
|
import { useContentSizeObserver } from '../../utils/useContentSizeObserver.js';
|
|
@@ -4,6 +4,7 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
|
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import { forwardRef, Children, isValidElement } from 'react';
|
|
6
6
|
import '../../blueprint-configuration-context/blueprint-configuration-context.js';
|
|
7
|
+
import '../../blueprint-configuration-context/consts.js';
|
|
7
8
|
import { useBlueprintConfiguration } from '../../blueprint-configuration-context/useBlueprintConfiguration.js';
|
|
8
9
|
import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
|
|
9
10
|
import { useContentSizeObserver } from '../../utils/useContentSizeObserver.js';
|
|
@@ -4,6 +4,7 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
|
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import { forwardRef, useCallback } from 'react';
|
|
6
6
|
import '../../blueprint-configuration-context/blueprint-configuration-context.js';
|
|
7
|
+
import '../../blueprint-configuration-context/consts.js';
|
|
7
8
|
import { useBlueprintConfiguration } from '../../blueprint-configuration-context/useBlueprintConfiguration.js';
|
|
8
9
|
import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
|
|
9
10
|
import { useContentSizeObserver } from '../../utils/useContentSizeObserver.js';
|
|
@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import clsx from 'clsx';
|
|
3
3
|
import { forwardRef } from 'react';
|
|
4
4
|
import '../blueprint-configuration-context/blueprint-configuration-context.js';
|
|
5
|
+
import '../blueprint-configuration-context/consts.js';
|
|
5
6
|
import { useBlueprintConfiguration } from '../blueprint-configuration-context/useBlueprintConfiguration.js';
|
|
6
7
|
import { TriggerButton } from '../trigger-button/trigger-button.js';
|
|
7
8
|
import styles from './styles.module.js';
|
|
@@ -4,6 +4,7 @@ import * as RadixTooltip from '@radix-ui/react-tooltip';
|
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import React__default, { useContext } from 'react';
|
|
6
6
|
import '../blueprint-configuration-context/blueprint-configuration-context.js';
|
|
7
|
+
import '../blueprint-configuration-context/consts.js';
|
|
7
8
|
import { useBlueprintConfiguration } from '../blueprint-configuration-context/useBlueprintConfiguration.js';
|
|
8
9
|
import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
|
|
9
10
|
import styles from './tooltip.module.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@box/blueprint-web",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "15.1.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"publishConfig": {
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"dependencies": {
|
|
48
48
|
"@ariakit/react": "0.4.21",
|
|
49
49
|
"@ariakit/react-core": "0.4.21",
|
|
50
|
-
"@box/blueprint-web-assets": "^4.121.
|
|
50
|
+
"@box/blueprint-web-assets": "^4.121.3",
|
|
51
51
|
"@internationalized/date": "^3.12.0",
|
|
52
52
|
"@radix-ui/react-accordion": "1.1.2",
|
|
53
53
|
"@radix-ui/react-checkbox": "1.0.4",
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
"type-fest": "^3.2.0"
|
|
78
78
|
},
|
|
79
79
|
"devDependencies": {
|
|
80
|
-
"@box/storybook-utils": "^0.20.
|
|
80
|
+
"@box/storybook-utils": "^0.20.3",
|
|
81
81
|
"@figma/code-connect": "1.4.4",
|
|
82
82
|
"@types/react": "^18.0.0",
|
|
83
83
|
"@types/react-dom": "^18.0.0",
|