@redsift/design-system 9.0.0-alpha.6 → 9.0.0-alpha.8

package/index.d.ts

@@ -1964,8 +1964,15 @@ declare function useFocusOnList(): UseFocusGroupProps;
  * Component props.
  */
 interface GridProps extends ComponentProps<'div'>, StylingProps, InternalSpacingProps, GridLayoutProps {
+    /** Whether the grid has divider or not. The number of pixels defining the gap between columns and rows is mandatory. This replaces the grid gap property. */
+    divider?: {
+        colGap: number;
+        rowGap: number;
+    };
 }
-type StyledGridProps = GridProps;
+type StyledGridProps = GridProps & {
+    $divider: GridProps['divider'];
+};
 
 /**
  * Component props.
@@ -2682,6 +2689,8 @@ interface TextFieldProps extends Omit<ComponentProps<'div'>, 'onChange'>, Stylin
     onClear?(): void;
     /** Placeholder. */
     placeholder?: string;
+    /** Input type. */
+    type?: HTMLInputElement['type'];
     /**
      * Input value.
      * Used for controlled version.

package/index.js

@@ -2214,7 +2214,7 @@ const StyledAppSidePanel = styled.div`
   align-items: center;
   background-color: var(--redsift-side-navigation-color-background);
   border-right: 4px solid #e1e1e1;
-  box-sizing: content-box;
+  box-sizing: border-box;
   flex-direction: column;
   height: 100%;
   left: 0px;
@@ -2226,7 +2226,7 @@ const StyledAppSidePanel = styled.div`
   let {
     $variant
   } = _ref;
-  return $variant === AppSidePanelVariant.shrinked ? '64px' : '250px';
+  return $variant === AppSidePanelVariant.shrinked ? '68px' : '254px';
 }};
   z-index: var(--redsift-layout-z-index-side-panel);
 
@@ -3924,6 +3924,7 @@ const DEFAULT_PROPS$x = {};
  * The AppBar component.
  */
 const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
+  var _breadcrumbs$;
   const {
       breadcrumbs,
       children,
@@ -3965,12 +3966,13 @@ const AppBar = /*#__PURE__*/forwardRef((props, ref) => {
   }, propsTitle) : breadcrumbs ? /*#__PURE__*/React__default.createElement(Breadcrumbs, {
     "aria-label": "Breadcrumb"
   }, appContainerState && appContainerState.sidePanelVariant === AppSidePanelVariant.shrinked ? /*#__PURE__*/React__default.createElement(Breadcrumbs.Item, {
-    href: "/"
+    href: "/",
+    as: ((_breadcrumbs$ = breadcrumbs[0]) === null || _breadcrumbs$ === void 0 ? void 0 : _breadcrumbs$.as) || 'a'
   }, ProductName[appContainerState.product]) : null, breadcrumbs.map((breadcrumbItem, index) => /*#__PURE__*/React__default.createElement(Breadcrumbs.Item, _extends$1({
     key: index
   }, breadcrumbItem, {
-    isDisabled: breadcrumbItem.href === undefined,
-    as: index === breadcrumbs.length - 1 ? 'h1' : breadcrumbItem.href === undefined ? 'span' : 'a'
+    isDisabled: breadcrumbItem.isDisabled || breadcrumbItem.href === undefined,
+    as: index === breadcrumbs.length - 1 ? 'h1' : breadcrumbItem.href === undefined ? 'span' : breadcrumbItem.as || 'a'
   })))) : fallbackTitle ? /*#__PURE__*/React__default.createElement(Heading, {
     as: "h1"
   }, fallbackTitle) : null), /*#__PURE__*/React__default.createElement("div", {
@@ -3985,11 +3987,11 @@ AppBar.displayName = COMPONENT_NAME$x;
  * Component style.
  */
 const StyledAppContent = styled.main`
+  padding: 16px 64px;
   ${baseContainer}
 
   box-sizing: border-box;
   min-height: calc(100vh - 92px);
-  padding: 16px 64px;
 
   @media screen and (max-width: 768px) {
     padding: 0px;
@@ -4000,11 +4002,11 @@ const StyledAppContent = styled.main`
     $isSidePanelCollapsed
   } = _ref;
   return !$isSidePanelCollapsed ? css`
-          transform: translate(250px);
-          width: calc(100% - 250px);
+          transform: translate(254px);
+          width: calc(100% - 254px);
         ` : css`
-          transform: translate(64px);
-          width: calc(100% - 64px);
+          transform: translate(68px);
+          width: calc(100% - 68px);
         `;
 }}
 
@@ -4132,7 +4134,6 @@ const StyledCard = styled.div`
 
   display: flex;
   flex-direction: column;
-  padding: 16px;
 
   .redsift-card__header {
     align-items: flex-start;
@@ -5555,11 +5556,16 @@ const StyledPill = styled.div`
 
   padding: 2px 8px;
   text-align: center;
-  word-break: ${_ref => {
+  
+  ${_ref => {
   let {
     $autoBreak
   } = _ref;
-  return $autoBreak ? 'break-word' : 'normal';
+  return !$autoBreak ? css`
+          text-wrap: nowrap;
+        ` : css`
+          word-break: break-word;
+        `;
 }};
 
   ${_ref2 => {
@@ -10300,10 +10306,44 @@ const StyledGrid = styled.div`
   } = _ref;
   return inline ? 'inline-grid' : 'grid';
 }};
+  flex: 1;
+  max-width: fit-content;
 
   ${baseStyling}
   ${baseInternalSpacing}
   ${baseGrid}
+
+  ${_ref2 => {
+  let {
+    $divider
+  } = _ref2;
+  return $divider ? css`
+          overflow: hidden;
+          .redsift-grid-item {
+            position: relative;
+
+            ::before {
+              content: '';
+              position: absolute;
+              background-color: var(--redsift-color-neutral-lightgrey);
+              inline-size: 1px;
+              block-size: 100%;
+              inset-inline-start: calc(${$divider.colGap / 2}px * -1);
+            }
+
+            ::after {
+              content: '';
+              position: absolute;
+              background-color: var(--redsift-color-neutral-lightgrey);
+              inline-size: 100vw;
+              block-size: 1px;
+              inset-inline-start: 0;
+              inset-block-start: calc(${$divider.rowGap / 2}px * -1);
+              z-index: 0;
+            }
+          }
+        ` : '';
+}}
 `;
 
 /**
@@ -10339,7 +10379,7 @@ GridItem.className = CLASSNAME$b;
 GridItem.defaultProps = DEFAULT_PROPS$b;
 GridItem.displayName = COMPONENT_NAME$b;
 
-const _excluded$c = ["children", "className"];
+const _excluded$c = ["children", "className", "divider", "gap"];
 const COMPONENT_NAME$a = 'Grid';
 const CLASSNAME$a = 'redsift-grid';
 const DEFAULT_PROPS$a = {};
@@ -10350,12 +10390,16 @@ const DEFAULT_PROPS$a = {};
 const BaseGrid = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       children,
-      className
+      className,
+      divider,
+      gap
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$c);
   return /*#__PURE__*/React__default.createElement(StyledGrid, _extends$1({}, forwardedProps, {
+    gap: divider ? `${divider.rowGap}px ${divider.colGap}px` : gap,
     className: classNames(BaseGrid.className, className),
-    ref: ref
+    ref: ref,
+    $divider: divider
   }), children);
 });
 BaseGrid.className = CLASSNAME$a;
@@ -12171,7 +12215,7 @@ const StyledTextField = styled.div`
 }}
 `;
 
-const _excluded = ["aria-label", "aria-labelledby", "autoFocus", "className", "defaultValue", "hasClearButton", "after", "internal", "inputProps", "inputRef", "isColored", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "leftIcon", "name", "onBlur", "onChange", "onClear", "onFocus", "placeholder", "value", "variant"];
+const _excluded = ["aria-label", "aria-labelledby", "autoFocus", "className", "defaultValue", "hasClearButton", "after", "internal", "inputProps", "inputRef", "isColored", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "leftIcon", "name", "onBlur", "onChange", "onClear", "onFocus", "placeholder", "type", "value", "variant"];
 const COMPONENT_NAME = 'TextField';
 const CLASSNAME = 'redsift-text-field';
 const DEFAULT_PROPS = {
@@ -12209,6 +12253,7 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
       onClear,
       onFocus: onFocusProps,
       placeholder,
+      type,
       value: propsValue,
       variant
     } = props,
@@ -12240,8 +12285,9 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     }
     if (onChange) {
       onChange(event.target.value, name, event);
+    } else {
+      setValue(event.target.value);
     }
-    setValue(event.target.value);
   }, [onChange]);
   const handleClear = useCallback(() => {
     if (isDisabled || isReadOnly) {
@@ -12299,7 +12345,7 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     onChange: handleChange,
     placeholder: placeholder,
     ref: inputRef,
-    type: "text",
+    type: type,
     value: value
   })), hasClearButton || internal || after ? /*#__PURE__*/React__default.createElement(Flexbox, {
     className: `${TextField.className}-input-wrapper__toolbar`,