feat(component): Add an action prop for columns whose type is number …

…or text (#1621)

* feat(component): add number-unlimited column type to worksheet

* chore(all): create release lazy-zebras-dance.md

.changeset/nice-walls-relax.md

@@ -0,0 +1,7 @@
+---
+"@bigcommerce/big-design-icons": patch
+"@bigcommerce/big-design": patch
+"@bigcommerce/docs": patch
+---
+
+feat(component): Add an action prop for columns whose type is number or text

packages/big-design-icons/src/components/AllInclusiveIcon.tsx

@@ -0,0 +1,37 @@
+// **********************************
+// Auto-generated file, do NOT modify
+// **********************************
+import React, { forwardRef, memo, useId } from 'react';
+
+import { createStyledIcon, IconProps, PrivateIconProps } from '../base';
+
+const Icon: React.FC<IconProps & PrivateIconProps> = ({ svgRef, title, theme, ...props }) => {
+  const uniqueTitleId = useId();
+  const titleId = title ? props.titleId || uniqueTitleId : undefined;
+  const ariaHidden = titleId ? undefined : true;
+
+  return (
+    <svg
+      aria-hidden={ariaHidden}
+      aria-labelledby={titleId}
+      fill="currentColor"
+      height={24}
+      ref={svgRef}
+      stroke="currentColor"
+      strokeWidth="0"
+      viewBox="0 0 24 24"
+      width={24}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M20.22 6.86c-2-.6-4.06-.04-5.39 1.29L12 10.66 10.48 12h.01L7.8 14.39c-.81.81-1.95 1.15-3.12.92a3.35 3.35 0 0 1-2.57-2.49 3.39 3.39 0 0 1 3.29-4.2c.91 0 1.76.35 2.44 1.03l.47.41c.38.34.95.34 1.33 0 .45-.4.45-1.1 0-1.5l-.42-.36A5.37 5.37 0 0 0 5.4 6.62C2.42 6.62 0 9.04 0 12s2.42 5.38 5.4 5.38c1.44 0 2.8-.56 3.77-1.53l2.83-2.5.01.01L13.52 12h-.01l2.69-2.39c.81-.81 1.95-1.15 3.12-.92 1.25.25 2.28 1.25 2.57 2.49a3.39 3.39 0 0 1-3.29 4.2c-.9 0-1.76-.35-2.44-1.03l-.48-.42a.995.995 0 0 0-1.33 0c-.45.4-.45 1.1 0 1.5l.42.37a5.39 5.39 0 0 0 3.82 1.57c3.27 0 5.86-2.9 5.33-6.25-.3-1.99-1.77-3.69-3.7-4.26" />
+    </svg>
+  );
+};
+const IconWithForwardedRef = forwardRef<SVGSVGElement, IconProps>((iconProps, ref) => (
+  <Icon {...iconProps} svgRef={ref} />
+));
+
+export const AllInclusiveIcon = memo(createStyledIcon(IconWithForwardedRef));
+AllInclusiveIcon.displayName = 'AllInclusiveIcon';

packages/big-design-icons/src/components/index.ts

@@ -1,5 +1,6 @@
 export * from './AddCircleOutlineIcon';
 export * from './AddIcon';
+export * from './AllInclusiveIcon';
 export * from './ArrowBackIcon';
 export * from './ArrowDownwardIcon';
 export * from './ArrowDropDownIcon';

packages/big-design/src/components/Worksheet/Cell/Cell.tsx

@@ -27,6 +27,7 @@ interface CellProps<Item> extends TCell<Item> {
   formatting?: WorksheetTextColumn<Item>['formatting'];
   validation?: InternalWorksheetColumn<Item>['validation'];
   notation?: InternalWorksheetColumn<Item>['notation'];
+  action?: WorksheetTextColumn<Item>['action'];
 }
 
 const InternalCell = <T extends WorksheetItem>({
@@ -44,6 +45,7 @@ const InternalCell = <T extends WorksheetItem>({
   nextRowValue,
   isChild,
   isLastChild,
+  action,
 }: CellProps<T>) => {
   const cell: TCell<T> = useMemo(
     () => ({ columnIndex, disabled, hash, rowIndex, type, value }),
@@ -233,6 +235,7 @@ const InternalCell = <T extends WorksheetItem>({
       default:
         return isEditing && !disabled ? (
           <TextEditor
+            action={action}
             cell={cell}
             initialValue={editWithValue}
             isControlKey={isControlKey}
@@ -250,13 +253,14 @@ const InternalCell = <T extends WorksheetItem>({
   }, [
     type,
     cell,
+    isEditing,
     handleBlur,
     handleChange,
     options,
-    isEditing,
     formatting,
     rowId,
     disabled,
+    action,
     editWithValue,
     isControlKey,
     isEdited,

packages/big-design/src/components/Worksheet/Cell/styled.tsx

@@ -153,9 +153,9 @@ export const CellNote = styled.div<{ color: keyof Colors }>`
 
   border-bottom: 8px solid ${({ theme, color }) => theme.colors[color]};
   position: absolute;
-  top -1px;
+  top: -1px;
   right: -5px;
-  transform: rotate(45deg)
+  transform: rotate(45deg);
 `;
 
 StyledCell.defaultProps = { theme: defaultTheme };

packages/big-design/src/components/Worksheet/Row/Row.tsx

@@ -107,6 +107,11 @@ const InternalRow = <T extends WorksheetItem>({ columns, rowIndex }: RowProps<T>
       <RowStatus rowIndex={rowIndex} />
       {columns.map((column, columnIndex) => (
         <Cell
+          action={
+            column.type === undefined || column.type === 'number' || column.type === 'text'
+              ? column?.action
+              : undefined
+          }
           columnIndex={columnIndex}
           disabled={getIsCellDisabled(column)}
           formatting={hasFormatting(column) ? column.formatting : undefined}