@databricks/design-system 1.9.0 → 1.9.2

package/dist/development.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"development.js","sources":["../src/development/TableUI/index.tsx","../src/development/Slider/Slider.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport type { CSSProperties } from 'react';\nimport React, { createContext, useContext } from 'react';\n\nimport { Checkbox, SortAscendingIcon, SortDescendingIcon, SortUnsortedIcon } from '../../design-system';\nimport { useDesignSystemTheme } from '../../design-system/Hooks';\nimport { Typography } from '../../design-system/Typography';\nimport type { TextProps } from '../../design-system/Typography/Text';\n\n// For performance, these styles are defined outside of the component so they are not redefined on every render.\n// We're also using CSS Variables rather than any dynamic styles so that the style object remains static.\nconst tableStyles = {\n  row: css({\n    display: 'flex',\n    borderBottom: '1px solid',\n    borderColor: 'var(--table-separator-color)',\n\n    // Note: Next-sibling selector is necessary for Ant Checkboxes; if we move away\n    // from those in the future we would need to adjust these styles.\n    '.table-row-select-cell input[type=\"checkbox\"] ~ *': {\n      opacity: 'var(--row-checkbox-opacity, 0)',\n    },\n\n    '&:hover': {\n      '[role=\"cell\"]': {\n        backgroundColor: 'var(--table-row-hover)',\n      },\n\n      '.table-row-select-cell input[type=\"checkbox\"] ~ *': {\n        opacity: 1,\n      },\n    },\n\n    '.table-row-select-cell input[type=\"checkbox\"]:focus ~ *': {\n      opacity: 1,\n    },\n  }),\n\n  cell: css({\n    display: 'inline-grid',\n    position: 'relative',\n    alignItems: 'var(--table-row-vertical-alignment, flex-start)',\n    flex: 1,\n    lineHeight: 'initial',\n    padding: '6px 8px',\n    boxSizing: 'border-box',\n\n    '&[role=\"columnheader\"]': {\n      padding: 8,\n    },\n  }),\n\n  cellSmall: css({\n    padding: '4px 8px',\n    '&[role=\"columnheader\"]': {\n      padding: '4px 8px',\n    },\n  }),\n\n  header: css({\n    fontWeight: 'bold',\n    alignItems: 'flex-end',\n    display: 'flex',\n    overflow: 'hidden',\n\n    '&[aria-sort]': {\n      cursor: 'pointer',\n      userSelect: 'none',\n    },\n\n    '[role=\"img\"]': {\n      marginLeft: '4px',\n    },\n  }),\n\n  headerButtonTarget: css({\n    alignItems: 'flex-end',\n    display: 'flex',\n    overflow: 'hidden',\n    width: '100%',\n  }),\n\n  checkboxCell: css({\n    padding: '0 0 0 8px',\n    display: 'flex',\n    alignItems: 'center',\n    flex: 0,\n  }),\n\n  resizeHandleContainer: css({\n    position: 'absolute',\n    right: -3,\n    top: 8,\n    bottom: 8,\n    width: 8,\n    display: 'flex',\n    justifyContent: 'center',\n    cursor: 'col-resize',\n    userSelect: 'none',\n    touchAction: 'none',\n    zIndex: 1,\n  }),\n\n  resizeHandle: css({\n    width: 1,\n    background: 'var(--table-separator-color)',\n  }),\n};\n\nconst TableContext = createContext<{\n  size: 'default' | 'small';\n  someRowsSelected?: boolean;\n}>({\n  size: 'default',\n});\n\ninterface TableProps {\n  size?: 'default' | 'small';\n  /** Are any rows currently selected? You must specify this if using `TableRowSelectCell` in your table. */\n  someRowsSelected?: boolean;\n  /** Style property */\n  style?: CSSProperties;\n}\n\nexport const Table: React.FC<TableProps> = ({ children, size = 'default', someRowsSelected, style }): JSX.Element => {\n  const { theme } = useDesignSystemTheme();\n\n  return (\n    <TableContext.Provider value={{ size, someRowsSelected }}>\n      <div\n        role=\"table\"\n        // This is a performance optimization; we want to statically create the styles for the table,\n        // but for the dynamic theme values, we need to use CSS variables.\n        // See: https://emotion.sh/docs/best-practices#advanced-css-variables-with-style\n        style={{\n          ...style,\n          ['--table-separator-color' as any]: theme.colors.tableSeparatorColor,\n          ['--table-row-hover' as any]: theme.colors.tableRowHover,\n        }}\n      >\n        {children}\n      </div>\n    </TableContext.Provider>\n  );\n};\n\nconst TableRowContext = createContext<{\n  isHeader: boolean;\n}>({\n  isHeader: false,\n});\n\ninterface TableRowProps {\n  isHeader?: boolean;\n  /** Vertical alignment of the row's cells. */\n  verticalAlignment?: 'top' | 'center';\n}\n\nexport const TableRow: React.FC<TableRowProps> = ({ children, isHeader = false, verticalAlignment = 'top' }) => {\n  return (\n    <TableRowContext.Provider value={{ isHeader }}>\n      <div\n        css={tableStyles.row}\n        role=\"row\"\n        style={{\n          ['--table-row-vertical-alignment' as any]: verticalAlignment === 'top' ? 'flex-start' : 'center',\n        }}\n      >\n        {children}\n      </div>\n    </TableRowContext.Provider>\n  );\n};\n\ninterface TableCellProps {\n  /** Enables single-line ellipsis truncation */\n  ellipsis?: boolean;\n  /** Style property */\n  style?: CSSProperties;\n}\n\nexport const TableCell: React.FC<TableCellProps> = ({ children, ellipsis = false, style }) => {\n  const { size } = useContext(TableContext);\n\n  let typographySize: TextProps['size'] = 'md';\n\n  if (size === 'small') {\n    typographySize = 'sm';\n  }\n\n  return (\n    <div css={[tableStyles.cell, size === 'small' && tableStyles.cellSmall]} role=\"cell\" style={style}>\n      <Typography.Text\n        ellipsis={ellipsis}\n        size={typographySize}\n        title={(ellipsis && typeof children === 'string' && children) || undefined}\n      >\n        {children}\n      </Typography.Text>\n    </div>\n  );\n};\n\ninterface TableHeaderProps {\n  /** Enables single-line ellipsis truncation */\n  ellipsis?: boolean;\n  /** Is this column sortable? */\n  sortable?: boolean;\n  /** The current sort direction for this column */\n  sortDirection?: 'asc' | 'desc' | 'none';\n  /** Callback for when the user requests to toggle `sortDirection` */\n  onToggleSort?: (event: unknown) => void;\n  /** Style property */\n  style?: CSSProperties;\n}\n\nexport const TableHeader: React.FC<TableHeaderProps> = ({\n  children,\n  ellipsis = false,\n  sortable,\n  sortDirection,\n  onToggleSort,\n  style,\n}) => {\n  const { theme } = useDesignSystemTheme();\n  const { size } = useContext(TableContext);\n  const { isHeader } = useContext(TableRowContext);\n\n  if (!isHeader) {\n    throw new Error('`TableHeader` must be used within a `TableRow` with `isHeader` set to true.');\n  }\n\n  let sortIcon = <></>;\n  // While most libaries use `asc` and `desc` for the sort value, the ARIA spec\n  // uses `ascending` and `descending`.\n  let ariaSort: React.AriaAttributes['aria-sort'];\n\n  if (sortable) {\n    if (sortDirection === 'asc') {\n      sortIcon = <SortAscendingIcon />;\n      ariaSort = 'ascending';\n    } else if (sortDirection === 'desc') {\n      sortIcon = <SortDescendingIcon />;\n      ariaSort = 'descending';\n    } else if (sortDirection === 'none') {\n      sortIcon = <SortUnsortedIcon />;\n      ariaSort = 'none';\n    }\n  }\n\n  let typographySize: TextProps['size'] = 'md';\n\n  if (size === 'small') {\n    typographySize = 'sm';\n  }\n\n  const textContents = (\n    <Typography.Text\n      // If sortable, we must use ellipsis to prevent wrapping and misalignment.\n      ellipsis={ellipsis || sortable}\n      size={typographySize}\n      title={(ellipsis && typeof children === 'string' && children) || undefined}\n    >\n      {children}\n    </Typography.Text>\n  );\n\n  return (\n    <div\n      css={[tableStyles.cell, tableStyles.header, size === 'small' && tableStyles.cellSmall]}\n      role=\"columnheader\"\n      aria-sort={(sortable && ariaSort) || undefined}\n      style={style}\n    >\n      {sortable ? (\n        <div\n          css={[tableStyles.headerButtonTarget]}\n          role=\"button\"\n          tabIndex={0}\n          onClick={onToggleSort}\n          onKeyDown={(event) => {\n            if (sortable && (event.key === 'Enter' || event.key === ' ')) {\n              event.preventDefault();\n              return onToggleSort?.(event);\n            }\n          }}\n        >\n          {textContents}\n          <span style={{ color: theme.colors.textSecondary }}>{sortIcon}</span>\n        </div>\n      ) : (\n        textContents\n      )}\n    </div>\n  );\n};\n\ninterface TableHeaderResizeHandleProps {\n  /** Style property */\n  style?: CSSProperties;\n  /** Pass a handler to be called on touchStart */\n  resizeHandler?: (event: unknown) => void;\n}\n\nexport const TableHeaderResizeHandle: React.FC<TableHeaderResizeHandleProps> = ({ style, resizeHandler }) => {\n  const { isHeader } = useContext(TableRowContext);\n\n  if (!isHeader) {\n    throw new Error('`TableHeaderResizeHandle` must be used within a `TableRow` with `isHeader` set to true.');\n  }\n\n  return (\n    <div onMouseDown={resizeHandler} onTouchStart={resizeHandler} css={tableStyles.resizeHandleContainer} style={style}>\n      <div css={tableStyles.resizeHandle} />\n    </div>\n  );\n};\n\ntype TableRowSelectCellProps = {\n  /** Called when the checkbox is clicked */\n  onChange?: (event: unknown) => void;\n  /** Whether the checkbox is checked */\n  checked?: boolean;\n  /** Whether the row is indeterminate. Should only be used in header rows. */\n  indeterminate?: boolean;\n  /** Don't render a checkbox; used for providing spacing in header if you don't want \"Select All\" functionality */\n  noCheckbox?: boolean;\n};\n\nexport const TableRowSelectCell: React.FC<TableRowSelectCellProps> = ({\n  onChange,\n  checked,\n  indeterminate,\n  noCheckbox,\n}) => {\n  const { isHeader } = useContext(TableRowContext);\n  const { someRowsSelected } = useContext(TableContext);\n\n  if (typeof someRowsSelected === 'undefined') {\n    throw new Error(\n      '`TableRowSelectCell` cannot be used unless `someRowsSelected` has been provided to the `Table` component, see documentation.'\n    );\n  }\n\n  if (!isHeader && indeterminate) {\n    throw new Error('`TableRowSelectCell` cannot be used with `indeterminate` in a non-header row.');\n  }\n\n  return (\n    <div\n      css={tableStyles.checkboxCell}\n      style={{\n        paddingLeft: 8,\n        paddingTop: 0,\n        paddingBottom: 0,\n        flex: 0,\n        minWidth: 16,\n        maxWidth: 16,\n        ['--row-checkbox-opacity' as any]: someRowsSelected ? 1 : 0,\n      }}\n      role={isHeader ? 'columnheader' : 'cell'}\n      // TODO: Ideally we shouldn't need to specify this `className`, but it allows for row-hovering to reveal\n      // the checkbox in `TableRow`'s CSS without extra JS pointerin/out events.\n      className=\"table-row-select-cell\"\n    >\n      {!noCheckbox && (\n        <Checkbox\n          isChecked={checked || (indeterminate && null)}\n          onChange={(_checked, event) => onChange?.(event.nativeEvent)}\n        />\n      )}\n    </div>\n  );\n};\n","import { css } from '@emotion/react';\nimport * as RadixSlider from '@radix-ui/react-slider';\nimport { forwardRef } from 'react';\n\nimport { useDesignSystemTheme } from '../../design-system/Hooks';\nimport type { Theme } from '../../theme';\n\nexport type SliderRootProps = Omit<RadixSlider.SliderProps, 'orientation'>;\nexport type SliderTrackProps = RadixSlider.SliderTrackProps;\nexport type SliderRangeProps = RadixSlider.SliderRangeProps;\nexport type SliderThumbProps = RadixSlider.SliderThumbProps;\n\nconst getRootStyles = () => {\n  return css({\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n\n    '&[data-orientation=\"vertical\"]': {\n      flexDirection: 'column',\n      width: 20,\n      height: 100,\n    },\n\n    '&[data-orientation=\"horizontal\"]': {\n      height: 20,\n      width: 200,\n    },\n  });\n};\n\nexport const Root = forwardRef<HTMLElement, SliderRootProps>((props: SliderRootProps, ref): JSX.Element => {\n  return <RadixSlider.Root css={getRootStyles()} {...props} ref={ref} />;\n});\n\nconst getTrackStyles = (theme: Theme) => {\n  return css({\n    backgroundColor: theme.colors.grey100,\n    position: 'relative',\n    flexGrow: 1,\n    borderRadius: 9999,\n\n    '&[data-orientation=\"vertical\"]': {\n      width: 3,\n    },\n\n    '&[data-orientation=\"horizontal\"]': {\n      height: 3,\n    },\n  });\n};\n\nexport const Track = forwardRef<HTMLElement, SliderTrackProps>((props: SliderTrackProps, ref): JSX.Element => {\n  const { theme } = useDesignSystemTheme();\n\n  return <RadixSlider.Track css={getTrackStyles(theme)} {...props} ref={ref} />;\n});\n\nconst getRangeStyles = (theme: Theme) => {\n  return css({\n    backgroundColor: theme.colors.primary,\n    position: 'absolute',\n    borderRadius: 9999,\n    height: '100%',\n\n    '&[data-disabled]': {\n      backgroundColor: theme.colors.grey100,\n    },\n  });\n};\n\nexport const Range = forwardRef<HTMLElement, SliderRangeProps>((props: SliderRangeProps, ref): JSX.Element => {\n  const { theme } = useDesignSystemTheme();\n\n  return <RadixSlider.Range css={getRangeStyles(theme)} {...props} ref={ref} />;\n});\n\nconst getThumbStyles = (theme: Theme) => {\n  return css({\n    display: 'block',\n    width: 20,\n    height: 20,\n    backgroundColor: theme.colors.actionPrimaryBackgroundDefault,\n    boxShadow: `0 2px 4px 0 ${theme.colors.grey400}`,\n    borderRadius: 10,\n    outline: 'none',\n\n    '&:hover': {\n      backgroundColor: theme.colors.actionPrimaryBackgroundHover,\n    },\n\n    '&:focus': {\n      backgroundColor: theme.colors.actionPrimaryBackgroundPress,\n    },\n\n    '&[data-disabled]': {\n      backgroundColor: theme.colors.grey200,\n      boxShadow: 'none',\n    },\n  });\n};\n\nexport const Thumb = forwardRef<HTMLElement, SliderThumbProps>((props: SliderThumbProps, ref): JSX.Element => {\n  const { theme } = useDesignSystemTheme();\n\n  return <RadixSlider.Thumb css={getThumbStyles(theme)} {...props} ref={ref} />;\n});\n"],"names":["tableStyles","row","cell","cellSmall","header","headerButtonTarget","checkboxCell","resizeHandleContainer","css","position","right","top","bottom","width","display","justifyContent","cursor","userSelect","touchAction","zIndex","resizeHandle","TableContext","createContext","size","Table","children","someRowsSelected","style","theme","useDesignSystemTheme","_jsx","colors","tableSeparatorColor","tableRowHover","TableRowContext","isHeader","TableRow","verticalAlignment","TableCell","ellipsis","useContext","typographySize","undefined","TableHeader","sortable","sortDirection","onToggleSort","Error","sortIcon","ariaSort","textContents","_jsxs","event","key","preventDefault","color","textSecondary","TableHeaderResizeHandle","resizeHandler","TableRowSelectCell","onChange","checked","indeterminate","noCheckbox","paddingLeft","paddingTop","paddingBottom","flex","minWidth","maxWidth","_checked","nativeEvent","getRootStyles","Root","forwardRef","props","ref","getTrackStyles","backgroundColor","grey100","flexGrow","borderRadius","height","Track","getRangeStyles","primary","Range","getThumbStyles","actionPrimaryBackgroundDefault","boxShadow","grey400","outline","actionPrimaryBackgroundHover","actionPrimaryBackgroundPress","grey200","Thumb"],"mappings":"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"}

package/dist/flags.d.ts

@@ -5,7 +5,8 @@ export declare enum AvailableDesignSystemFlags {
     'USE_NEW_ICONS' = "USE_NEW_ICONS",
     'USE_NEW_TREE' = "USE_NEW_TREE",
     'USE_TRANSPARENT_INPUT' = "USE_TRANSPARENT_INPUT",
-    'USE_NEW_RADIO_STYLES' = "USE_NEW_RADIO_STYLES"
+    'USE_NEW_RADIO_STYLES' = "USE_NEW_RADIO_STYLES",
+    'USE_NEW_CHECKBOX_STYLES' = "USE_NEW_CHECKBOX_STYLES"
 }
 type DesignSystemFlagMetadata = {
     description: string;

package/dist/flags.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"flags.d.ts","sourceRoot":"","sources":["../src/flags.ts"],"names":[],"mappings":"AAAA,oBAAY,0BAA0B;IACpC,WAAW,cAAc;IACzB,gCAAgC,mCAAmC;IACnE,iBAAiB,oBAAoB;IACrC,eAAe,kBAAkB;IACjC,cAAc,iBAAiB;IAC/B,uBAAuB,0BAA0B;IACjD,sBAAsB,yBAAyB;CAChD;AAED,KAAK,wBAAwB,GAAG;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,iCAAiC,EAAE,MAAM,CAAC,0BAA0B,EAAE,wBAAwB,CA6B1G,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC,MAAM,CAAC,0BAA0B,EAAE,OAAO,CAAC,CAAC,CAAC"}
+{"version":3,"file":"flags.d.ts","sourceRoot":"","sources":["../src/flags.ts"],"names":[],"mappings":"AAAA,oBAAY,0BAA0B;IACpC,WAAW,cAAc;IACzB,gCAAgC,mCAAmC;IACnE,iBAAiB,oBAAoB;IACrC,eAAe,kBAAkB;IACjC,cAAc,iBAAiB;IAC/B,uBAAuB,0BAA0B;IACjD,sBAAsB,yBAAyB;IAC/C,yBAAyB,4BAA4B;CACtD;AAED,KAAK,wBAAwB,GAAG;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,iCAAiC,EAAE,MAAM,CAAC,0BAA0B,EAAE,wBAAwB,CAiC1G,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC,MAAM,CAAC,0BAA0B,EAAE,OAAO,CAAC,CAAC,CAAC"}

package/dist/index-dark.css

@@ -18882,6 +18882,7 @@ div.du-bois-dark-typography-edit-content.du-bois-dark-typography-rtl {
 }
 .du-bois-dark-notification-notice {
   padding: 10px 40px 10px 32px;
+  box-shadow: 0px 4px 16px rgba(46, 56, 64, 0.12);
 }
 .du-bois-dark-notification-notice .du-bois-dark-notification-notice-icon {
   font-size: 16px;

package/dist/index-mfe-dark.css

@@ -17487,6 +17487,7 @@
 }
 .mfe-root .du-bois-dark-notification-notice {
   padding: 10px 40px 10px 32px;
+  box-shadow: 0px 4px 16px rgba(46, 56, 64, 0.12);
 }
 .mfe-root .du-bois-dark-notification-notice .du-bois-dark-notification-notice-icon {
   font-size: 16px;

package/dist/index-mfe.css

@@ -17149,6 +17149,7 @@
 }
 .mfe-root .du-bois-light-notification-notice {
   padding: 10px 40px 10px 32px;
+  box-shadow: 0px 4px 16px rgba(46, 56, 64, 0.12);
 }
 .mfe-root .du-bois-light-notification-notice .du-bois-light-notification-notice-icon {
   font-size: 16px;

package/dist/index.css

@@ -18511,6 +18511,7 @@ div.du-bois-light-typography-edit-content.du-bois-light-typography-rtl {
 }
 .du-bois-light-notification-notice {
   padding: 10px 40px 10px 32px;
+  box-shadow: 0px 4px 16px rgba(46, 56, 64, 0.12);
 }
 .du-bois-light-notification-notice .du-bois-light-notification-notice-icon {
   font-size: 16px;