@veeqo/ui 13.13.3 → 13.14.0

package/dist/hoc/index.d.ts

@@ -1,2 +1,3 @@
 export { withLabels } from './withLabels';
 export { withDeprecated } from './withDeprecated';
+export { withClassNames } from './withClassNames';

package/dist/hoc/withClassNames/index.d.ts

@@ -0,0 +1 @@
+export { withClassNames } from './withClassNames';

package/dist/hoc/withClassNames/withClassNames.cjs

@@ -0,0 +1,46 @@
+'use strict';
+
+var React = require('react');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+/**
+ * Creates a wrapper for a specified component that applies a given set of className's when rendered. Useful when
+ * you're rendering multiple components which need to have the same CSS module classnames applied, allowing us to use
+ * a similar approach to styled-components.
+ *
+ * Example usage:
+ *
+ * `styled.ts`:
+ * ```
+ *  const StyledButton = withClassNames(Button, ['button', 'button--primary']);
+ * ```
+ *
+ * `component.tsx`:
+ * ```
+ *  <StyledButton className="other-class">Click me</StyledButton>
+ * ```
+ *
+ * @param Component Component to render with styles applied.
+ * @param classNames An array of class names to apply to instances of the component.
+ */
+const withClassNames = (Component, classNames) => {
+    const ComponentWithClassNames = React__default.default.forwardRef(({ className, ...props }, ref) => React__default.default.createElement(Component, {
+        ...props,
+        ref,
+        className: buildClassnames.buildClassnames([...classNames, className]),
+    }));
+    const componentName = typeof Component === 'string'
+        ? Component
+        : Component.displayName ||
+            Component.name ||
+            'Component';
+    ComponentWithClassNames.displayName = `withClassNames(${componentName})`;
+    return ComponentWithClassNames;
+};
+
+exports.withClassNames = withClassNames;
+//# sourceMappingURL=withClassNames.cjs.map

package/dist/hoc/withClassNames/withClassNames.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"withClassNames.cjs","sources":["../../../src/hoc/withClassNames/withClassNames.ts"],"sourcesContent":["import React from 'react';\nimport { AnyStyledComponent } from 'styled-components';\nimport { buildClassnames } from '../../utils/buildClassnames';\n\n/**\n * Creates a wrapper for a specified component that applies a given set of className's when rendered. Useful when\n * you're rendering multiple components which need to have the same CSS module classnames applied, allowing us to use\n * a similar approach to styled-components.\n *\n * Example usage:\n *\n * `styled.ts`:\n * ```\n *  const StyledButton = withClassNames(Button, ['button', 'button--primary']);\n * ```\n *\n * `component.tsx`:\n * ```\n *  <StyledButton className=\"other-class\">Click me</StyledButton>\n * ```\n *\n * @param Component Component to render with styles applied.\n * @param classNames An array of class names to apply to instances of the component.\n */\nexport const withClassNames = <P extends { className?: string }>(\n  Component: React.ComponentType<P> | keyof JSX.IntrinsicElements | AnyStyledComponent,\n  classNames: string[],\n) => {\n  const ComponentWithClassNames = React.forwardRef<unknown, P>(({ className, ...props }, ref) =>\n    React.createElement(Component, {\n      ...(props as P),\n      ref,\n      className: buildClassnames([...classNames, className]),\n    }),\n  );\n\n  const componentName =\n    typeof Component === 'string'\n      ? Component\n      : (Component as React.ComponentType<P>).displayName ||\n        (Component as React.ComponentType<P>).name ||\n        'Component';\n\n  ComponentWithClassNames.displayName = `withClassNames(${componentName})`;\n\n  return ComponentWithClassNames;\n};\n"],"names":["React","buildClassnames"],"mappings":";;;;;;;;;AAIA;;;;;;;;;;;;;;;;;;;AAmBG;MACU,cAAc,GAAG,CAC5B,SAAoF,EACpF,UAAoB,KAClB;IACF,MAAM,uBAAuB,GAAGA,sBAAK,CAAC,UAAU,CAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KACxFA,sBAAK,CAAC,aAAa,CAAC,SAAS,EAAE;AAC7B,QAAA,GAAI,KAAW;QACf,GAAG;QACH,SAAS,EAAEC,+BAAe,CAAC,CAAC,GAAG,UAAU,EAAE,SAAS,CAAC,CAAC;AACvD,KAAA,CAAC,CACH;AAED,IAAA,MAAM,aAAa,GACjB,OAAO,SAAS,KAAK;AACnB,UAAE;UACC,SAAoC,CAAC,WAAW;AAChD,YAAA,SAAoC,CAAC,IAAI;AAC1C,YAAA,WAAW;AAEjB,IAAA,uBAAuB,CAAC,WAAW,GAAG,CAAkB,eAAA,EAAA,aAAa,GAAG;AAExE,IAAA,OAAO,uBAAuB;AAChC;;;;"}

package/dist/hoc/withClassNames/withClassNames.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { AnyStyledComponent } from 'styled-components';
+/**
+ * Creates a wrapper for a specified component that applies a given set of className's when rendered. Useful when
+ * you're rendering multiple components which need to have the same CSS module classnames applied, allowing us to use
+ * a similar approach to styled-components.
+ *
+ * Example usage:
+ *
+ * `styled.ts`:
+ * ```
+ *  const StyledButton = withClassNames(Button, ['button', 'button--primary']);
+ * ```
+ *
+ * `component.tsx`:
+ * ```
+ *  <StyledButton className="other-class">Click me</StyledButton>
+ * ```
+ *
+ * @param Component Component to render with styles applied.
+ * @param classNames An array of class names to apply to instances of the component.
+ */
+export declare const withClassNames: <P extends {
+    className?: string | undefined;
+}>(Component: keyof JSX.IntrinsicElements | AnyStyledComponent | React.ComponentType<P>, classNames: string[]) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<unknown>>;

package/dist/hoc/withClassNames/withClassNames.js

@@ -0,0 +1,40 @@
+import React__default from 'react';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+
+/**
+ * Creates a wrapper for a specified component that applies a given set of className's when rendered. Useful when
+ * you're rendering multiple components which need to have the same CSS module classnames applied, allowing us to use
+ * a similar approach to styled-components.
+ *
+ * Example usage:
+ *
+ * `styled.ts`:
+ * ```
+ *  const StyledButton = withClassNames(Button, ['button', 'button--primary']);
+ * ```
+ *
+ * `component.tsx`:
+ * ```
+ *  <StyledButton className="other-class">Click me</StyledButton>
+ * ```
+ *
+ * @param Component Component to render with styles applied.
+ * @param classNames An array of class names to apply to instances of the component.
+ */
+const withClassNames = (Component, classNames) => {
+    const ComponentWithClassNames = React__default.forwardRef(({ className, ...props }, ref) => React__default.createElement(Component, {
+        ...props,
+        ref,
+        className: buildClassnames([...classNames, className]),
+    }));
+    const componentName = typeof Component === 'string'
+        ? Component
+        : Component.displayName ||
+            Component.name ||
+            'Component';
+    ComponentWithClassNames.displayName = `withClassNames(${componentName})`;
+    return ComponentWithClassNames;
+};
+
+export { withClassNames };
+//# sourceMappingURL=withClassNames.js.map

package/dist/hoc/withClassNames/withClassNames.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"withClassNames.js","sources":["../../../src/hoc/withClassNames/withClassNames.ts"],"sourcesContent":["import React from 'react';\nimport { AnyStyledComponent } from 'styled-components';\nimport { buildClassnames } from '../../utils/buildClassnames';\n\n/**\n * Creates a wrapper for a specified component that applies a given set of className's when rendered. Useful when\n * you're rendering multiple components which need to have the same CSS module classnames applied, allowing us to use\n * a similar approach to styled-components.\n *\n * Example usage:\n *\n * `styled.ts`:\n * ```\n *  const StyledButton = withClassNames(Button, ['button', 'button--primary']);\n * ```\n *\n * `component.tsx`:\n * ```\n *  <StyledButton className=\"other-class\">Click me</StyledButton>\n * ```\n *\n * @param Component Component to render with styles applied.\n * @param classNames An array of class names to apply to instances of the component.\n */\nexport const withClassNames = <P extends { className?: string }>(\n  Component: React.ComponentType<P> | keyof JSX.IntrinsicElements | AnyStyledComponent,\n  classNames: string[],\n) => {\n  const ComponentWithClassNames = React.forwardRef<unknown, P>(({ className, ...props }, ref) =>\n    React.createElement(Component, {\n      ...(props as P),\n      ref,\n      className: buildClassnames([...classNames, className]),\n    }),\n  );\n\n  const componentName =\n    typeof Component === 'string'\n      ? Component\n      : (Component as React.ComponentType<P>).displayName ||\n        (Component as React.ComponentType<P>).name ||\n        'Component';\n\n  ComponentWithClassNames.displayName = `withClassNames(${componentName})`;\n\n  return ComponentWithClassNames;\n};\n"],"names":["React"],"mappings":";;;AAIA;;;;;;;;;;;;;;;;;;;AAmBG;MACU,cAAc,GAAG,CAC5B,SAAoF,EACpF,UAAoB,KAClB;IACF,MAAM,uBAAuB,GAAGA,cAAK,CAAC,UAAU,CAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KACxFA,cAAK,CAAC,aAAa,CAAC,SAAS,EAAE;AAC7B,QAAA,GAAI,KAAW;QACf,GAAG;QACH,SAAS,EAAE,eAAe,CAAC,CAAC,GAAG,UAAU,EAAE,SAAS,CAAC,CAAC;AACvD,KAAA,CAAC,CACH;AAED,IAAA,MAAM,aAAa,GACjB,OAAO,SAAS,KAAK;AACnB,UAAE;UACC,SAAoC,CAAC,WAAW;AAChD,YAAA,SAAoC,CAAC,IAAI;AAC1C,YAAA,WAAW;AAEjB,IAAA,uBAAuB,CAAC,WAAW,GAAG,CAAkB,eAAA,EAAA,aAAa,GAAG;AAExE,IAAA,OAAO,uBAAuB;AAChC;;;;"}

package/dist/index.cjs

@@ -105,6 +105,7 @@ var useResizeObserver = require('./hooks/useResizeObserver.cjs');
 var useIntersectionObserver = require('./hooks/useIntersectionObserver.cjs');
 var withLabels = require('./hoc/withLabels/withLabels.cjs');
 var withDeprecated = require('./hoc/withDeprecated.cjs');
+var withClassNames = require('./hoc/withClassNames/withClassNames.cjs');
 var buildClassnames = require('./utils/buildClassnames.cjs');
 var color = require('./utils/color.cjs');
 var generateId = require('./utils/generateId.cjs');
@@ -463,6 +464,7 @@ exports.useResizeObserver = useResizeObserver.useResizeObserver;
 exports.useIntersectionObserver = useIntersectionObserver.useIntersectionObserver;
 exports.withLabels = withLabels.withLabels;
 exports.withDeprecated = withDeprecated.withDeprecated;
+exports.withClassNames = withClassNames.withClassNames;
 exports.buildClassnames = buildClassnames.buildClassnames;
 exports.getOpaqueHexColor = color.getOpaqueHexColor;
 exports.hexToRgb = color.hexToRgb;

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.js

@@ -103,6 +103,7 @@ export { useResizeObserver } from './hooks/useResizeObserver.js';
 export { useIntersectionObserver } from './hooks/useIntersectionObserver.js';
 export { withLabels } from './hoc/withLabels/withLabels.js';
 export { withDeprecated } from './hoc/withDeprecated.js';
+export { withClassNames } from './hoc/withClassNames/withClassNames.js';
 export { buildClassnames } from './utils/buildClassnames.js';
 export { getOpaqueHexColor, hexToRgb } from './utils/color.js';
 export { generateId } from './utils/generateId.js';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veeqo/ui",
-  "version": "13.13.3",
+  "version": "13.14.0",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",