npm - @databricks/design-system - Versions diffs - 1.12.20 → 1.12.21 - Mend

@databricks/design-system 1.12.20 → 1.12.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (87) hide show

package/src/design-system/TypeaheadCombobox/CountBadge.tsx CHANGED Viewed

@@ -9,7 +9,11 @@ export interface CountBadgeProps extends React.HTMLAttributes<HTMLDivElement> {
   disabled?: boolean;
 }
-export const CountBadge: React.FC<CountBadgeProps> = ({ countStartAt, totalCount, disabled }: CountBadgeProps) => {
+export const CountBadge: React.FC<React.PropsWithChildren<CountBadgeProps>> = ({
+  countStartAt,
+  totalCount,
+  disabled,
+}: CountBadgeProps) => {
   const { theme } = useDesignSystemTheme();
   return (
     <div

package/src/design-system/TypeaheadCombobox/TypeaheadComboboxControls.tsx CHANGED Viewed

@@ -11,7 +11,7 @@ export interface TypeaheadComboboxControlsProps {
   disabled?: boolean;
 }
-export const TypeaheadComboboxControls: React.FC<any> = ({
+export const TypeaheadComboboxControls: React.FC<React.PropsWithChildren<any>> = ({
   getDownshiftToggleButtonProps,
   showClearSelectionButton,
   showComboboxToggleButton = true,

package/src/design-system/TypeaheadCombobox/TypeaheadComboboxRoot.tsx CHANGED Viewed

@@ -15,7 +15,7 @@ export interface TypeaheadComboboxRootProps<T> extends React.HTMLAttributes<HTML
   children: React.ReactNode;
 }
-export const TypeaheadComboboxRoot: React.FC<TypeaheadComboboxRootProps<any>> = forwardRef<
+export const TypeaheadComboboxRoot: React.FC<React.PropsWithChildren<TypeaheadComboboxRootProps<any>>> = forwardRef<
   HTMLDivElement,
   TypeaheadComboboxRootProps<any>
 >(({ comboboxState, multiSelect = false, children, ...props }, ref) => {

package/src/design-system/TypeaheadCombobox/TypeaheadComboboxSelectedItem.tsx CHANGED Viewed

@@ -65,7 +65,7 @@ const getXIconStyles = (theme: Theme): SerializedStyles => {
   });
 };
-export const TypeaheadComboboxSelectedItem: React.FC<any> = forwardRef<
+export const TypeaheadComboboxSelectedItem: React.FC<React.PropsWithChildren<any>> = forwardRef<
   HTMLSpanElement,
   TypeaheadComboboxSelectedItemProps<unknown>
 >(({ label, item, getSelectedItemProps, removeSelectedItem, disabled, ...restProps }, ref) => {

package/src/design-system/TypeaheadCombobox/tests/TypeaheadCombobox.test.tsx CHANGED Viewed

@@ -29,7 +29,7 @@ import { useComboboxState, useMultipleSelectionState } from '../hooks';
 describe('Typeahead Combobox', () => {
   test('TypeaheadComboboxMenu throws error if not inside TypeaheadComboboxRoot', () => {
-    const TypeaheadComboboxMenuExample: React.FC = () => {
+    const TypeaheadComboboxMenuExample: React.FC<React.PropsWithChildren<unknown>> = () => {
       const [items, setItems] = React.useState<Book[]>(books);
       const comboboxState = useComboboxState<Book>({
@@ -63,7 +63,7 @@ describe('Typeahead Combobox', () => {
   });
   test('TypeaheadComboboxInput throws error if not inside TypeaheadComboboxRoot', () => {
-    const TypeaheadComboboxInputExample: React.FC = () => {
+    const TypeaheadComboboxInputExample: React.FC<React.PropsWithChildren<unknown>> = () => {
       const [items, setItems] = React.useState<Book[]>(books);
       const comboboxState = useComboboxState<Book>({
@@ -84,7 +84,7 @@ describe('Typeahead Combobox', () => {
   });
   test('TypeaheadComboboxMultiSelectInput throws error if not inside TypeaheadComboboxRoot', () => {
-    const TypeaheadComboboxMultiSelectInputExample: React.FC = () => {
+    const TypeaheadComboboxMultiSelectInputExample: React.FC<React.PropsWithChildren<unknown>> = () => {
       const [inputValue, setInputValue] = React.useState('');
       const [selectedItems, setSelectedItems] = React.useState<Book[]>([books[0], books[1]]);
       const items = React.useMemo(() => getFilteredBooks(inputValue), [inputValue]);

package/src/design-system/TypeaheadCombobox/tests/testFixtures.tsx CHANGED Viewed

@@ -79,7 +79,7 @@ export const renderSingleSelectTypeahead = ({
   initialInputValue,
   selectInputProps = {},
 }: renderSingleSelectTypeaheadProps = {}) => {
-  const SingleSelectTypeahead: React.FC = () => {
+  const SingleSelectTypeahead: React.FC<React.PropsWithChildren<unknown>> = () => {
     const [items, setItems] = React.useState<Book[]>(books);
     const comboboxState = useComboboxState<Book>({
@@ -121,7 +121,7 @@ export const renderMultiSelectTypeahead = ({
   preSelectedItems = [],
   multiSelectInputProps = {},
 }: renderMultiSelectTypeaheadProps = {}) => {
-  const MultiSelectTypeahead: React.FC = () => {
+  const MultiSelectTypeahead: React.FC<React.PropsWithChildren<unknown>> = () => {
     const [inputValue, setInputValue] = React.useState('');
     const [selectedItems, setSelectedItems] = React.useState<Book[]>(preSelectedItems);
     const items = React.useMemo(() => getFilteredBooks(inputValue), [inputValue]);
@@ -178,7 +178,7 @@ export const renderSingleSelectTypeaheadWithLabel = ({
   initialInputValue,
   selectInputProps = {},
 }: renderSingleSelectTypeaheadProps = {}) => {
-  const SingleSelectTypeahead: React.FC = () => {
+  const SingleSelectTypeahead: React.FC<React.PropsWithChildren<unknown>> = () => {
     const [items, setItems] = React.useState<Book[]>(books);
     const comboboxState = useComboboxState<Book>({

package/src/design-system/utils/css-utils.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import type { CSSObject } from '@emotion/react';
 import unitless from '@emotion/unitless';
-import _, { memoize } from 'lodash';
+import { memoize, endsWith, isBoolean, isNil, isNumber, isString, mapValues } from 'lodash';
 import type { CSSProperties } from 'react';
 import type { VirtualItem } from 'react-virtual';
@@ -15,14 +15,14 @@ import type { TypographyColor, ValidationState } from '../types';
  * Used to ensure that we always override Ant styles, without worrying about selector precedence.
  */
 export function importantify(obj: CSSObject): CSSObject {
-  return _.mapValues(obj, (value, key) => {
-    if (_.isString(value) || _.isNumber(value) || _.isBoolean(value)) {
+  return mapValues(obj, (value, key) => {
+    if (isString(value) || isNumber(value) || isBoolean(value)) {
       // Make sure we don't double-append important
-      if (_.isString(value) && _.endsWith(value, '!important')) {
+      if (isString(value) && endsWith(value, '!important')) {
         return value;
       }
-      if (_.isNumber(value)) {
+      if (isNumber(value)) {
         if (unitless[key]) {
           return `${value}!important`;
         }
@@ -32,7 +32,7 @@ export function importantify(obj: CSSObject): CSSObject {
       return `${value}!important`;
     }
-    if (_.isNil(value)) {
+    if (isNil(value)) {
       return value;
     }

package/src/design-system/utils/shadow-dom-storybook-wrapper.tsx CHANGED Viewed

@@ -8,7 +8,7 @@ import ReactShadowRoot from 'react-shadow-root';
 import { ApplyDesignSystemFlags, DesignSystemProvider } from '../DesignSystemProvider';
 import { useDesignSystemFlags } from '../Hooks';
-export const ShadowDomWrapper: React.FC = ({ children }) => {
+export const ShadowDomWrapper: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   const popupContainer = useRef<HTMLDivElement>(null);
   const stylesContainer = useRef<HTMLDivElement>(null);
   const [loaded, setLoaded] = useState(false);

package/src/development/Banner/Banner.tsx CHANGED Viewed

@@ -280,7 +280,7 @@ const levelToIconMap: { [key in BannerLevel]: ReactNode } = {
   error: <DangerIcon data-testid="level-error-icon" />,
 };
-export const Banner: React.FC<BannerProps> = (props) => {
+export const Banner: React.FC<React.PropsWithChildren<BannerProps>> = (props) => {
   const {
     level,
     message,

package/src/development/PillControl/PillControl.tsx CHANGED Viewed

@@ -79,6 +79,7 @@ export const Root = React.forwardRef<HTMLDivElement, RootProps>(
 );
 interface ItemProps extends Pick<RadioGroupItemProps, 'children' | 'value' | 'disabled' | 'required'> {
   icon?: React.ReactNode;
+  className?: string;
 }
 export const Item = React.forwardRef<HTMLButtonElement, ItemProps>(({ children, icon, ...props }, forwardedRef) => {
   const size = React.useContext(RadioGroupContext);

package/src/development/TreeGrid/TreeGrid.test.tsx CHANGED Viewed

@@ -117,7 +117,7 @@ function useRenderExampleCell() {
   return { renderCell };
 }
-const DefaultTreeGridExample: React.FC<Partial<TreeGridProps>> = (props) => {
+const DefaultTreeGridExample: React.FC<React.PropsWithChildren<Partial<TreeGridProps>>> = (props) => {
   const { renderCell } = useRenderExampleCell();
   return (
@@ -127,7 +127,7 @@ const DefaultTreeGridExample: React.FC<Partial<TreeGridProps>> = (props) => {
   );
 };
-const CustomTreeGridStateExample: React.FC<Partial<TreeGridProps>> = (props) => {
+const CustomTreeGridStateExample: React.FC<React.PropsWithChildren<Partial<TreeGridProps>>> = (props) => {
   const { renderCell } = useRenderExampleCell();
   const [activeRowId, setActiveRowId] = useState<TreeGridRowId | null>(null);
   const [expandedRows, setExpandedRows] = useState<Record<TreeGridRowId, boolean>>({});

package/src/development/TreeGrid/TreeGrid.tsx CHANGED Viewed

@@ -93,7 +93,7 @@ const findNextFocusableCellIndexInRow = (
   return -1;
 };
-export const TreeGrid: React.FC<TreeGridProps> = ({
+export const TreeGrid: React.FC<React.PropsWithChildren<TreeGridProps>> = ({
   data,
   columns,
   renderCell,

package/src/theme/convertToLessVars.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 // @ts-expect-error antd/dist/theme isn't typed
 import { getThemeVariables } from 'antd/dist/theme';
-import _ from 'lodash';
+import { kebabCase, mapKeys } from 'lodash';
 import { getAntdColors } from './colors';
 import generalVariables from './generalVariables';
@@ -16,10 +16,10 @@ export function getLessVariables(isDarkMode: boolean): Record<string, any> {
     ...(isDarkMode ? getThemeVariables({ dark: true }) : {}),
     // We store our tokens as objects with camelCase keys for JS compatibility. Here we convert them to kebab-case for
     // LESS compatibility.
-    ..._.mapKeys(getAntdColors(isDarkMode), (_value, key) => _.kebabCase(key)),
-    ..._.mapKeys(antdSpacing, (_value, key) => _.kebabCase(key)),
-    ..._.mapKeys(typography, (_value, key) => _.kebabCase(key)),
-    ..._.mapKeys(generalVariables, (_value, key) => _.kebabCase(key)),
+    ...mapKeys(getAntdColors(isDarkMode), (_value, key) => kebabCase(key)),
+    ...mapKeys(antdSpacing, (_value, key) => kebabCase(key)),
+    ...mapKeys(typography, (_value, key) => kebabCase(key)),
+    ...mapKeys(generalVariables, (_value, key) => kebabCase(key)),
   };
 }

package/src/~patterns/Wizard/VerticalWizardContent.tsx CHANGED Viewed

@@ -51,7 +51,9 @@ export function VerticalWizardContent({
   });
   return (
-    <Wrapper initialContentId={verticalDocumentationSidebarConfig?.initialContentId}>
+    <Wrapper
+      {...(displayDocumentationSideBar && { initialContentId: verticalDocumentationSidebarConfig?.initialContentId })}
+    >
       <div
         css={{
           width,

package/src/assets/icons/InfoIcon.svg DELETED Viewed

@@ -1,5 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.25 10.5V7.5H8.75V10.5H7.25Z" fill="#5F7281"/>
-<path d="M8 5C8.41421 5 8.75 5.33579 8.75 5.75C8.75 6.16421 8.41421 6.5 8 6.5C7.58579 6.5 7.25 6.16421 7.25 5.75C7.25 5.33579 7.58579 5 8 5Z" fill="#5F7281"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14ZM8 12.5C10.4853 12.5 12.5 10.4853 12.5 8C12.5 5.51472 10.4853 3.5 8 3.5C5.51472 3.5 3.5 5.51472 3.5 8C3.5 10.4853 5.51472 12.5 8 12.5Z" fill="#5F7281"/>
-</svg>