@uniformdev/design-system 19.9.2-alpha.3 → 19.11.0

package/dist/esm/index.js

@@ -36,7 +36,7 @@ var Theme = ({ disableReset = false }) => {
 
           /* secondary colours */
           --brand-secondary-1: #1f2b34; /* carbon */
-          --brand-secondary-2: #ecf1f1; /* silver */
+          --brand-secondary-2: var(--gray-50);
           --brand-secondary-3: var(--purple-rain-500);
           --brand-secondary-5: #d9534f; /* brick red */
 
@@ -130,6 +130,7 @@ var Theme = ({ disableReset = false }) => {
           --prose: 65ch;
 
           /* brand shadow styles */
+          --shadow-sm: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
           --shadow-base: rgba(50, 50, 93, 0.25) 0 2px 5px -1px,
             rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
           --shadow-md: 0px 4px 4px rgba(0, 0, 0, 0.25), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
@@ -13362,6 +13363,11 @@ var ScrollableListInner = css48`
   max-height: 24rem;
   overflow-y: auto;
   padding: var(--spacing-sm);
+  /*
+    position: relative prevents an overflow bug where components inside the
+    scrollable list still take up space outside of it in some browsers
+  */
+  position: relative;
 
   > * {
     margin-block: 0 var(--spacing-sm);
@@ -14335,6 +14341,7 @@ var inputIconBtn = css61`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
+  color: var(--gray-500);
   background: none;
   display: flex;
   padding: var(--spacing-2xs);
@@ -14394,17 +14401,17 @@ var ParameterShellContext = createContext5({
   label: "",
   hiddenLabel: void 0,
   errorMessage: void 0,
-  onManuallySetErrorMessage: () => {
+  handleManuallySetErrorMessage: () => {
   }
 });
 var useParameterShell = () => {
-  const { id, label, hiddenLabel, errorMessage, onManuallySetErrorMessage } = useContext6(ParameterShellContext);
+  const { id, label, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = useContext6(ParameterShellContext);
   return {
     id,
     label,
     hiddenLabel,
     errorMessage,
-    onManuallySetErrorMessage
+    handleManuallySetErrorMessage
   };
 };
 
@@ -14489,7 +14496,7 @@ var inputIcon2 = css62`
   background: var(--white);
   border-radius: var(--rounded-md) 0 0 var(--rounded-md);
   border-right: 1px solid var(--gray-100);
-  color: var(--gray-300);
+  color: var(--gray-500);
   display: flex;
   justify-content: center;
   transition: background var(--duration-fast) var(--timing-ease-out);
@@ -14851,7 +14858,7 @@ var extractParameterProps = (props) => {
     hiddenLabel,
     labelLeadingIcon,
     menuItems,
-    onManuallySetErrorMessage,
+    handleManuallySetErrorMessage,
     title,
     hasOverriddenValue,
     onResetOverriddenValue,
@@ -14870,7 +14877,7 @@ var extractParameterProps = (props) => {
       hiddenLabel,
       labelLeadingIcon,
       menuItems,
-      onManuallySetErrorMessage,
+      handleManuallySetErrorMessage,
       title,
       hasOverriddenValue,
       onResetOverriddenValue
@@ -14918,7 +14925,7 @@ var ParameterShell = ({
             label,
             hiddenLabel,
             errorMessage: errorMessaging,
-            onManuallySetErrorMessage: (message) => setErrorMessage(message)
+            handleManuallySetErrorMessage: (message) => setErrorMessage(message)
           },
           children: /* @__PURE__ */ jsxs54(ParameterShellPlaceholder, { children: [
             children,
@@ -14948,6 +14955,7 @@ var BrokenImage = ({ ...props }) => {
   return /* @__PURE__ */ jsxs55(
     "svg",
     {
+      role: "img",
       width: "214",
       height: "214",
       viewBox: "0 0 214 214",
@@ -14977,24 +14985,31 @@ var BrokenImage = ({ ...props }) => {
 var ParameterImageInner = forwardRef10(
   ({ ...props }, ref) => {
     const { value } = props;
-    const { id, label, hiddenLabel, errorMessage, onManuallySetErrorMessage } = useParameterShell();
+    const { id, label, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = useParameterShell();
     const [loading, setLoading] = useState8(false);
     const deferredValue = useDeferredValue(value);
     const errorText = "The text you provided is not a valid URL";
     const updateImageSrc = useCallback3(() => {
+      const validUrl = new RegExp(
+        "^(https?:\\/\\/)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*(\\?[;&a-z\\d%_.~+=-]*)?(\\#[-a-z\\d_]*)?$",
+        "i"
+      );
       let message = void 0;
       try {
         if (value !== "") {
-          new URL(value);
+          const url = String(value).startsWith("//") ? `${location.protocol}${value}` : String(value);
+          if (!url.match(validUrl) || !url.startsWith("https")) {
+            throw Error(errorText);
+          }
         }
         message = void 0;
       } catch (e) {
         message = errorText;
       }
-      if (onManuallySetErrorMessage) {
-        onManuallySetErrorMessage(message);
+      if (handleManuallySetErrorMessage) {
+        handleManuallySetErrorMessage(message);
       }
-    }, [onManuallySetErrorMessage, value]);
+    }, [handleManuallySetErrorMessage, value]);
     const handleLoadEvent = () => {
       if (deferredValue) {
         setLoading(true);
@@ -15005,13 +15020,13 @@ var ParameterImageInner = forwardRef10(
       return () => clearTimeout(timer);
     };
     const handleErrorEvent = () => {
-      if (onManuallySetErrorMessage) {
-        onManuallySetErrorMessage(errorText);
+      if (handleManuallySetErrorMessage) {
+        handleManuallySetErrorMessage(errorText);
       }
     };
     useEffect9(() => {
       updateImageSrc();
-    }, [value]);
+    }, [deferredValue]);
     return /* @__PURE__ */ jsxs55(Fragment11, { children: [
       /* @__PURE__ */ jsx83(
         "input",
@@ -15030,6 +15045,7 @@ var ParameterImageInner = forwardRef10(
           "img",
           {
             src: deferredValue,
+            alt: "image preview",
             css: img,
             onLoad: handleLoadEvent,
             onError: handleErrorEvent,
@@ -15989,13 +16005,13 @@ var StatusBulletSmall = css75`
 var StatusDraft = css75`
   &:before {
     background: var(--white);
-    box-shadow: inset 0 0 0 0.125rem var(--brand-primary-1);
+    box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
   }
 `;
 var StatusModified = css75`
   &:before {
-    background: linear-gradient(to right, var(--white) 50%, var(--brand-primary-1) 50% 100%);
-    box-shadow: inset 0 0 0 0.125rem var(--brand-primary-1);
+    background: linear-gradient(to right, var(--white) 50%, var(--primary-action-default) 50% 100%);
+    box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
   }
 `;
 var StatusError = css75`
@@ -16006,7 +16022,7 @@ var StatusError = css75`
 `;
 var StatusPublished = css75`
   &:before {
-    background: var(--brand-secondary-3);
+    background: var(--primary-action-default);
   }
 `;
 var StatusOrphan = css75`

package/dist/index.d.ts

@@ -21279,7 +21279,7 @@ type CommonParameterProps = {
     /** (optional) sets and shows the the info message value */
     infoMessage?: string;
     /** (optional) allows users to manually set the error message state */
-    onManuallySetErrorMessage?: (message: string | undefined) => void;
+    handleManuallySetErrorMessage?: (message: string | undefined) => void;
     /** sets whether to show the override UI */
     hasOverriddenValue?: boolean;
     /** sets the function call of the overriding parameters button */
@@ -21315,7 +21315,7 @@ declare const useParameterShell: () => {
     label: string;
     hiddenLabel: boolean | undefined;
     errorMessage: string | undefined;
-    onManuallySetErrorMessage: ((message: string | undefined) => void) | undefined;
+    handleManuallySetErrorMessage: ((message: string | undefined) => void) | undefined;
 };
 
 type ParameterDataConnectButtonProps = {
@@ -21520,7 +21520,7 @@ declare const extractParameterProps: <T>(props: T & CommonParameterProps & {
         hiddenLabel: boolean | undefined;
         labelLeadingIcon: ReactNode;
         menuItems: ReactNode;
-        onManuallySetErrorMessage: ((message: string | undefined) => void) | undefined;
+        handleManuallySetErrorMessage: ((message: string | undefined) => void) | undefined;
         title: string | undefined;
         hasOverriddenValue: boolean | undefined;
         onResetOverriddenValue: (() => void) | undefined;
@@ -21531,7 +21531,7 @@ declare const extractParameterProps: <T>(props: T & CommonParameterProps & {
         errorTestId?: string | undefined;
         captionTestId?: string | undefined;
         title?: string | undefined;
-    }, "caption" | "label" | "title" | "id" | "menuItems" | "errorMessage" | "warningMessage" | "errorTestId" | "captionTestId" | "hiddenLabel" | "onManuallySetErrorMessage" | "labelLeadingIcon" | "infoMessage" | "hasOverriddenValue" | "onResetOverriddenValue">;
+    }, "caption" | "label" | "title" | "id" | "menuItems" | "errorMessage" | "warningMessage" | "errorTestId" | "captionTestId" | "hiddenLabel" | "handleManuallySetErrorMessage" | "labelLeadingIcon" | "infoMessage" | "hasOverriddenValue" | "onResetOverriddenValue">;
 };
 type ParameterShellOverrideProps = {
     /** sets overriding parameters indicator */
@@ -22014,7 +22014,7 @@ declare const LinkWithRef: React$1.ForwardRefExoticComponent<Omit<React$1.Anchor
 }, "ref"> & React$1.RefAttributes<HTMLAnchorElement>>;
 
 interface RouteProps {
-    as: string;
+    as?: string;
     href: string;
 }
 type PageHeaderSectionProps = React$1.HTMLAttributes<HTMLElement> & {

package/dist/index.js

@@ -254,7 +254,7 @@ var Theme = ({ disableReset = false }) => {
 
           /* secondary colours */
           --brand-secondary-1: #1f2b34; /* carbon */
-          --brand-secondary-2: #ecf1f1; /* silver */
+          --brand-secondary-2: var(--gray-50);
           --brand-secondary-3: var(--purple-rain-500);
           --brand-secondary-5: #d9534f; /* brick red */
 
@@ -348,6 +348,7 @@ var Theme = ({ disableReset = false }) => {
           --prose: 65ch;
 
           /* brand shadow styles */
+          --shadow-sm: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
           --shadow-base: rgba(50, 50, 93, 0.25) 0 2px 5px -1px,
             rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
           --shadow-md: 0px 4px 4px rgba(0, 0, 0, 0.25), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
@@ -13576,6 +13577,11 @@ var ScrollableListInner = import_react61.css`
   max-height: 24rem;
   overflow-y: auto;
   padding: var(--spacing-sm);
+  /*
+    position: relative prevents an overflow bug where components inside the
+    scrollable list still take up space outside of it in some browsers
+  */
+  position: relative;
 
   > * {
     margin-block: 0 var(--spacing-sm);
@@ -14544,6 +14550,7 @@ var inputIconBtn = import_react77.css`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
+  color: var(--gray-500);
   background: none;
   display: flex;
   padding: var(--spacing-2xs);
@@ -14603,17 +14610,17 @@ var ParameterShellContext = (0, import_react78.createContext)({
   label: "",
   hiddenLabel: void 0,
   errorMessage: void 0,
-  onManuallySetErrorMessage: () => {
+  handleManuallySetErrorMessage: () => {
   }
 });
 var useParameterShell = () => {
-  const { id, label, hiddenLabel, errorMessage, onManuallySetErrorMessage } = (0, import_react78.useContext)(ParameterShellContext);
+  const { id, label, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = (0, import_react78.useContext)(ParameterShellContext);
   return {
     id,
     label,
     hiddenLabel,
     errorMessage,
-    onManuallySetErrorMessage
+    handleManuallySetErrorMessage
   };
 };
 
@@ -14698,7 +14705,7 @@ var inputIcon2 = import_react79.css`
   background: var(--white);
   border-radius: var(--rounded-md) 0 0 var(--rounded-md);
   border-right: 1px solid var(--gray-100);
-  color: var(--gray-300);
+  color: var(--gray-500);
   display: flex;
   justify-content: center;
   transition: background var(--duration-fast) var(--timing-ease-out);
@@ -15060,7 +15067,7 @@ var extractParameterProps = (props) => {
     hiddenLabel,
     labelLeadingIcon,
     menuItems,
-    onManuallySetErrorMessage,
+    handleManuallySetErrorMessage,
     title,
     hasOverriddenValue,
     onResetOverriddenValue,
@@ -15079,7 +15086,7 @@ var extractParameterProps = (props) => {
       hiddenLabel,
       labelLeadingIcon,
       menuItems,
-      onManuallySetErrorMessage,
+      handleManuallySetErrorMessage,
       title,
       hasOverriddenValue,
       onResetOverriddenValue
@@ -15127,7 +15134,7 @@ var ParameterShell = ({
             label,
             hiddenLabel,
             errorMessage: errorMessaging,
-            onManuallySetErrorMessage: (message) => setErrorMessage(message)
+            handleManuallySetErrorMessage: (message) => setErrorMessage(message)
           },
           children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(ParameterShellPlaceholder, { children: [
             children,
@@ -15157,6 +15164,7 @@ var BrokenImage = ({ ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
     "svg",
     {
+      role: "img",
       width: "214",
       height: "214",
       viewBox: "0 0 214 214",
@@ -15186,24 +15194,31 @@ var BrokenImage = ({ ...props }) => {
 var ParameterImageInner = (0, import_react86.forwardRef)(
   ({ ...props }, ref) => {
     const { value } = props;
-    const { id, label, hiddenLabel, errorMessage, onManuallySetErrorMessage } = useParameterShell();
+    const { id, label, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = useParameterShell();
     const [loading, setLoading] = (0, import_react86.useState)(false);
     const deferredValue = (0, import_react86.useDeferredValue)(value);
     const errorText = "The text you provided is not a valid URL";
     const updateImageSrc = (0, import_react86.useCallback)(() => {
+      const validUrl = new RegExp(
+        "^(https?:\\/\\/)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*(\\?[;&a-z\\d%_.~+=-]*)?(\\#[-a-z\\d_]*)?$",
+        "i"
+      );
       let message = void 0;
       try {
         if (value !== "") {
-          new URL(value);
+          const url = String(value).startsWith("//") ? `${location.protocol}${value}` : String(value);
+          if (!url.match(validUrl) || !url.startsWith("https")) {
+            throw Error(errorText);
+          }
         }
         message = void 0;
       } catch (e) {
         message = errorText;
       }
-      if (onManuallySetErrorMessage) {
-        onManuallySetErrorMessage(message);
+      if (handleManuallySetErrorMessage) {
+        handleManuallySetErrorMessage(message);
       }
-    }, [onManuallySetErrorMessage, value]);
+    }, [handleManuallySetErrorMessage, value]);
     const handleLoadEvent = () => {
       if (deferredValue) {
         setLoading(true);
@@ -15214,13 +15229,13 @@ var ParameterImageInner = (0, import_react86.forwardRef)(
       return () => clearTimeout(timer);
     };
     const handleErrorEvent = () => {
-      if (onManuallySetErrorMessage) {
-        onManuallySetErrorMessage(errorText);
+      if (handleManuallySetErrorMessage) {
+        handleManuallySetErrorMessage(errorText);
       }
     };
     (0, import_react86.useEffect)(() => {
       updateImageSrc();
-    }, [value]);
+    }, [deferredValue]);
     return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
         "input",
@@ -15239,6 +15254,7 @@ var ParameterImageInner = (0, import_react86.forwardRef)(
           "img",
           {
             src: deferredValue,
+            alt: "image preview",
             css: img,
             onLoad: handleLoadEvent,
             onError: handleErrorEvent,
@@ -16189,13 +16205,13 @@ var StatusBulletSmall = import_react105.css`
 var StatusDraft = import_react105.css`
   &:before {
     background: var(--white);
-    box-shadow: inset 0 0 0 0.125rem var(--brand-primary-1);
+    box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
   }
 `;
 var StatusModified = import_react105.css`
   &:before {
-    background: linear-gradient(to right, var(--white) 50%, var(--brand-primary-1) 50% 100%);
-    box-shadow: inset 0 0 0 0.125rem var(--brand-primary-1);
+    background: linear-gradient(to right, var(--white) 50%, var(--primary-action-default) 50% 100%);
+    box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
   }
 `;
 var StatusError = import_react105.css`
@@ -16206,7 +16222,7 @@ var StatusError = import_react105.css`
 `;
 var StatusPublished = import_react105.css`
   &:before {
-    background: var(--brand-secondary-3);
+    background: var(--primary-action-default);
   }
 `;
 var StatusOrphan = import_react105.css`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "19.9.2-alpha.3+547c8b11d",
+  "version": "19.11.0",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -42,7 +42,7 @@
     "react-select": "5.7.3",
     "react-use": "17.4.0",
     "reakit": "1.3.11",
-    "zod-to-json-schema": "3.21.0"
+    "zod-to-json-schema": "3.21.1"
   },
   "peerDependencies": {
     "react": ">=17 || 17 || 18",
@@ -54,5 +54,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "547c8b11d4655b34250c2fbe3f016c9bc12c3905"
+  "gitHead": "25d492fe923f313b517cbc70d3ff13fdcf97fa34"
 }