@uniformdev/design-system 18.18.1-alpha.12 → 18.19.0

package/dist/esm/index.js

@@ -1196,7 +1196,9 @@ var customIcons = {
 // src/components/Icons/IconsProvider.tsx
 import { jsx as jsx5 } from "@emotion/react/jsx-runtime";
 var IconContext = createContext({
+  /** object mapping of available icons */
   iconsMap: {},
+  /** sets the loading state of the icon */
   isLoading: true
 });
 function useIconContext() {
@@ -8275,6 +8277,7 @@ var Button = React5.forwardRef(
       ghost: buttonGhost,
       ghostDestructive: buttonGhostDestructive,
       unimportant: buttonUnimportant,
+      /** @deprecated */
       tertiary: buttonTertiary
     };
     const btnSize = {
@@ -9018,6 +9021,9 @@ var counterIcon = css24`
 // src/components/Counter/Counter.tsx
 import { jsx as jsx27, jsxs as jsxs15 } from "@emotion/react/jsx-runtime";
 var Counter = ({ count }) => {
+  if (typeof count === "undefined") {
+    return null;
+  }
   const isTripleDigits = count > 99 ? /* @__PURE__ */ jsxs15("span", { css: counterTripleValue, title: `${count}`, children: [
     "99",
     /* @__PURE__ */ jsx27(Icon, { icon: "math-plus", iconColor: "currentColor", size: "0.5rem", css: counterIcon })
@@ -9078,6 +9084,7 @@ import * as React8 from "react";
 // src/components/Details/Details.styles.ts
 import { css as css26 } from "@emotion/react";
 var details = css26`
+  cursor: pointer;
   &[open] {
     & > summary svg {
       rotate: 0deg;
@@ -9712,6 +9719,7 @@ function InputComboBox(props) {
             ...base,
             margin: "0",
             padding: "0",
+            // Prevents input shadow when focused within the select area
             "& > input": {
               boxShadow: "none !important"
             },
@@ -9731,11 +9739,13 @@ function InputComboBox(props) {
           return {
             ...base,
             className: "input-combobox-control",
+            // Used to provide overriding styles for blue focus ring and offset borders
             border: state.isFocused ? "1px solid transparent" : "1px solid var(--gray-400)",
             lineHeight: 1.25,
             outline: state.isFocused ? "1px solid var(--brand-secondary-1)" : "none",
             outlineOffset: 0,
             minHeight: "58px",
+            // matches the min-height of other input fields
             boxShadow: "none",
             "&:hover": {
               boxShadow: "none"
@@ -10169,6 +10179,7 @@ var LimitsBar = ({ current, max, label }) => {
   const colorMap = {
     base: "var(--gray-400)",
     warn: "#facc15",
+    // Not in the design system token at present
     danger: "var(--brand-secondary-5)"
   };
   const statusColor = progressBarValue === 100 ? colorMap.danger : progressBarValue >= 75 ? colorMap.warn : colorMap.base;
@@ -11312,7 +11323,7 @@ var TableCellData = React14.forwardRef(
 );
 
 // src/components/Tabs/Tabs.tsx
-import { createContext as createContext4, useContext as useContext5, useEffect as useEffect7 } from "react";
+import { createContext as createContext4, useContext as useContext5, useEffect as useEffect7, useMemo as useMemo2 } from "react";
 import {
   Tab as ReakitTab,
   TabList as ReakitTabList,
@@ -11342,6 +11353,7 @@ var tabButtonStyles = css54`
 var tabButtonGroupStyles = css54`
   display: flex;
   gap: var(--spacing-base);
+  border-bottom: 1px solid var(--gray-300);
 `;
 
 // src/components/Tabs/Tabs.tsx
@@ -11354,15 +11366,26 @@ var useCurrentTab = () => {
   }
   return context;
 };
-var Tabs = ({ children, onSelectedIdChange, ...props }) => {
-  const tab = useTabState(props);
+var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...props }) => {
+  const selected = useMemo2(() => {
+    if (selectedId)
+      return selectedId;
+    return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
+  }, [selectedId, useHashForState]);
+  const tab = useTabState({ ...props, selectedId: selected });
   useEffect7(() => {
     var _a;
-    onSelectedIdChange == null ? void 0 : onSelectedIdChange((_a = tab.selectedId) != null ? _a : void 0);
-  }, [tab.selectedId, onSelectedIdChange]);
+    const selectedValueWithoutNull = (_a = tab.selectedId) != null ? _a : void 0;
+    onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
+    if (useHashForState && typeof window !== "undefined") {
+      window.location.hash = selectedValueWithoutNull != null ? selectedValueWithoutNull : "";
+    }
+  }, [tab.selectedId, onSelectedIdChange, useHashForState]);
   useEffect7(() => {
-    tab.setSelectedId(props.selectedId);
-  }, [props.selectedId]);
+    if (selected && selected !== tab.selectedId) {
+      tab.setSelectedId(selected);
+    }
+  }, [selected]);
   return /* @__PURE__ */ jsx67(CurrentTabContext.Provider, { value: tab, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 import * as React$1 from 'react';
 import React__default, { RefObject, ReactNode, HTMLAttributes } from 'react';
+import { GroupBase } from 'react-select';
+export { ActionMeta, FormatOptionLabelContext, FormatOptionLabelMeta, GetOptionLabel, GetOptionValue, GroupBase, GroupHeadingProps, GroupProps, MenuListProps, MenuPlacement, MultiValue, MultiValueGenericProps, MultiValueProps, MultiValueRemoveProps, OnChangeValue, OptionContext, OptionProps, Options, OptionsOrGroups } from 'react-select';
 import * as _emotion_react from '@emotion/react';
 import { SerializedStyles } from '@emotion/react';
 import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-namespace';
@@ -7,7 +9,6 @@ import { LottieComponentProps } from 'lottie-react';
 import { ButtonProps as ButtonProps$1 } from 'reakit/Button';
 import { MenuProps as MenuProps$1, MenuItemHTMLProps } from 'reakit';
 import { IconType as IconType$1, IconBaseProps } from 'react-icons';
-import { GroupBase } from 'react-select';
 import InternalSelect from 'react-select/dist/declarations/src/Select';
 import { StateManagerProps } from 'react-select/dist/declarations/src/useStateManager';
 import { MenuHTMLProps, MenuProps as MenuProps$2, MenuStateReturn } from 'reakit/Menu';
@@ -367,11 +368,11 @@ type CardContainerProps = React$1.HTMLAttributes<HTMLDivElement> & {
 declare const CardContainer: ({ bgColor, padding, withLastColumn, children, ...props }: CardContainerProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 type CounterProps = {
-    /** sets the count value, a 0 will show a dot instead of a number */
-    count: number;
+    /** sets the count value, a 0 will show a dot instead of a number. Undefined will cause the counter to disappear. */
+    count: number | undefined;
 };
 /** @example <Counter count={1} /> */
-declare const Counter: ({ count }: CounterProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const Counter: ({ count }: CounterProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element | null;
 
 type TextAlignProps = 'left' | 'right' | 'center';
 type BoxHeightProps = 'auto' | 'xs' | 'sm' | 'md' | 'lg';
@@ -1119,8 +1120,9 @@ interface TabsProps {
     manual?: boolean;
     orientation?: TabState['orientation'];
     onSelectedIdChange?: (tabName: string | undefined) => void;
+    useHashForState?: boolean;
 }
-declare const Tabs: ({ children, onSelectedIdChange, ...props }: TabsProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const Tabs: ({ children, onSelectedIdChange, useHashForState, selectedId, ...props }: TabsProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 declare const TabButtonGroup: ({ children, ...props }: Partial<TabListProps>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 interface TabButtonProps extends Partial<TabProps> {
     id: string;

package/dist/index.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -1343,7 +1347,9 @@ var customIcons = {
 // src/components/Icons/IconsProvider.tsx
 var import_jsx_runtime4 = require("@emotion/react/jsx-runtime");
 var IconContext = (0, import_react12.createContext)({
+  /** object mapping of available icons */
   iconsMap: {},
+  /** sets the loading state of the icon */
   isLoading: true
 });
 function useIconContext() {
@@ -8422,6 +8428,7 @@ var Button = React5.forwardRef(
       ghost: buttonGhost,
       ghostDestructive: buttonGhostDestructive,
       unimportant: buttonUnimportant,
+      /** @deprecated */
       tertiary: buttonTertiary
     };
     const btnSize = {
@@ -9161,6 +9168,9 @@ var counterIcon = import_react31.css`
 // src/components/Counter/Counter.tsx
 var import_jsx_runtime26 = require("@emotion/react/jsx-runtime");
 var Counter = ({ count }) => {
+  if (typeof count === "undefined") {
+    return null;
+  }
   const isTripleDigits = count > 99 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { css: counterTripleValue, title: `${count}`, children: [
     "99",
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, { icon: "math-plus", iconColor: "currentColor", size: "0.5rem", css: counterIcon })
@@ -9221,6 +9231,7 @@ var React8 = __toESM(require("react"));
 // src/components/Details/Details.styles.ts
 var import_react33 = require("@emotion/react");
 var details = import_react33.css`
+  cursor: pointer;
   &[open] {
     & > summary svg {
       rotate: 0deg;
@@ -9855,6 +9866,7 @@ function InputComboBox(props) {
             ...base,
             margin: "0",
             padding: "0",
+            // Prevents input shadow when focused within the select area
             "& > input": {
               boxShadow: "none !important"
             },
@@ -9874,11 +9886,13 @@ function InputComboBox(props) {
           return {
             ...base,
             className: "input-combobox-control",
+            // Used to provide overriding styles for blue focus ring and offset borders
             border: state.isFocused ? "1px solid transparent" : "1px solid var(--gray-400)",
             lineHeight: 1.25,
             outline: state.isFocused ? "1px solid var(--brand-secondary-1)" : "none",
             outlineOffset: 0,
             minHeight: "58px",
+            // matches the min-height of other input fields
             boxShadow: "none",
             "&:hover": {
               boxShadow: "none"
@@ -10312,6 +10326,7 @@ var LimitsBar = ({ current, max, label }) => {
   const colorMap = {
     base: "var(--gray-400)",
     warn: "#facc15",
+    // Not in the design system token at present
     danger: "var(--brand-secondary-5)"
   };
   const statusColor = progressBarValue === 100 ? colorMap.danger : progressBarValue >= 75 ? colorMap.warn : colorMap.base;
@@ -11480,6 +11495,7 @@ var tabButtonStyles = import_react66.css`
 var tabButtonGroupStyles = import_react66.css`
   display: flex;
   gap: var(--spacing-base);
+  border-bottom: 1px solid var(--gray-300);
 `;
 
 // src/components/Tabs/Tabs.tsx
@@ -11492,15 +11508,26 @@ var useCurrentTab = () => {
   }
   return context;
 };
-var Tabs = ({ children, onSelectedIdChange, ...props }) => {
-  const tab = (0, import_Tab.useTabState)(props);
+var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...props }) => {
+  const selected = (0, import_react67.useMemo)(() => {
+    if (selectedId)
+      return selectedId;
+    return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
+  }, [selectedId, useHashForState]);
+  const tab = (0, import_Tab.useTabState)({ ...props, selectedId: selected });
   (0, import_react67.useEffect)(() => {
     var _a;
-    onSelectedIdChange == null ? void 0 : onSelectedIdChange((_a = tab.selectedId) != null ? _a : void 0);
-  }, [tab.selectedId, onSelectedIdChange]);
+    const selectedValueWithoutNull = (_a = tab.selectedId) != null ? _a : void 0;
+    onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
+    if (useHashForState && typeof window !== "undefined") {
+      window.location.hash = selectedValueWithoutNull != null ? selectedValueWithoutNull : "";
+    }
+  }, [tab.selectedId, onSelectedIdChange, useHashForState]);
   (0, import_react67.useEffect)(() => {
-    tab.setSelectedId(props.selectedId);
-  }, [props.selectedId]);
+    if (selected && selected !== tab.selectedId) {
+      tab.setSelectedId(selected);
+    }
+  }, [selected]);
   return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(CurrentTabContext.Provider, { value: tab, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "18.18.1-alpha.12+e9f4d7eda",
+  "version": "18.19.0",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -14,7 +14,8 @@
     "test": "jest --maxWorkers=1 --passWithNoTests",
     "lint": "eslint \"src/**/*.{js,ts,tsx}\"",
     "format": "prettier --write \"src/**/*.{js,ts,tsx}\"",
-    "create:component": "hygen component with-prompt"
+    "create:component": "hygen component with-prompt",
+    "document": "api-extractor run --local"
   },
   "devDependencies": {
     "@emotion/jest": "11.10.5",
@@ -26,7 +27,7 @@
     "postcss": "8.4.21",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "tsup": "6.5.0"
+    "tsup": "6.6.3"
   },
   "dependencies": {
     "@emotion/react": "11.10.5",
@@ -49,5 +50,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e9f4d7eda7b1b425205d0be4ec736ebd5dbaed4d"
+  "gitHead": "bd4414826a6d38b928b5ba2ea68e58160b784562"
 }