@telus-uds/components-base 1.49.0 → 1.50.0

package/CHANGELOG.md

@@ -1,12 +1,25 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 09 Jun 2023 00:18:16 GMT and should not be manually modified.
+This log was last generated on Wed, 14 Jun 2023 00:01:25 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.50.0
+
+Wed, 14 Jun 2023 00:01:25 GMT
+
+### Minor changes
+
+- Datepicker refactor (srikanthkhari@gmail.com)
+- Bump @telus-uds/system-theme-tokens to v2.32.0
+
+### Patches
+
+- Allow dynamic swap of `defaultTheme` passed to `ThemeProvider` (shahzaibkhalidmalik@outlook.com)
+
 ## 1.49.0
 
-Fri, 09 Jun 2023 00:18:16 GMT
+Fri, 09 Jun 2023 00:28:33 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -547,12 +547,6 @@
         "calendarMonthCaptionFontWeight": "fontWeight",
         "calendarMonthCaptionLineHeight": "lineHeight",
         "calendarMonthCaptionPaddingBottom": "size",
-        "dateInputBorderColor": "color",
-        "dateInputBorderRadius": "radius",
-        "dateInputFocusBorderColor": "color",
-        "dateInputHoverBorderColor": "color",
-        "dateInputInsideBorderColor": "color",
-        "dateInputInsideColor": "color",
         "dateInputStrokeColor": "color",
         "dayPickerWeekHeaderColor": "color",
         "dayPickerWeekHeaderFontName": "fontName",
@@ -10089,6 +10083,10 @@
                     "themeTokensVersion": {
                       "name": "string",
                       "required": true
+                    },
+                    "name": {
+                      "name": "string",
+                      "required": true
                     }
                   },
                   "required": true

package/lib/TextInput/TextInput.js

@@ -62,21 +62,23 @@ const TextInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       validation: supportsProps.validation
     }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, {
-    nativeID: nativeID,
-    ...supportsProps,
-    children: _ref2 => {
-      let {
-        inputId,
-        ...propsFromInputSupports
-      } = _ref2;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
-        ref: ref,
-        nativeID: inputId,
-        ...propsFromInputSupports,
-        ...inputProps
-      });
-    }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, {
+      nativeID: nativeID,
+      ...supportsProps,
+      children: _ref2 => {
+        let {
+          inputId,
+          ...propsFromInputSupports
+        } = _ref2;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
+          ref: ref,
+          nativeID: inputId,
+          ...propsFromInputSupports,
+          ...inputProps
+        });
+      }
+    }), rest.children]
   });
 });
 TextInput.displayName = 'TextInput';

package/lib/ThemeProvider/ThemeProvider.js

@@ -45,6 +45,11 @@ const ThemeProvider = _ref => {
     themeOptions = {}
   } = _ref;
   const [theme, setTheme] = (0, _react.useState)(defaultTheme);
+  (0, _react.useEffect)(() => {
+    if (theme.metadata.name !== defaultTheme.metadata.name) {
+      setTheme(defaultTheme);
+    }
+  }, [theme.metadata.name, defaultTheme]);
   const appliedThemeOptions = { ...defaultThemeOptions,
     ...themeOptions
   }; // Validate the theme tokens version on every render.
@@ -67,7 +72,8 @@ ThemeProvider.propTypes = {
   children: _propTypes.default.node.isRequired,
   defaultTheme: _propTypes.default.shape({
     metadata: _propTypes.default.shape({
-      themeTokensVersion: _propTypes.default.string.isRequired
+      themeTokensVersion: _propTypes.default.string.isRequired,
+      name: _propTypes.default.string.isRequired
     }).isRequired
   }).isRequired,
 

package/lib-module/TextInput/TextInput.js

@@ -5,6 +5,8 @@ import InputSupports from '../InputSupports';
 import TextInputBase from './TextInputBase';
 import textInputPropTypes from './propTypes';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, inputSupportsProps, textInputHandlerProps, textInputProps, viewProps]);
 /**
  * A basic text input component. Use in forms or individually to receive user's input.
@@ -42,21 +44,23 @@ const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
       validation: supportsProps.validation
     }
   };
-  return /*#__PURE__*/_jsx(InputSupports, {
-    nativeID: nativeID,
-    ...supportsProps,
-    children: _ref2 => {
-      let {
-        inputId,
-        ...propsFromInputSupports
-      } = _ref2;
-      return /*#__PURE__*/_jsx(TextInputBase, {
-        ref: ref,
-        nativeID: inputId,
-        ...propsFromInputSupports,
-        ...inputProps
-      });
-    }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(InputSupports, {
+      nativeID: nativeID,
+      ...supportsProps,
+      children: _ref2 => {
+        let {
+          inputId,
+          ...propsFromInputSupports
+        } = _ref2;
+        return /*#__PURE__*/_jsx(TextInputBase, {
+          ref: ref,
+          nativeID: inputId,
+          ...propsFromInputSupports,
+          ...inputProps
+        });
+      }
+    }), rest.children]
   });
 });
 TextInput.displayName = 'TextInput';

package/lib-module/ThemeProvider/ThemeProvider.js

@@ -1,4 +1,4 @@
-import React, { createContext, useState } from 'react';
+import React, { createContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { validateThemeTokensVersion } from './utils';
 import responsiveProps from '../utils/props/responsiveProps';
@@ -24,6 +24,11 @@ const ThemeProvider = _ref => {
     themeOptions = {}
   } = _ref;
   const [theme, setTheme] = useState(defaultTheme);
+  useEffect(() => {
+    if (theme.metadata.name !== defaultTheme.metadata.name) {
+      setTheme(defaultTheme);
+    }
+  }, [theme.metadata.name, defaultTheme]);
   const appliedThemeOptions = { ...defaultThemeOptions,
     ...themeOptions
   }; // Validate the theme tokens version on every render.
@@ -46,7 +51,8 @@ ThemeProvider.propTypes = {
   children: PropTypes.node.isRequired,
   defaultTheme: PropTypes.shape({
     metadata: PropTypes.shape({
-      themeTokensVersion: PropTypes.string.isRequired
+      themeTokensVersion: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired
     }).isRequired
   }).isRequired,
 

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.2.1",
-    "@telus-uds/system-theme-tokens": "^2.31.0",
+    "@telus-uds/system-theme-tokens": "^2.32.0",
     "airbnb-prop-types": "^2.16.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
@@ -72,5 +72,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.49.0"
+  "version": "1.50.0"
 }

package/src/Card/CardBase.jsx

@@ -42,7 +42,6 @@ const selectStyles = ({
 const CardBase = forwardRef(({ children, tokens, dataSet, ...rest }, ref) => {
   const cardStyle = selectStyles(typeof tokens === 'function' ? tokens() : tokens)
   const props = selectProps(rest)
-
   return (
     <View style={cardStyle} dataSet={dataSet} ref={ref} {...props}>
       {children}

package/src/TextInput/TextInput.jsx

@@ -52,11 +52,14 @@ const TextInput = forwardRef(({ tokens, nativeID, variant = {}, ...rest }, ref)
   }
 
   return (
-    <InputSupports nativeID={nativeID} {...supportsProps}>
-      {({ inputId, ...propsFromInputSupports }) => (
-        <TextInputBase ref={ref} nativeID={inputId} {...propsFromInputSupports} {...inputProps} />
-      )}
-    </InputSupports>
+    <>
+      <InputSupports nativeID={nativeID} {...supportsProps}>
+        {({ inputId, ...propsFromInputSupports }) => (
+          <TextInputBase ref={ref} nativeID={inputId} {...propsFromInputSupports} {...inputProps} />
+        )}
+      </InputSupports>
+      {rest.children}
+    </>
   )
 })
 TextInput.displayName = 'TextInput'

package/src/ThemeProvider/ThemeProvider.jsx

@@ -1,4 +1,4 @@
-import React, { createContext, useState } from 'react'
+import React, { createContext, useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import { validateThemeTokensVersion } from './utils'
 import responsiveProps from '../utils/props/responsiveProps'
@@ -22,6 +22,12 @@ const defaultThemeOptions = {
 const ThemeProvider = ({ children, defaultTheme, themeOptions = {} }) => {
   const [theme, setTheme] = useState(defaultTheme)
 
+  useEffect(() => {
+    if (theme.metadata.name !== defaultTheme.metadata.name) {
+      setTheme(defaultTheme)
+    }
+  }, [theme.metadata.name, defaultTheme])
+
   const appliedThemeOptions = { ...defaultThemeOptions, ...themeOptions }
 
   // Validate the theme tokens version on every render.
@@ -42,7 +48,8 @@ ThemeProvider.propTypes = {
   children: PropTypes.node.isRequired,
   defaultTheme: PropTypes.shape({
     metadata: PropTypes.shape({
-      themeTokensVersion: PropTypes.string.isRequired
+      themeTokensVersion: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired
     }).isRequired
   }).isRequired,
   /**