@workday/canvas-kit-react 9.0.1 → 10.0.0-alpha.426-next.0

package/action-bar/lib/useActionBarModel.tsx

@@ -19,6 +19,12 @@ export const useActionBarModel = createModelHook({
      */
     orientation: 'horizontal' as typeof useOverflowListModel.defaultConfig.orientation,
     menuConfig: {} as Partial<typeof useMenuModel.defaultConfig>,
+    /**
+     * The maximum number of actions that can be visible.
+     * Must be greater than 1 and less than items.length.
+     * @default 3
+     */
+    maximumVisible: 3,
   },
   requiredConfig: useOverflowListModel.requiredConfig,
 })(config => {
@@ -38,9 +44,20 @@ export const useActionBarModel = createModelHook({
   let nonInteractiveIds = model.state.nonInteractiveIds;
   const totalSize = model.state.items.length;
 
-  // Only show a maximum of 3 buttons
-  if (totalSize - hiddenIds.length >= 3) {
-    hiddenIds = items.slice(3, totalSize).map(getId);
+  console.log(config.maximumVisible);
+
+  // Only show maximumVisible buttons
+  const maximumVisible: number =
+    !config.maximumVisible || config.maximumVisible < 1
+      ? 3 // should fallback to default value
+      : config.maximumVisible > totalSize
+      ? totalSize
+      : config.maximumVisible;
+
+  console.log('maximumVisible', maximumVisible);
+
+  if (totalSize - hiddenIds.length >= maximumVisible) {
+    hiddenIds = items.slice(maximumVisible, totalSize).map(getId);
   }
 
   // Always show the first button and make sure it is interactive

package/checkbox/lib/Checkbox.tsx

@@ -359,7 +359,7 @@ export const Checkbox = createComponent('input')({
             htmlFor={inputId}
             disabled={disabled}
             variant={variant}
-            paddingInlineStart={checkboxLabelDistance}
+            paddingLeft={checkboxLabelDistance}
           >
             {label}
           </LabelText>

package/common/lib/utils/changeFocus.ts

@@ -10,27 +10,15 @@ export const changeFocus = (element: unknown) => {
     return;
   }
 
-  if (hasCallableProperty(element, 'focus')) {
+  if (element instanceof HTMLElement) {
     // Dispatch an unidentified keyboard event for an input provider prior to a focus change so that
     // the ring will appear.
-    if (typeof KeyboardEvent === 'function' && hasCallableProperty(element, 'dispatchEvent')) {
+    if (typeof KeyboardEvent === 'function') {
       const event = new KeyboardEvent('keydown', {bubbles: true, key: 'Unidentified'});
+
       element.dispatchEvent(event);
     }
 
     element.focus();
   }
 };
-
-type Callable<K extends string> = {
-  [P in K]: Function;
-};
-
-function hasCallableProperty<K extends string>(input: unknown, method: K): input is Callable<K> {
-  return (
-    !!input &&
-    typeof input === 'object' &&
-    method in input! &&
-    typeof (input as any)[method] === 'function'
-  );
-}