@pega/cosmos-react-core 3.0.0-dev.13.0 → 3.0.0-dev.16.0

package/lib/theme/ThemeMachine.js

@@ -1,31 +1,34 @@
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var _ThemeMachine_parent, _ThemeMachine_definition, _ThemeMachine_overrides;
 import { deepGet, defineSmartGetter } from '../utils';
 export const resetToInitial = Symbol.for('@pega/cosmos-react-core.theme.resetToInitial');
 class ThemeMachine {
     constructor({ theme = {}, parent, definition }) {
-        _ThemeMachine_parent.set(this, void 0);
-        _ThemeMachine_definition.set(this, void 0);
-        _ThemeMachine_overrides.set(this, void 0);
+        Object.defineProperty(this, "parent", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "definition", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "overrides", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "theme", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
-        __classPrivateFieldSet(this, _ThemeMachine_parent, parent ?? null, "f");
-        __classPrivateFieldSet(this, _ThemeMachine_definition, parent ? __classPrivateFieldGet(parent, _ThemeMachine_definition, "f") : definition, "f");
-        __classPrivateFieldSet(this, _ThemeMachine_overrides, new Map(), "f");
+        this.parent = parent ?? null;
+        this.definition = parent ? parent.definition : definition;
+        this.overrides = new Map();
         this.theme = this.constructTheme(theme);
     }
     overrideInTree(keys) {
@@ -34,21 +37,21 @@ class ThemeMachine {
         while (ancestor) {
             // Trigger getters in the ancestor themes.
             deepGet(ancestor.theme, keys);
-            if (__classPrivateFieldGet(ancestor, _ThemeMachine_overrides, "f").has(fullProp))
-                return !!__classPrivateFieldGet(ancestor, _ThemeMachine_overrides, "f").get(fullProp);
-            ancestor = __classPrivateFieldGet(ancestor, _ThemeMachine_parent, "f");
+            if (ancestor.overrides.has(fullProp))
+                return !!ancestor.overrides.get(fullProp);
+            ancestor = ancestor.parent;
         }
         return false;
     }
     constructTheme(theme) {
         const constructForNode = (keys = []) => {
             const themeNode = {};
-            Object.keys(deepGet(__classPrivateFieldGet(this, _ThemeMachine_definition, "f"), keys)).forEach(key => {
+            Object.keys(deepGet(this.definition, keys)).forEach(key => {
                 // Ignore comment nodes.
                 if (key === '$comment')
                     return;
                 const propKeys = [...keys, key];
-                const defNode = deepGet(__classPrivateFieldGet(this, _ThemeMachine_definition, "f"), propKeys);
+                const defNode = deepGet(this.definition, propKeys);
                 // If it is not a leaf node of the theme definition...
                 if (defNode.$type === undefined) {
                     // recursively run for child nodes.
@@ -59,7 +62,7 @@ class ThemeMachine {
                 // If a theme value was set for this ThemeMachine...
                 if (themeValue !== undefined) {
                     // set overrides to true, unless it is being reset.
-                    __classPrivateFieldGet(this, _ThemeMachine_overrides, "f").set(propKeys.join('.'), themeValue !== resetToInitial);
+                    this.overrides.set(propKeys.join('.'), themeValue !== resetToInitial);
                 }
                 // If a theme value was set for this ThemeMachine, is not being reset, and is for a non-constant property...
                 if (themeValue !== undefined && themeValue !== resetToInitial && !defNode.$constant) {
@@ -69,7 +72,7 @@ class ThemeMachine {
                 // If the property has been overridden in the tree (and not reset)...
                 else if (this.overrideInTree(propKeys)) {
                     // set to the value in the parent theme.
-                    defineSmartGetter(themeNode, key, () => deepGet(__classPrivateFieldGet(this, _ThemeMachine_parent, "f").theme, propKeys));
+                    defineSmartGetter(themeNode, key, () => deepGet(this.parent.theme, propKeys));
                 }
                 // If the property type is inherited...
                 else if (defNode.$type === 'inherited') {
@@ -87,6 +90,5 @@ class ThemeMachine {
         return constructForNode();
     }
 }
-_ThemeMachine_parent = new WeakMap(), _ThemeMachine_definition = new WeakMap(), _ThemeMachine_overrides = new WeakMap();
 export default ThemeMachine;
 //# sourceMappingURL=ThemeMachine.js.map

package/lib/theme/ThemeMachine.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeMachine.js","sourceRoot":"","sources":["../../src/theme/ThemeMachine.ts"],"names":[],"mappings":"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","sourcesContent":["import { deepGet, defineSmartGetter } from '../utils';\nimport { DeepPartial } from '../types';\n\nexport interface ThemeLeaf<Value> {\n  $type: string;\n  $value: Value;\n  $constant?: boolean;\n  $comment?: string;\n}\n\nexport type ThemeDefinition = {\n  [key: string]: ThemeLeaf<unknown> | ThemeDefinition;\n};\n\nexport type ToThemeIFace<Node, Extension = never> = Node extends ThemeLeaf<infer LeafVal>\n  ? (LeafVal extends null ? LeafVal | string : LeafVal) | Extension\n  : Node extends object\n  ? {\n      readonly [Key in Exclude<keyof Node, '$comment'>]: ToThemeIFace<Node[Key], Extension>;\n    }\n  : Node | Extension;\n\nexport type SettableTheme<Def extends ThemeDefinition> = DeepPartial<ToThemeIFace<Def, symbol>>;\n\nexport const resetToInitial = Symbol.for('@pega/cosmos-react-core.theme.resetToInitial');\n\nclass ThemeMachine<Definition extends ThemeDefinition> {\n  #parent: ThemeMachine<Definition> | null;\n\n  #definition: Definition;\n\n  #overrides: Map<string, boolean>;\n\n  readonly theme: ToThemeIFace<Definition>;\n\n  overrideInTree(keys: string[]): boolean {\n    let ancestor: ThemeMachine<Definition> | null = this;\n    const fullProp = keys.join('.');\n\n    while (ancestor) {\n      // Trigger getters in the ancestor themes.\n      deepGet(ancestor.theme, keys);\n\n      if (ancestor.#overrides.has(fullProp)) return !!ancestor.#overrides.get(fullProp);\n      ancestor = ancestor.#parent;\n    }\n\n    return false;\n  }\n\n  constructTheme(theme: SettableTheme<Definition>): ToThemeIFace<Definition> {\n    const constructForNode = (keys: string[] = []) => {\n      const themeNode: Record<string, any> = {};\n\n      Object.keys(deepGet(this.#definition, keys)).forEach(key => {\n        // Ignore comment nodes.\n        if (key === '$comment') return;\n\n        const propKeys = [...keys, key];\n        const defNode: Record<string, any> = deepGet(this.#definition, propKeys);\n\n        // If it is not a leaf node of the theme definition...\n        if (defNode.$type === undefined) {\n          // recursively run for child nodes.\n          defineSmartGetter(themeNode, key, () => constructForNode(propKeys));\n          return;\n        }\n\n        const themeValue = deepGet(theme, propKeys);\n\n        // If a theme value was set for this ThemeMachine...\n        if (themeValue !== undefined) {\n          // set overrides to true, unless it is being reset.\n          this.#overrides.set(propKeys.join('.'), themeValue !== resetToInitial);\n        }\n\n        // If a theme value was set for this ThemeMachine, is not being reset, and is for a non-constant property...\n        if (themeValue !== undefined && themeValue !== resetToInitial && !defNode.$constant) {\n          // set to the provided value.\n          themeNode[key] = themeValue;\n        }\n\n        // If the property has been overridden in the tree (and not reset)...\n        else if (this.overrideInTree(propKeys)) {\n          // set to the value in the parent theme.\n          defineSmartGetter(themeNode, key, () => deepGet(this.#parent!.theme, propKeys));\n        }\n\n        // If the property type is inherited...\n        else if (defNode.$type === 'inherited') {\n          // set to the value of the inherited property in this theme.\n          defineSmartGetter(themeNode, key, () => deepGet(this.theme, defNode.$value.split('.')));\n        }\n\n        // If the property type is literal...\n        else if (defNode.$type === 'literal') {\n          // set to the value listed in the definition.\n          themeNode[key] = defNode.$value;\n        }\n      });\n\n      return themeNode;\n    };\n\n    return constructForNode() as ToThemeIFace<Definition>;\n  }\n\n  constructor({\n    theme = {} as SettableTheme<Definition>,\n    parent,\n    definition\n  }:\n    | { theme?: SettableTheme<Definition>; parent: ThemeMachine<Definition>; definition?: never }\n    | { theme?: SettableTheme<Definition>; parent?: never; definition: Definition }) {\n    this.#parent = parent ?? null;\n    this.#definition = parent ? parent.#definition : definition!;\n    this.#overrides = new Map();\n    this.theme = this.constructTheme(theme);\n  }\n}\n\nexport default ThemeMachine;\n"]}
+{"version":3,"file":"ThemeMachine.js","sourceRoot":"","sources":["../../src/theme/ThemeMachine.ts"],"names":[],"mappings":"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","sourcesContent":["import { deepGet, defineSmartGetter } from '../utils';\nimport { DeepPartial } from '../types';\n\nexport interface ThemeLeaf<Value> {\n  $type: string;\n  $value: Value;\n  $constant?: boolean;\n  $comment?: string;\n}\n\nexport type ThemeDefinition = {\n  [key: string]: ThemeLeaf<unknown> | ThemeDefinition;\n};\n\nexport type ToThemeIFace<Node, Extension = never> = Node extends ThemeLeaf<infer LeafVal>\n  ? (LeafVal extends null ? LeafVal | string : LeafVal) | Extension\n  : Node extends object\n  ? {\n      readonly [Key in Exclude<keyof Node, '$comment'>]: ToThemeIFace<Node[Key], Extension>;\n    }\n  : Node | Extension;\n\nexport type SettableTheme<Def extends ThemeDefinition> = DeepPartial<ToThemeIFace<Def, symbol>>;\n\nexport const resetToInitial = Symbol.for('@pega/cosmos-react-core.theme.resetToInitial');\n\nexport interface ThemeMachineLike<Definition extends ThemeDefinition> {\n  parent: ThemeMachineLike<Definition> | null;\n\n  definition: Definition;\n\n  overrides: Map<string, boolean>;\n\n  readonly theme: ToThemeIFace<Definition>;\n}\n\nclass ThemeMachine<Definition extends ThemeDefinition> implements ThemeMachineLike<Definition> {\n  parent: ThemeMachineLike<Definition> | null;\n\n  definition: Definition;\n\n  overrides: Map<string, boolean>;\n\n  readonly theme: ToThemeIFace<Definition>;\n\n  overrideInTree(keys: string[]): boolean {\n    let ancestor: ThemeMachineLike<Definition> | null = this;\n    const fullProp = keys.join('.');\n\n    while (ancestor) {\n      // Trigger getters in the ancestor themes.\n      deepGet(ancestor.theme, keys);\n\n      if (ancestor.overrides.has(fullProp)) return !!ancestor.overrides.get(fullProp);\n      ancestor = ancestor.parent;\n    }\n\n    return false;\n  }\n\n  constructTheme(theme: SettableTheme<Definition>): ToThemeIFace<Definition> {\n    const constructForNode = (keys: string[] = []) => {\n      const themeNode: Record<string, any> = {};\n\n      Object.keys(deepGet(this.definition, keys)).forEach(key => {\n        // Ignore comment nodes.\n        if (key === '$comment') return;\n\n        const propKeys = [...keys, key];\n        const defNode: Record<string, any> = deepGet(this.definition, propKeys);\n\n        // If it is not a leaf node of the theme definition...\n        if (defNode.$type === undefined) {\n          // recursively run for child nodes.\n          defineSmartGetter(themeNode, key, () => constructForNode(propKeys));\n          return;\n        }\n\n        const themeValue = deepGet(theme, propKeys);\n\n        // If a theme value was set for this ThemeMachine...\n        if (themeValue !== undefined) {\n          // set overrides to true, unless it is being reset.\n          this.overrides.set(propKeys.join('.'), themeValue !== resetToInitial);\n        }\n\n        // If a theme value was set for this ThemeMachine, is not being reset, and is for a non-constant property...\n        if (themeValue !== undefined && themeValue !== resetToInitial && !defNode.$constant) {\n          // set to the provided value.\n          themeNode[key] = themeValue;\n        }\n\n        // If the property has been overridden in the tree (and not reset)...\n        else if (this.overrideInTree(propKeys)) {\n          // set to the value in the parent theme.\n          defineSmartGetter(themeNode, key, () => deepGet(this.parent!.theme, propKeys));\n        }\n\n        // If the property type is inherited...\n        else if (defNode.$type === 'inherited') {\n          // set to the value of the inherited property in this theme.\n          defineSmartGetter(themeNode, key, () => deepGet(this.theme, defNode.$value.split('.')));\n        }\n\n        // If the property type is literal...\n        else if (defNode.$type === 'literal') {\n          // set to the value listed in the definition.\n          themeNode[key] = defNode.$value;\n        }\n      });\n\n      return themeNode;\n    };\n\n    return constructForNode() as ToThemeIFace<Definition>;\n  }\n\n  constructor({\n    theme = {} as SettableTheme<Definition>,\n    parent,\n    definition\n  }:\n    | {\n        theme?: SettableTheme<Definition>;\n        parent: ThemeMachineLike<Definition>;\n        definition?: never;\n      }\n    | { theme?: SettableTheme<Definition>; parent?: never; definition: Definition }) {\n    this.parent = parent ?? null;\n    this.definition = parent ? parent.definition : definition;\n    this.overrides = new Map();\n    this.theme = this.constructTheme(theme);\n  }\n}\n\nexport default ThemeMachine;\n"]}

package/lib/theme/theme.d.ts

@@ -415,6 +415,10 @@ export declare const BaseThemeMachine: ThemeMachine<{
                 $type: string;
                 $value: string;
             };
+            "focus-solid": {
+                $type: string;
+                $value: string;
+            };
             "focus-filter": {
                 $type: string;
                 $value: string;
@@ -476,6 +480,28 @@ export declare const BaseThemeMachine: ThemeMachine<{
                 $value: string;
             };
         };
+        "content-width": {
+            xs: {
+                $type: string;
+                $value: string;
+            };
+            sm: {
+                $type: string;
+                $value: string;
+            };
+            md: {
+                $type: string;
+                $value: string;
+            };
+            lg: {
+                $type: string;
+                $value: string;
+            };
+            xl: {
+                $type: string;
+                $value: string;
+            };
+        };
     };
     components: {
         "app-shell": {
@@ -1589,6 +1615,7 @@ export declare const WorkTheme: {
             readonly "high-filter": string;
             readonly "low-filter": string;
             readonly "focus-inverted": string;
+            readonly "focus-solid": string;
             readonly "focus-filter": string;
             readonly "focus-inverted-filter": string;
         };
@@ -1599,6 +1626,13 @@ export declare const WorkTheme: {
             readonly md: string;
             readonly lg: string;
         };
+        readonly "content-width": {
+            readonly xs: string;
+            readonly xl: string;
+            readonly sm: string;
+            readonly md: string;
+            readonly lg: string;
+        };
     };
     readonly components: {
         readonly button: {
@@ -2153,6 +2187,7 @@ export declare const defaultThemeProp: Readonly<{
                 readonly "high-filter": string;
                 readonly "low-filter": string;
                 readonly "focus-inverted": string;
+                readonly "focus-solid": string;
                 readonly "focus-filter": string;
                 readonly "focus-inverted-filter": string;
             };
@@ -2163,6 +2198,13 @@ export declare const defaultThemeProp: Readonly<{
                 readonly md: string;
                 readonly lg: string;
             };
+            readonly "content-width": {
+                readonly xs: string;
+                readonly xl: string;
+                readonly sm: string;
+                readonly md: string;
+                readonly lg: string;
+            };
         };
         readonly components: {
             readonly button: {

package/lib/theme/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme/theme.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme/theme.ts"],"names":[],"mappings":"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"}

package/lib/theme/themeDefinition.json

@@ -285,6 +285,10 @@
                 "$type": "literal",
                 "$value": "0 0 0 0.125rem rgba(255, 255, 255, 0.30)"
             },
+            "focus-solid": {
+                "$type": "literal",
+                "$value": "0 0 0 0.0625rem rgb(0, 118, 209)"
+            },
             "focus-filter": {
                 "$type": "literal",
                 "$value": "drop-shadow(0 0 0.125rem rgba(0, 118, 209, 0.30))"
@@ -345,6 +349,28 @@
                 "$type": "literal",
                 "$value": "125em"
             }
+        },
+        "content-width": {
+            "xs": {
+                "$type": "literal",
+                "$value": "20ch"
+            },
+            "sm": {
+                "$type": "literal",
+                "$value": "40ch"
+            },
+            "md": {
+                "$type": "literal",
+                "$value": "60ch"
+            },
+            "lg": {
+                "$type": "literal",
+                "$value": "80ch"
+            },
+            "xl": {
+                "$type": "literal",
+                "$value": "100ch"
+            }
         }
     },
     "components": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-core",
-  "version": "3.0.0-dev.13.0",
+  "version": "3.0.0-dev.16.0",
   "description": "Cosmos is a visual design system and UI component collection. Its goal is to empower application developers in their pursuit to create engaging and rewarding user experiences.",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
@@ -15,7 +15,10 @@
     "LICENSE",
     "lib"
   ],
-  "sideEffects": false,
+  "sideEffects": [
+    "./src/init.ts",
+    "./lib/init.js"
+  ],
   "scripts": {
     "build": "tsc -b"
   },