@muraldevkit/ui-toolkit 4.66.0-dev-7XJy.1 → 4.66.0-dev-7K0j.1

package/dist/types/utils/setAttributes/setAttributes.d.ts

@@ -0,0 +1,35 @@
+export type AttrsObject = Record<string, any>;
+/**
+ * Object that contains all of the classes that can be applied to an element
+ * and a condition that determines if that instance should have it
+ * applied or not. The structure is:
+ * "my-class": !theConditional
+ */
+export type ClassObject = Record<string, boolean>;
+/**
+ * Sets up a classObject to be used by the className prop
+ *
+ * @todo - 2563 - use setClasses across components
+ * @param {string} customClasses - custom classes to apply via the attrs prop
+ * @param {ClassObject} defaultClasses - design system component classes to apply
+ * @returns {ClassObject} - with all classes
+ */
+export declare const setClasses: (customClasses: AttrsObject | undefined, defaultClasses: ClassObject) => ClassObject;
+/**
+ * Set an object of attributes to be used in a given component.
+ *
+ * @param {AttrsObject} attributes - The custom attributes passed to the component
+ * @param {AttrsObject} defaults - An optional object of the default attributes of a component
+ * @param {string} className - Default classes to apply to the component
+ *
+ * Use when applying attributes such as a className directly to a react component.
+ * @returns {AttrsObject} - An object of component attributes
+ */
+export declare const setAttributes: (attributes: AttrsObject | undefined, defaults?: AttrsObject, className?: string) => AttrsObject;
+/**
+ *  Generates unique identifier
+ *
+ * @param {string} prefix  - prefix for identifier
+ * @returns {string} - prefixed unique identifier
+ */
+export declare const getUniqueId: (prefix?: string) => string;

package/dist/types/utils/trapFocus/index.d.ts

@@ -0,0 +1,22 @@
+export declare const FOCUSABLE_ELEMENTS_SELECTOR: string;
+/**
+ * Focus trap logic
+ * @param {HTMLElement} element - The component props.
+ * @returns {HTMLElement[]} - The focusable elements inside the element.
+ */
+export declare const getFocusableElementsInsideElement: (element: HTMLElement) => HTMLElement[];
+/**
+ * Gets the first element with the data-autofocus="true" attribute within the container element
+ * @param {HTMLElement} containerElement - container element
+ * @returns {HTMLElement | undefined} - the first element that has autofocus="true" or undefined
+ */
+export declare const getElementWithAutofocus: (containerElement: HTMLElement) => HTMLElement | undefined;
+/**
+ * Traps focus inside of an element
+ * Adapted from https://hidde.blog/using-javascript-to-trap-focus-in-an-element/
+ * @param {HTMLElement} element // Element to trap focus in
+ * @param {boolean} disableAutofocus // Whether to disable autofocus
+ * @returns {Function}          // Cleanup function to be run when component is
+ *                              // removed from the DOM
+ */
+export declare const trapFocus: (element: HTMLElement, disableAutofocus?: boolean) => (() => void);

package/dist/utils/trapFocus/index.d.ts

@@ -1,3 +1,4 @@
+export declare const FOCUSABLE_ELEMENTS_SELECTOR: string;
 /**
  * Focus trap logic
  * @param {HTMLElement} element - The component props.

package/package.json

@@ -1,17 +1,55 @@
 {
 	"name": "@muraldevkit/ui-toolkit",
-	"version": "4.66.0-dev-7XJy.1",
+	"version": "4.66.0-dev-7K0j.1",
 	"description": "Mural's UI Toolkit",
 	"main": "./dist/index.js",
 	"module": "./dist/index.js",
 	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/types/index.d.ts",
+			"import": "./dist/esm/index.js",
+			"require": "./dist/cjs/index.js"
+		},
+		"./components/*": {
+			"types": "./dist/types/components/*.d.ts",
+			"import": "./dist/esm/components/*.js",
+			"require": "./dist/cjs/components/*.js"
+		},
+		"./hooks/*": {
+			"types": "./dist/types/hooks/*.d.ts",
+			"import": "./dist/esm/hooks/*.js",
+			"require": "./dist/cjs/hooks/*.js"
+		},
+		"./utils/*": {
+			"types": "./dist/types/utils/*.d.ts",
+			"import": "./dist/esm/utils/*.js",
+			"require": "./dist/cjs/utils/*.js"
+		},
+		"./contexts/*": {
+			"types": "./dist/types/contexts/*.d.ts",
+			"import": "./dist/esm/contexts/*.js",
+			"require": "./dist/cjs/contexts/*.js"
+		},
+		"./styles.css": "./dist/styles.css",
+		"./styles/*": "./dist/styles/*",
+		"./dist/*": "./dist/*",
+		"./package.json": "./package.json"
+	},
+	"sideEffects": [
+		"**/*.css",
+		"**/*.scss"
+	],
 	"files": [
 		"dist"
 	],
 	"scripts": {
 		"prebuild": "rimraf dist",
 		"analyze": "webpack --mode=production --analyze",
-		"build": "webpack --mode=production",
+		"build": "webpack --mode=production && node scripts/build-modules.mjs",
+		"build:modules": "node scripts/build-modules.mjs",
+		"measure:size": "node size-checks/measure.mjs",
+		"measure:size:webpack": "node size-checks/measure-webpack.mjs",
 		"compile": "storybook build",
 		"dev": "storybook dev -p 6006",
 		"dev:dev-tools": "DEV_TOOLS=true storybook dev -p 6006",
@@ -41,6 +79,7 @@
 	},
 	"license": "https://www.mural.co/terms/developer-addendum",
 	"peerDependencies": {
+		"@tactivos/mural-shared": "2.8.0",
 		"lottie-web": "^5.9.6"
 	},
 	"devDependencies": {
@@ -96,6 +135,7 @@
 		"lint-staged": "13.2.2",
 		"mini-css-extract-plugin": "2.9.0",
 		"null-loader": "4.0.1",
+		"postcss-modules": "6.0.1",
 		"prettier": "3.6.2",
 		"react-markdown": "8.0.7",
 		"rimraf": "6.1.0",

package/dist/index.js.LICENSE.txt

@@ -1,8 +0,0 @@
-/**
- * @license
- * Lodash <https://lodash.com/>
- * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
- * Released under MIT license <https://lodash.com/license>
- * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
- * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
- */

package/dist/utils/colors/colors.d.ts

@@ -1,35 +0,0 @@
-type RgbTuple = [number, number, number];
-/**
- * Returns `true` when the input is a valid `#rgb` or `#rrggbb` CSS color string.
- * @param {string} color CSS-like hex color string
- * @returns {boolean} whether the string is a valid hex color
- */
-export declare const isValidHexColor: (color: string) => boolean;
-/**
- * Returns `true` when the input is a valid `rgb(r, g, b)` CSS color string.
- * @param {string} color CSS-like rgb color string
- * @returns {boolean} whether the string is a valid rgb color
- */
-export declare const isValidRgbString: (color: string) => boolean;
-/**
- * Returns `true` when the input is a valid `rgba(r, g, b, a)` CSS color string.
- * @param {string} color CSS-like rgba color string
- * @returns {boolean} whether the string is a valid rgba color
- */
-export declare const isValidRgbaString: (color: string) => boolean;
-/**
- * Converts a valid hex color string to its `[r, g, b]` tuple representation.
- * @param {string} hexColor valid hex color string
- * @returns {RgbTuple} rgb tuple representation of the color
- */
-export declare const hexToRgb: (hexColor: string) => RgbTuple;
-/**
- * Returns the preferred text token for a background color using the same luminance threshold
- * and alpha handling as the previous `@tactivos/mural-shared` helper.
- * @param {string} backgroundColor background color to evaluate
- * @param {string} blackTextColor token returned for light/transparent backgrounds
- * @param {string} whiteTextColor token returned for dark backgrounds
- * @returns {string} selected text token
- */
-export declare const stickyTextColor: <T extends string>(backgroundColor: string, blackTextColor: T, whiteTextColor: T) => T;
-export {};

package/dist/utils/colors/index.d.ts

@@ -1 +0,0 @@
-export * from './colors';