@databricks/design-system 1.1.0 → 1.2.0

package/dist/.pkgr-sources-hash

@@ -1 +1 @@
-45e2547ea5f5331e9315040adff8c0ae
+ead5d859c202d8833a0eb8bb3fb78300

package/dist/cjs/index.js

@@ -209,6 +209,7 @@ exports.getPaginationEmotionStyles = getPaginationEmotionStyles;
 exports.getTabEmotionStyles = void 0;
 exports.useDesignSystemTheme = useDesignSystemTheme;
 exports.useNotification = useNotification;
+exports.useThemedStyles = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
@@ -52660,15 +52661,15 @@ const antdGeneralVariables = {
   buttonInnerHeight: heightBase - spacing$1.sm * 2 - borderWidth * 2
 };
 var generalVariables = antdGeneralVariables;
-const FONT_SIZE_BASE = 14; // Less variables that are used by AntD
+const FONT_SIZE_BASE = 13; // Less variables that are used by AntD
 
 const antdTypography = {
-  fontSizeSm: 12,
+  fontSizeSm: FONT_SIZE_BASE - 2,
   fontSizeBase: FONT_SIZE_BASE,
   fontSizeMd: FONT_SIZE_BASE,
-  fontSizeLg: 18,
-  fontSizeXl: 22,
-  fontSizeXxl: 32,
+  fontSizeLg: FONT_SIZE_BASE + 6,
+  fontSizeXl: FONT_SIZE_BASE + 8,
+  fontSizeXxl: FONT_SIZE_BASE + 18,
   lineHeightSm: '16px',
   lineHeightBase: '20px',
   lineHeightMd: '20px',
@@ -52741,7 +52742,45 @@ function WithDesignSystemThemeHoc(Component) {
     });
   };
 }
+/**
+ * A helper hook that allows quick creation of theme-dependent styles. 
+ * Results in more compact code than using useMemo and 
+ * useDesignSystemTheme separately.
+ * 
+ * @example 
+ * const styles = useThemedStyles((theme) => ({
+ *   overlay: {
+ *     backgroundColor: theme.colors.backgroundPrimary,
+ *     borderRadius: theme.borders.borderRadiusMd,
+ *   },
+ *   wrapper: {
+ *     display: 'flex',
+ *     gap: theme.spacing.md,
+ *   },
+ * }));
+
+ * <div css={styles.overlay}>...</div>
+ * 
+ * @param styleFactory Factory function that accepts theme object as a parameter and returns
+ *     the style object. **Note**: factory function body is being memoized internally and is intended
+ *     to be used only for simple style objects that depend solely on the theme. If you want to use
+ *     styles that change depending on external values (state, props etc.) you should use
+ *     `useDesignSystemTheme` directly with  your own reaction mechanism.
+ * @returns The constructed style object
+ */
+
 
+const useThemedStyles = styleFactory => {
+  const {
+    theme
+  } = useDesignSystemTheme(); // We can assume that the factory function won't change and we're
+  // observing theme changes only.
+
+  const styleFactoryRef = (0, React.useRef)(styleFactory);
+  return (0, React.useMemo)(() => styleFactoryRef.current(theme), [theme]);
+};
+
+exports.useThemedStyles = useThemedStyles;
 const DuboisContextDefaults = {
   enableAnimation: false,
   theme: 'default',
@@ -53642,6 +53681,12 @@ function getCollapseEmotionStyles(clsPrefix, theme) {
     [classContentBox]: {
       padding: '8px 16px 16px'
     },
+    ...(theme.options.isCompact && {
+      ["& > ".concat(classItem, " > ").concat(classHeader)]: {
+        padding: '6px 44px 6px 0',
+        lineHeight: theme.typography.lineHeightBase
+      }
+    }),
     ...getAnimationCss(theme.options.enableAnimation)
   };
   return (
@@ -54286,7 +54331,7 @@ var DropdownMenu = /*#__PURE__*/Object.freeze({
 });
 exports.DropdownMenu = DropdownMenu;
 
-const getFormEmotionStyles = _ref => {
+const getFormItemEmotionStyles = _ref => {
   let {
     theme,
     clsPrefix
@@ -54304,7 +54349,8 @@ const getFormEmotionStyles = _ref => {
         lineHeight: theme.typography.lineHeightBase
       },
       [clsFormItemExplain]: {
-        fontSize: theme.typography.fontSizeSm
+        fontSize: theme.typography.fontSizeSm,
+        margin: 0
       },
       [clsFormItemInputControl]: {
         minHeight: theme.options.isCompact ? theme.general.heightSm : theme.general.heightBase
@@ -54313,7 +54359,7 @@ const getFormEmotionStyles = _ref => {
         border: 'none'
       },
       ...getAnimationCss(theme.options.enableAnimation)
-    }, process.env.NODE_ENV === "production" ? "" : ";label:getFormEmotionStyles;", process.env.NODE_ENV === "production" ? "" : ";label:getFormEmotionStyles;")
+    }, process.env.NODE_ENV === "production" ? "" : ";label:getFormItemEmotionStyles;", process.env.NODE_ENV === "production" ? "" : ";label:getFormItemEmotionStyles;")
   );
 };
 
@@ -54322,27 +54368,29 @@ const FormDubois = /*#__PURE__*/(0, React.forwardRef)(function Form(_ref2, ref)
     dangerouslySetAntdProps,
     ...props
   } = _ref2;
-  const {
-    theme,
-    classNamePrefix
-  } = useDesignSystemTheme();
   const mergedProps = { ...props,
     layout: props.layout || 'vertical',
     requiredMark: props.requiredMark || false
   };
   return (0, _jsxRuntime.jsx)(AntDForm, { ...mergedProps,
     ref: ref,
-    css: getFormEmotionStyles({
-      theme,
-      clsPrefix: classNamePrefix
-    }),
     ...dangerouslySetAntdProps
   });
 });
 exports.FormDubois = FormDubois;
 
-const FormItem = props => (0, _jsxRuntime.jsx)(AntDForm.Item, { ...props
-});
+const FormItem = props => {
+  const {
+    theme,
+    classNamePrefix
+  } = useDesignSystemTheme();
+  return (0, _jsxRuntime.jsx)(AntDForm.Item, { ...props,
+    css: getFormItemEmotionStyles({
+      theme,
+      clsPrefix: classNamePrefix
+    })
+  });
+};
 
 const FormNamespace = Object.assign(FormDubois, {
   Item: FormItem,
@@ -54780,7 +54828,6 @@ const getModalEmotionStyles = args => {
     /*#__PURE__*/
     (0, _react2.css)({
       [classNameHeader]: {
-        height: headerHeight,
         paddingTop: theme.options.isCompact ? theme.spacing.md : MODAL_PADDING$1,
         paddingLeft: theme.options.isCompact ? theme.spacing.lg : MODAL_PADDING$1,
         paddingRight: theme.options.isCompact ? theme.spacing.md : MODAL_PADDING$1,
@@ -54835,9 +54882,10 @@ const getModalEmotionStyles = args => {
         fontSize: theme.typography.fontSizeXl,
         lineHeight: theme.typography.lineHeightXl,
         fontWeight: theme.typography.typographyBoldFontWeight,
+        paddingRight: MODAL_PADDING$1,
         // Don't impact regular size
         ...(theme.options.isCompact && {
-          height: headerHeight / 2,
+          minHeight: headerHeight / 2,
           display: 'flex',
           alignItems: 'center'
         })
@@ -54846,7 +54894,9 @@ const getModalEmotionStyles = args => {
         maxHeight: modalMaxHeight,
         height: maxedOutHeight ? modalMaxHeight : '',
         overflow: 'hidden',
-        paddingBottom: contentBottomPadding
+        paddingBottom: contentBottomPadding,
+        display: 'flex',
+        flexDirection: 'column'
       },
       [classNameBody]: {
         overflowY: 'auto',